+
+ ) : (
+ 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/src/components/CompatibilityCheck.tsx b/src/components/CompatibilityCheck.tsx
new file mode 100644
index 0000000..563d424
--- /dev/null
+++ b/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/src/components/ContactContextMenu/index.module.scss b/src/components/ContactContextMenu/index.module.scss
new file mode 100644
index 0000000..2886855
--- /dev/null
+++ b/src/components/ContactContextMenu/index.module.scss
@@ -0,0 +1,15 @@
+.contextMenuOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 999;
+ background: transparent;
+}
+
+.contextMenu {
+ min-width: 150px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+}
diff --git a/src/components/ContactContextMenu/index.tsx b/src/components/ContactContextMenu/index.tsx
new file mode 100644
index 0000000..6b1115a
--- /dev/null
+++ b/src/components/ContactContextMenu/index.tsx
@@ -0,0 +1,255 @@
+/**
+ * 联系人右键菜单组件
+ * 支持修改备注、移动分组操作
+ */
+
+import React, { useState, useEffect } from "react";
+import { Menu, Modal, Input, Form, Select, message } from "antd";
+import { EditOutlined, SwapOutlined } from "@ant-design/icons";
+import { Contact } from "@/utils/db";
+import { ContactGroup } from "@/store/module/weChat/contacts.data";
+import styles from "./index.module.scss";
+
+/**
+ * 联系人右键菜单Props
+ */
+export interface ContactContextMenuProps {
+ /** 当前联系人 */
+ contact: Contact;
+ /** 所有分组列表 */
+ groups: ContactGroup[];
+ /** 菜单位置 */
+ x: number;
+ y: number;
+ /** 是否显示 */
+ visible: boolean;
+ /** 关闭菜单 */
+ onClose: () => void;
+ /** 操作完成回调 */
+ onComplete?: () => void;
+ /** 修改备注回调 */
+ onUpdateRemark?: (contact: Contact, remark: string) => Promise
+ 浏览器兼容性警告
+
+
+ 当前浏览器: {compatibility.browser} {compatibility.version}
+
+
+ {compatibility.issues.map((issue, index) => (
+
+ {issue}
+ ))}
+
+ 建议使用 Chrome 50+、Firefox 50+、Safari 10+ 或 Edge 12+
+
+ e.preventDefault()}
+ />
+
+
+ )}
+
+ {/* 修改备注Modal */}
+ {
+ setRemarkModalVisible(false);
+ remarkForm.resetFields();
+ }}
+ confirmLoading={loading}
+ okText="确定"
+ cancelText="取消"
+ >
+
+
+
+ {/* 移动分组Modal */}
+ {
+ setMoveModalVisible(false);
+ moveForm.resetFields();
+ }}
+ confirmLoading={loading}
+ okText="确定"
+ cancelText="取消"
+ >
+
+
+
+ );
+};
diff --git a/src/components/ContentSelection/api.ts b/src/components/ContentSelection/api.ts
new file mode 100644
index 0000000..a4d4bf3
--- /dev/null
+++ b/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/src/components/ContentSelection/data.ts b/src/components/ContentSelection/data.ts
new file mode 100644
index 0000000..1bf8fdb
--- /dev/null
+++ b/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/src/components/ContentSelection/index.module.scss b/src/components/ContentSelection/index.module.scss
new file mode 100644
index 0000000..f877360
--- /dev/null
+++ b/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/src/components/ContentSelection/index.tsx b/src/components/ContentSelection/index.tsx
new file mode 100644
index 0000000..eadb64b
--- /dev/null
+++ b/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 = ({
+ selectedOptions,
+ onSelect,
+ placeholder = "选择内容库",
+ className = "",
+ visible,
+ onVisibleChange,
+ selectedListMaxHeight = 300,
+ showInput = true,
+ showSelectedList = true,
+ readonly = false,
+ onConfirm,
+}) => {
+ // 弹窗控制
+ const [popupVisible, setPopupVisible] = useState(false);
+ 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} 个内容库`;
+ };
+
+ // 删除已选内容库
+ const handleRemoveLibrary = (id: number) => {
+ if (readonly) return;
+ onSelect(selectedOptions.filter(c => c.id !== id));
+ };
+
+ // 清除所有已选内容库
+ const handleClearAll = () => {
+ if (readonly) return;
+ onSelect([]);
+ };
+
+ return (
+ <>
+ {/* 输入框 */}
+ {showInput && (
+ setRealVisible(false)}
+ selectedOptions={selectedOptions}
+ onSelect={onSelect}
+ onConfirm={onConfirm}
+ />
+
+ );
+};
+
+export default ContentSelection;
diff --git a/src/components/ContentSelection/selectionPopup.tsx b/src/components/ContentSelection/selectionPopup.tsx
new file mode 100644
index 0000000..e5ee7a3
--- /dev/null
+++ b/src/components/ContentSelection/selectionPopup.tsx
@@ -0,0 +1,257 @@
+import React, { useState, useEffect } from "react";
+import { Checkbox, Popup } from "antd-mobile";
+import { getContentLibraryList } from "./api";
+import style from "./index.module.scss";
+import Layout from "@/components/Layout/Layout";
+import PopupHeader from "@/components/PopuLayout/header";
+import PopupFooter from "@/components/PopuLayout/footer";
+import { ContentItem } from "./data";
+
+interface SelectionPopupProps {
+ visible: boolean;
+ onClose: () => void;
+ selectedOptions: ContentItem[];
+ onSelect: (libraries: ContentItem[]) => void;
+ onConfirm?: (libraries: ContentItem[]) => void;
+}
+
+const PAGE_SIZE = 10;
+
+// 类型标签文本
+const getTypeText = (type?: number) => {
+ if (type === 1) return "文本";
+ if (type === 2) return "图片";
+ if (type === 3) return "视频";
+ return "未知";
+};
+
+// 时间格式化
+const formatDate = (dateStr?: string) => {
+ if (!dateStr) return "-";
+ const d = new Date(dateStr);
+ if (isNaN(d.getTime())) return "-";
+ return `${d.getFullYear()}/${(d.getMonth() + 1)
+ .toString()
+ .padStart(2, "0")}/${d.getDate().toString().padStart(2, "0")} ${d
+ .getHours()
+ .toString()
+ .padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d
+ .getSeconds()
+ .toString()
+ .padStart(2, "0")}`;
+};
+
+const SelectionPopup: React.FC = ({
+ visible,
+ onClose,
+ selectedOptions,
+ onSelect,
+ onConfirm,
+}) => {
+ // 内容库数据
+ const [libraries, setLibraries] = useState([]);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [loading, setLoading] = useState(true); // 默认设置为加载中状态
+ const [currentPage, setCurrentPage] = useState(1);
+ const [totalPages, setTotalPages] = useState(1);
+ const [totalLibraries, setTotalLibraries] = useState(0);
+ const [tempSelectedOptions, setTempSelectedOptions] = useState(
+ [],
+ );
+
+ // 获取内容库列表，支持keyword和分页
+ const fetchLibraries = async (page: number, keyword: string = "") => {
+ setLoading(true);
+ try {
+ const params: any = {
+ page,
+ limit: PAGE_SIZE,
+ };
+ if (keyword.trim()) {
+ params.keyword = keyword.trim();
+ }
+ const response = await getContentLibraryList(params);
+ if (response && response.list) {
+ setLibraries(response.list);
+ setTotalLibraries(response.total || 0);
+ setTotalPages(Math.ceil((response.total || 0) / PAGE_SIZE));
+ } else {
+ // 如果没有返回列表数据，设置为空数组
+ setLibraries([]);
+ setTotalLibraries(0);
+ setTotalPages(1);
+ }
+ } catch (error) {
+ console.error("获取内容库列表失败:", error);
+ // 请求失败时，设置为空数组
+ setLibraries([]);
+ setTotalLibraries(0);
+ setTotalPages(1);
+ } finally {
+ setTimeout(() => {
+ setLoading(false);
+ });
+ }
+ };
+
+ // 打开弹窗时获取第一页
+ useEffect(() => {
+ if (visible) {
+ setSearchQuery("");
+ setCurrentPage(1);
+ // 复制一份selectedOptions到临时变量
+ setTempSelectedOptions([...selectedOptions]);
+ // 设置loading状态，避免显示空内容
+ setLoading(true);
+ fetchLibraries(1, "");
+ } else {
+ // 关闭弹窗时重置加载状态，确保下次打开时显示加载中
+ setLoading(true);
+ }
+ }, [visible, selectedOptions]);
+
+ // 搜索处理函数
+ const handleSearch = (query: string) => {
+ if (!visible) return;
+ setCurrentPage(1);
+ fetchLibraries(1, query);
+ };
+
+ // 搜索输入变化时的处理
+ const handleSearchChange = (query: string) => {
+ setSearchQuery(query);
+ };
+
+ // 翻页处理函数
+ const handlePageChange = (page: number) => {
+ if (!visible || page === currentPage) return;
+ setCurrentPage(page);
+ fetchLibraries(page, searchQuery);
+ };
+
+ // 处理内容库选择
+ const handleLibraryToggle = (library: ContentItem) => {
+ const newSelected = tempSelectedOptions.some(c => c.id === library.id)
+ ? tempSelectedOptions.filter(c => c.id !== library.id)
+ : [...tempSelectedOptions, library];
+ setTempSelectedOptions(newSelected);
+ };
+
+ // 全选当前页
+ const handleSelectAllCurrentPage = (checked: boolean) => {
+ if (checked) {
+ // 全选：添加当前页面所有未选中的内容库
+ const currentPageLibraries = libraries.filter(
+ library => !tempSelectedOptions.some(l => l.id === library.id),
+ );
+ setTempSelectedOptions(prev => [...prev, ...currentPageLibraries]);
+ } else {
+ // 取消全选：移除当前页面的所有内容库
+ const currentPageLibraryIds = libraries.map(l => l.id);
+ setTempSelectedOptions(prev =>
+ prev.filter(l => !currentPageLibraryIds.includes(l.id)),
+ );
+ }
+ };
+
+ // 检查当前页是否全选
+ const isCurrentPageAllSelected =
+ libraries.length > 0 &&
+ libraries.every(library =>
+ tempSelectedOptions.some(l => l.id === library.id),
+ );
+
+ // 确认选择
+ const handleConfirm = () => {
+ // 用户点击确认时，才更新实际的selectedOptions
+ onSelect(tempSelectedOptions);
+ if (onConfirm) {
+ onConfirm(tempSelectedOptions);
+ }
+ onClose();
+ };
+ // 渲染内容库列表或空状态提示
+ const OptionsList = () => {
+ return libraries.length > 0 ? (
+
+ fetchLibraries(currentPage, searchQuery)}
+ />
+ }
+ footer={
+
+
+ );
+};
+
+export default SelectionPopup;
diff --git a/src/components/DeviceSelection/api.ts b/src/components/DeviceSelection/api.ts
new file mode 100644
index 0000000..db175dd
--- /dev/null
+++ b/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/src/components/DeviceSelection/data.ts b/src/components/DeviceSelection/data.ts
new file mode 100644
index 0000000..d002905
--- /dev/null
+++ b/src/components/DeviceSelection/data.ts
@@ -0,0 +1,29 @@
+// 设备选择项接口
+export interface DeviceSelectionItem {
+ id: number;
+ memo: string;
+ imei: string;
+ wechatId: string;
+ status: "online" | "offline";
+ wxid?: string;
+ nickname?: string;
+ usedInPlans?: number;
+ avatar?: string;
+ totalFriend?: 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; // 新增
+ deviceGroups?: any[]; // 传递设备组数据
+}
diff --git a/src/components/DeviceSelection/index.module.scss b/src/components/DeviceSelection/index.module.scss
new file mode 100644
index 0000000..8d004a4
--- /dev/null
+++ b/src/components/DeviceSelection/index.module.scss
@@ -0,0 +1,274 @@
+.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;
+ flex-direction: column;
+ padding: 12px;
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+ transition: all 0.2s ease;
+ border: 1px solid #f5f5f5;
+
+ &:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+ }
+}
+
+.headerRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.checkboxContainer {
+ flex-shrink: 0;
+}
+
+.imeiText {
+ font-size: 13px;
+ color: #666;
+ font-family: monospace;
+ flex: 1;
+}
+
+.mainContent {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ cursor: pointer;
+ padding: 8px;
+ border-radius: 8px;
+ transition: background-color 0.2s ease;
+
+ &:hover {
+ background-color: #f8f9fa;
+ }
+}
+.deviceCheckbox {
+ flex-shrink: 0;
+}
+.deviceInfo {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.deviceAvatar {
+ width: 64px;
+ height: 64px;
+ border-radius: 6px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
+ flex-shrink: 0;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .avatarText {
+ font-size: 18px;
+ color: #fff;
+ font-weight: 700;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ }
+}
+
+.deviceContent {
+ flex: 1;
+ min-width: 0;
+}
+
+.deviceInfoRow {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-bottom: 6px;
+}
+.deviceName {
+ font-size: 16px;
+ font-weight: 600;
+ color: #1a1a1a;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.statusOnline {
+ font-size: 11px;
+ padding: 1px 6px;
+ border-radius: 8px;
+ color: #52c41a;
+ background: #f6ffed;
+ border: 1px solid #b7eb8f;
+ font-weight: 500;
+}
+.statusOffline {
+ font-size: 11px;
+ padding: 1px 6px;
+ border-radius: 8px;
+ color: #ff4d4f;
+ background: #fff2f0;
+ border: 1px solid #ffccc7;
+ font-weight: 500;
+}
+.deviceInfoDetail {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.infoItem {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.infoLabel {
+ font-size: 13px;
+ color: #666;
+ min-width: 50px;
+}
+
+.infoValue {
+ font-size: 13px;
+ color: #333;
+
+ &.imei {
+ font-family: monospace;
+ }
+
+ &.friendCount {
+ font-weight: 500;
+ }
+}
+.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/src/components/DeviceSelection/index.tsx b/src/components/DeviceSelection/index.tsx
new file mode 100644
index 0000000..ba6952c
--- /dev/null
+++ b/src/components/DeviceSelection/index.tsx
@@ -0,0 +1,187 @@
+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 = ({
+ selectedOptions,
+ onSelect,
+ placeholder = "选择设备",
+ className = "",
+ mode = "input",
+ open,
+ onOpenChange,
+ selectedListMaxHeight = 300, // 默认300
+ showInput = true,
+ showSelectedList = true,
+ readonly = false,
+}) => {
+ // 弹窗控制
+ const [popupVisible, setPopupVisible] = useState(false);
+ const isDialog = mode === "dialog";
+ const realVisible = isDialog ? !!open : popupVisible;
+ const setRealVisible = (v: boolean) => {
+ if (isDialog && onOpenChange) onOpenChange(v);
+ if (!isDialog) setPopupVisible(v);
+ };
+
+ // 打开弹窗
+ const openPopup = () => {
+ if (readonly) return;
+ setRealVisible(true);
+ };
+
+ // 获取显示文本
+ const getDisplayText = () => {
+ if (selectedOptions.length === 0) return "";
+ return `已选择 ${selectedOptions.length} 个设备`;
+ };
+
+ // 删除已选设备
+ const handleRemoveDevice = (id: number) => {
+ if (readonly) return;
+ onSelect(selectedOptions.filter(v => v.id !== id));
+ };
+
+ // 清除所有已选设备
+ const handleClearAll = () => {
+ if (readonly) return;
+ onSelect([]);
+ };
+
+ return (
+ <>
+ {/* mode=input 显示输入框，mode=dialog不显示 */}
+ {mode === "input" && showInput && (
+ setRealVisible(false)}
+ selectedOptions={selectedOptions}
+ onSelect={onSelect}
+ />
+
+ );
+};
+
+export default DeviceSelection;
diff --git a/src/components/DeviceSelection/selectionPopup.tsx b/src/components/DeviceSelection/selectionPopup.tsx
new file mode 100644
index 0000000..7a839f7
--- /dev/null
+++ b/src/components/DeviceSelection/selectionPopup.tsx
@@ -0,0 +1,274 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Checkbox, Popup } from "antd-mobile";
+import { getDeviceList } from "./api";
+import style from "./index.module.scss";
+import Layout from "@/components/Layout/Layout";
+import PopupHeader from "@/components/PopuLayout/header";
+import PopupFooter from "@/components/PopuLayout/footer";
+import { DeviceSelectionItem } from "./data";
+
+interface SelectionPopupProps {
+ visible: boolean;
+ onClose: () => void;
+ selectedOptions: DeviceSelectionItem[];
+ onSelect: (devices: DeviceSelectionItem[]) => void;
+}
+
+const PAGE_SIZE = 20;
+
+const SelectionPopup: React.FC = ({
+ visible,
+ onClose,
+ selectedOptions,
+ onSelect,
+}) => {
+ // 设备数据
+ const [devices, setDevices] = useState([]);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [statusFilter, setStatusFilter] = useState("all");
+ const [loading, setLoading] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [total, setTotal] = useState(0);
+ const [tempSelectedOptions, setTempSelectedOptions] = useState<
+ DeviceSelectionItem[]
+ >([]);
+
+ // 获取设备列表，支持keyword和分页
+ const fetchDevices = useCallback(
+ async (keyword: string = "", page: number = 1) => {
+ setLoading(true);
+ try {
+ const res = await getDeviceList({
+ page,
+ limit: PAGE_SIZE,
+ keyword: keyword.trim() || undefined,
+ });
+ if (res && Array.isArray(res.list)) {
+ setDevices(
+ res.list.map((d: any) => ({
+ id: d.id?.toString() || "",
+ memo: d.memo || d.imei || "",
+ imei: d.imei || "",
+ wechatId: d.wechatId || "",
+ status: d.alive === 1 ? "online" : "offline",
+ wxid: d.wechatId || "",
+ nickname: d.nickname || "",
+ usedInPlans: d.usedInPlans || 0,
+ avatar: d.avatar || "",
+ totalFriend: d.totalFriend || 0,
+ })),
+ );
+ setTotal(res.total || 0);
+ }
+ } catch (error) {
+ console.error("获取设备列表失败:", error);
+ } finally {
+ setLoading(false);
+ }
+ },
+ [],
+ );
+
+ // 打开弹窗时获取第一页
+ useEffect(() => {
+ if (visible) {
+ setSearchQuery("");
+ setCurrentPage(1);
+ // 复制一份selectedOptions到临时变量
+ setTempSelectedOptions([...selectedOptions]);
+ fetchDevices("", 1);
+ }
+ }, [visible, fetchDevices, selectedOptions]);
+
+ // 搜索防抖
+ useEffect(() => {
+ if (!visible) return;
+ const timer = setTimeout(() => {
+ setCurrentPage(1);
+ fetchDevices(searchQuery, 1);
+ }, 500);
+ return () => clearTimeout(timer);
+ }, [searchQuery, visible, fetchDevices]);
+
+ // 翻页时重新请求
+ useEffect(() => {
+ if (!visible) return;
+ fetchDevices(searchQuery, currentPage);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentPage]);
+
+ // 过滤设备（只保留状态过滤）
+ const filteredDevices = devices.filter(device => {
+ const matchesStatus =
+ statusFilter === "all" ||
+ (statusFilter === "online" && device.status === "online") ||
+ (statusFilter === "offline" && device.status === "offline");
+ return matchesStatus;
+ });
+
+ const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+ // 处理设备选择
+ const handleDeviceToggle = (device: DeviceSelectionItem) => {
+ if (tempSelectedOptions.some(v => v.id === device.id)) {
+ setTempSelectedOptions(
+ tempSelectedOptions.filter(v => v.id !== device.id),
+ );
+ } else {
+ const newSelectedOptions = [...tempSelectedOptions, device];
+ setTempSelectedOptions(newSelectedOptions);
+ }
+ };
+
+ // 全选当前页
+ const handleSelectAllCurrentPage = (checked: boolean) => {
+ if (checked) {
+ // 全选：添加当前页面所有未选中的设备
+ const currentPageDevices = filteredDevices.filter(
+ device => !tempSelectedOptions.some(d => d.id === device.id),
+ );
+ setTempSelectedOptions(prev => [...prev, ...currentPageDevices]);
+ } else {
+ // 取消全选：移除当前页面的所有设备
+ const currentPageDeviceIds = filteredDevices.map(d => d.id);
+ setTempSelectedOptions(prev =>
+ prev.filter(d => !currentPageDeviceIds.includes(d.id)),
+ );
+ }
+ };
+
+ // 检查当前页是否全选
+ const isCurrentPageAllSelected =
+ filteredDevices.length > 0 &&
+ filteredDevices.every(device =>
+ tempSelectedOptions.some(d => d.id === device.id),
+ );
+
+ return (
+
+ fetchDevices(searchQuery, currentPage)}
+ showTabs={true}
+ tabsConfig={{
+ activeKey: statusFilter,
+ onChange: setStatusFilter,
+ tabs: [
+ { title: "全部", key: "all" },
+ { title: "在线", key: "online" },
+ { title: "离线", key: "offline" },
+ ],
+ }}
+ />
+ }
+ footer={
+ {
+ // 用户点击确认时，才更新实际的selectedOptions
+ onSelect(tempSelectedOptions);
+ onClose();
+ }}
+ isAllSelected={isCurrentPageAllSelected}
+ onSelectAll={handleSelectAllCurrentPage}
+ />
+ }
+ >
+
+
+ );
+};
+
+export default SelectionPopup;
diff --git a/src/components/EmojiSeclection/EmojiPicker.css b/src/components/EmojiSeclection/EmojiPicker.css
new file mode 100644
index 0000000..cd70ffe
--- /dev/null
+++ b/src/components/EmojiSeclection/EmojiPicker.css
@@ -0,0 +1,167 @@
+/* 表情选择器容器 */
+.emoji-picker-container {
+ position: relative;
+ display: inline-block;
+}
+
+/* 默认触发器按钮 */
+.emoji-picker-trigger {
+ background: none;
+ font-size: 16px;
+ padding: 5px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border-radius: 5px;
+}
+
+.emoji-picker-trigger:hover {
+ background-color: #e9e9e9;
+ border-color: #d0d0d0;
+}
+
+/* 表情选择器面板 */
+.emoji-picker-panel {
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ z-index: 1000;
+ background: white;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ width: 320px;
+ max-height: 400px;
+ overflow: hidden;
+ margin-bottom: 4px;
+}
+
+/* 分类标签栏 */
+.emoji-categories {
+ display: flex;
+ background-color: #f8f9fa;
+ border-bottom: 1px solid #e0e0e0;
+ padding: 8px;
+ gap: 4px;
+}
+
+.category-btn {
+ background: none;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 6px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+ flex: 1;
+ text-align: center;
+}
+
+.category-btn:hover {
+ background-color: #e9ecef;
+}
+
+.category-btn.active {
+ background-color: #007bff;
+ color: white;
+}
+
+/* 表情网格 */
+.emoji-grid {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 4px;
+ padding: 12px;
+ max-height: 280px;
+ overflow-y: auto;
+}
+
+/* 表情项 */
+.emoji-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.emoji-item:hover {
+ background-color: #f0f0f0;
+}
+
+.emoji-image {
+ width: 24px;
+ height: 24px;
+ object-fit: contain;
+}
+
+/* 空状态 */
+.emoji-empty {
+ text-align: center;
+ padding: 40px 20px;
+ color: #999;
+ font-size: 14px;
+}
+
+/* 滚动条样式 */
+.emoji-grid::-webkit-scrollbar {
+ width: 6px;
+}
+
+.emoji-grid::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 3px;
+}
+
+.emoji-grid::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 3px;
+}
+
+.emoji-grid::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+ .emoji-picker-panel {
+ width: 280px;
+ }
+
+ .emoji-grid {
+ grid-template-columns: repeat(7, 1fr);
+ }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+ .emoji-picker-panel {
+ background: #2d3748;
+ border-color: #4a5568;
+ color: white;
+ }
+
+ .emoji-categories {
+ background-color: #1a202c;
+ border-bottom-color: #4a5568;
+ }
+
+ .category-btn:hover {
+ background-color: #4a5568;
+ }
+
+ .emoji-item:hover {
+ background-color: #4a5568;
+ }
+
+ .emoji-picker-trigger {
+ border-color: #4a5568;
+ color: white;
+ }
+
+ .emoji-picker-trigger:hover {
+ background-color: #4a5568;
+ }
+}
diff --git a/src/components/EmojiSeclection/EmojiPicker.tsx b/src/components/EmojiSeclection/EmojiPicker.tsx
new file mode 100644
index 0000000..6b5f493
--- /dev/null
+++ b/src/components/EmojiSeclection/EmojiPicker.tsx
@@ -0,0 +1,115 @@
+import React, { useState, useRef, useEffect } from "react";
+import { EmojiCategory, EmojiInfo, getEmojisByCategory } from "./wechatEmoji";
+import "./EmojiPicker.css";
+
+interface EmojiPickerProps {
+ onEmojiSelect: (emoji: EmojiInfo) => void;
+ trigger?: React.ReactNode;
+ className?: string;
+}
+
+const EmojiPicker: React.FC = ({
+ onEmojiSelect,
+ trigger,
+ className = "",
+}) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [activeCategory, setActiveCategory] = useState(
+ EmojiCategory.FACE,
+ );
+ const pickerRef = useRef(null);
+
+ // 分类配置
+ const categories = [
+ { key: EmojiCategory.FACE, label: "😊", title: "人脸" },
+ { key: EmojiCategory.GESTURE, label: "👋", title: "手势" },
+ { key: EmojiCategory.ANIMAL, label: "🐷", title: "动物" },
+ { key: EmojiCategory.BLESSING, label: "🎉", title: "祝福" },
+ { key: EmojiCategory.OTHER, label: "❤️", title: "其他" },
+ ];
+
+ // 获取当前分类的表情
+ const currentEmojis = getEmojisByCategory(activeCategory);
+
+ // 点击外部关闭
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ pickerRef.current &&
+ !pickerRef.current.contains(event.target as Node)
+ ) {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener("mousedown", handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [isOpen]);
+
+ // 处理表情选择
+ const handleEmojiClick = (emoji: EmojiInfo) => {
+ onEmojiSelect(emoji);
+ setIsOpen(false);
+ };
+
+ // 默认触发器
+ const defaultTrigger = 😊;
+
+ return (
+ = {
+ // 人脸表情
+ 微笑: {
+ name: "微笑",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/smile.png",
+ },
+ 撇嘴: {
+ name: "撇嘴",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/pout.png",
+ },
+ 色: {
+ name: "色",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/lustful.png",
+ },
+ 发呆: {
+ name: "发呆",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/daze.png",
+ },
+ 得意: {
+ name: "得意",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/smug.png",
+ },
+ 流泪: {
+ name: "流泪",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/crying.png",
+ },
+ 害羞: {
+ name: "害羞",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/shy.png",
+ },
+ 闭嘴: {
+ name: "闭嘴",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/shut-up.png",
+ },
+ 睡: {
+ name: "睡",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sleep.png",
+ },
+ 大哭: {
+ name: "大哭",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/wail.png",
+ },
+ 尴尬: {
+ name: "尴尬",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/awkward.png",
+ },
+ 发怒: {
+ name: "发怒",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/angry.png",
+ },
+ 调皮: {
+ name: "调皮",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/naughty.png",
+ },
+ 呲牙: {
+ name: "呲牙",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/grin.png",
+ },
+ 惊讶: {
+ name: "惊讶",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/surprised.png",
+ },
+ 难过: {
+ name: "难过",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sad.png",
+ },
+ 囧: {
+ name: "囧",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/embarrassed.png",
+ },
+ 抓狂: {
+ name: "抓狂",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/crazy.png",
+ },
+ 吐: {
+ name: "吐",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/vomit.png",
+ },
+ 偷笑: {
+ name: "偷笑",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/snicker.png",
+ },
+ 愉快: {
+ name: "愉快",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/happy.png",
+ },
+ 白眼: {
+ name: "白眼",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/roll-eyes.png",
+ },
+ 傲慢: {
+ name: "傲慢",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/arrogant.png",
+ },
+ 困: {
+ name: "困",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sleepy.png",
+ },
+ 惊恐: {
+ name: "惊恐",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/panic.png",
+ },
+ 憨笑: {
+ name: "憨笑",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/silly-smile.png",
+ },
+ 悠闲: {
+ name: "悠闲",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/leisurely.png",
+ },
+ 咒骂: {
+ name: "咒骂",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/curse.png",
+ },
+ 疑问: {
+ name: "疑问",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/question.png",
+ },
+ 嘘: {
+ name: "嘘",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/shush.png",
+ },
+ 晕: {
+ name: "晕",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/dizzy.png",
+ },
+ 衰: {
+ name: "衰",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/unlucky.png",
+ },
+ 骷髅: {
+ name: "骷髅",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/skull.png",
+ },
+ 敲打: {
+ name: "敲打",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/knock.png",
+ },
+ 再见: {
+ name: "再见",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/goodbye.png",
+ },
+ 擦汗: {
+ name: "擦汗",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/wipe-sweat.png",
+ },
+ 抠鼻: {
+ name: "抠鼻",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/pick-nose.png",
+ },
+ 鼓掌: {
+ name: "鼓掌",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/clap.png",
+ },
+ 坏笑: {
+ name: "坏笑",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/evil-smile.png",
+ },
+ 右哼哼: {
+ name: "右哼哼",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/right-hum.png",
+ },
+ 鄙视: {
+ name: "鄙视",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/despise.png",
+ },
+ 委屈: {
+ name: "委屈",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/wronged.png",
+ },
+ 快哭了: {
+ name: "快哭了",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/about-to-cry.png",
+ },
+ 阴险: {
+ name: "阴险",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sinister.png",
+ },
+ 亲亲: {
+ name: "亲亲",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/kiss.png",
+ },
+ 可怜: {
+ name: "可怜",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/pitiful.png",
+ },
+ 笑脸: {
+ name: "笑脸",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/smiley.png",
+ },
+ 生病: {
+ name: "生病",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sick.png",
+ },
+ 脸红: {
+ name: "脸红",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/blush.png",
+ },
+ 破涕为笑: {
+ name: "破涕为笑",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/tears-to-smile.png",
+ },
+ 恐惧: {
+ name: "恐惧",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/fear.png",
+ },
+ 失望: {
+ name: "失望",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/disappointed.png",
+ },
+ 无语: {
+ name: "无语",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/speechless.png",
+ },
+ 嘿哈: {
+ name: "嘿哈",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/hey-ha.png",
+ },
+ 捂脸: {
+ name: "捂脸",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/facepalm.png",
+ },
+ 机智: {
+ name: "机智",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/smart.png",
+ },
+ 皱眉: {
+ name: "皱眉",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/frown.png",
+ },
+ 耶: {
+ name: "耶",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/yeah.png",
+ },
+ 吃瓜: {
+ name: "吃瓜",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/eat-melon.png",
+ },
+ 加油: {
+ name: "加油",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/cheer-up.png",
+ },
+
+ 汗: {
+ name: "汗",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sweat.png",
+ },
+ 天啊: {
+ name: "天啊",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/oh-my.png",
+ },
+ Emm: {
+ name: "Emm",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/Emm.png",
+ },
+ 社会社会: {
+ name: "社会社会",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/social.png",
+ },
+ 旺柴: {
+ name: "旺柴",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/doge.png",
+ },
+ 好的: {
+ name: "好的",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/good.png",
+ },
+ 打脸: {
+ name: "打脸",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/slap-face.png",
+ },
+ 哇: {
+ name: "哇",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/wow.png",
+ },
+ 翻白眼: {
+ name: "翻白眼",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/eye-roll.png",
+ },
+ "666": {
+ name: "666",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/666.png",
+ },
+ 让我看看: {
+ name: "让我看看",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/let-me-see.png",
+ },
+ 叹气: {
+ name: "叹气",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sigh.png",
+ },
+ 苦涩: {
+ name: "苦涩",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/bitter.png",
+ },
+ 裂开: {
+ name: "裂开",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/crack.png",
+ },
+ 奸笑: {
+ name: "奸笑",
+ category: EmojiCategory.FACE,
+ path: "/assets/face/sly-smile.png",
+ },
+
+ // 手势表情
+ 握手: {
+ name: "握手",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/handshake.png",
+ },
+ 胜利: {
+ name: "胜利",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/victory.png",
+ },
+ 抱拳: {
+ name: "抱拳",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/fist-salute.png",
+ },
+ 勾引: {
+ name: "勾引",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/beckon.png",
+ },
+ 拳头: {
+ name: "拳头",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/fist.png",
+ },
+ OK: {
+ name: "OK",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/OK.png",
+ },
+ 合十: {
+ name: "合十",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/pray.png",
+ },
+ 强: {
+ name: "强",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/strong.png",
+ },
+ 拥抱: {
+ name: "拥抱",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/hug.png",
+ },
+ 弱: {
+ name: "弱",
+ category: EmojiCategory.GESTURE,
+ path: "/assets/gesture/weak.png",
+ },
+
+ // 动物表情
+ 猪头: {
+ name: "猪头",
+ category: EmojiCategory.ANIMAL,
+ path: "/assets/animal/pig-head.png",
+ },
+ 跳跳: {
+ name: "跳跳",
+ category: EmojiCategory.ANIMAL,
+ path: "/assets/animal/jump.png",
+ },
+ 发抖: {
+ name: "发抖",
+ category: EmojiCategory.ANIMAL,
+ path: "/assets/animal/shiver.png",
+ },
+ 转圈: {
+ name: "转圈",
+ category: EmojiCategory.ANIMAL,
+ path: "/assets/animal/spin.png",
+ },
+
+ // 祝福表情
+ 庆祝: {
+ name: "庆祝",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/celebrate.png",
+ },
+ 礼物: {
+ name: "礼物",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/gift.png",
+ },
+ 红包: {
+ name: "红包",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/red-envelope.png",
+ },
+ 發: {
+ name: "發",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/fortune.png",
+ },
+ 福: {
+ name: "福",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/blessing.png",
+ },
+ 烟花: {
+ name: "烟花",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/fireworks.png",
+ },
+ 爆竹: {
+ name: "爆竹",
+ category: EmojiCategory.BLESSING,
+ path: "/assets/blessing/firecrackers.png",
+ },
+
+ // 其他表情
+ 嘴唇: {
+ name: "嘴唇",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/lips.png",
+ },
+ 爱心: {
+ name: "爱心",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/heart.png",
+ },
+ 心碎: {
+ name: "心碎",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/broken-heart.png",
+ },
+ 啤酒: {
+ name: "啤酒",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/beer.png",
+ },
+ 咖啡: {
+ name: "咖啡",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/coffee.png",
+ },
+ 蛋糕: {
+ name: "蛋糕",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/cake.png",
+ },
+ 凋谢: {
+ name: "凋谢",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/wither.png",
+ },
+ 菜刀: {
+ name: "菜刀",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/knife.png",
+ },
+ 炸弹: {
+ name: "炸弹",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/bomb.png",
+ },
+ 便便: {
+ name: "便便",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/poop.png",
+ },
+ 太阳: {
+ name: "太阳",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/sun.png",
+ },
+ 月亮: {
+ name: "月亮",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/moon.png",
+ },
+ 玫瑰: {
+ name: "玫瑰",
+ category: EmojiCategory.OTHER,
+ path: "/assets/other/rose.png",
+ },
+};
+
+/**
+ * 获取所有表情数据的辅助函数
+ */
+function getAllEmojiData(): EmojiInfo[] {
+ const result: EmojiInfo[] = [];
+ for (const key in EMOJI_DATA) {
+ if (Object.prototype.hasOwnProperty.call(EMOJI_DATA, key)) {
+ result.push(EMOJI_DATA[key as EmojiName]);
+ }
+ }
+ return result;
+}
+
+/**
+ * 按类别分组的表情数据
+ */
+export const EMOJI_CATEGORIES = {
+ [EmojiCategory.FACE]: getAllEmojiData().filter(
+ emoji => emoji.category === EmojiCategory.FACE,
+ ),
+ [EmojiCategory.GESTURE]: getAllEmojiData().filter(
+ emoji => emoji.category === EmojiCategory.GESTURE,
+ ),
+ [EmojiCategory.ANIMAL]: getAllEmojiData().filter(
+ emoji => emoji.category === EmojiCategory.ANIMAL,
+ ),
+ [EmojiCategory.BLESSING]: getAllEmojiData().filter(
+ emoji => emoji.category === EmojiCategory.BLESSING,
+ ),
+ [EmojiCategory.OTHER]: getAllEmojiData().filter(
+ emoji => emoji.category === EmojiCategory.OTHER,
+ ),
+} as const;
+
+/**
+ * 获取表情图片路径
+ * @param name 表情名称
+ * @returns 图片路径，如果表情不存在则返回 null
+ *
+ * @example
+ * ```typescript
+ * const path = getEmojiPath('微笑'); // 'assets/face/微笑.png'
+ * const invalidPath = getEmojiPath('不存在'); // null
+ * ```
+ */
+export function getEmojiPath(name: EmojiName): string | null {
+ const emoji = EMOJI_DATA[name];
+ return emoji ? emoji.path : null;
+}
+
+/**
+ * 获取表情信息
+ * @param name 表情名称
+ * @returns 表情信息对象，如果表情不存在则返回 null
+ *
+ * @example
+ * ```typescript
+ * const emoji = getEmojiInfo('微笑');
+ * // { name: '微笑', category: EmojiCategory.FACE, path: 'assets/face/微笑.png' }
+ * ```
+ */
+export function getEmojiInfo(name: EmojiName): EmojiInfo | null {
+ return EMOJI_DATA[name] || null;
+}
+
+/**
+ * 根据类别获取表情列表
+ * @param category 表情类别
+ * @returns 该类别下的所有表情信息
+ *
+ * @example
+ * ```typescript
+ * const faceEmojis = getEmojisByCategory(EmojiCategory.FACE);
+ * ```
+ */
+export function getEmojisByCategory(category: EmojiCategory): EmojiInfo[] {
+ return EMOJI_CATEGORIES[category];
+}
+
+/**
+ * 获取所有表情信息
+ * @returns 所有表情的信息数组
+ *
+ * @example
+ * ```typescript
+ * const allEmojis = getAllEmojis();
+ * console.log(`总共有 ${allEmojis.length} 个表情`);
+ * ```
+ */
+export function getAllEmojis(): EmojiInfo[] {
+ return getAllEmojiData();
+}
+
+/**
+ * 搜索表情
+ * @param keyword 搜索关键词
+ * @returns 匹配的表情信息数组
+ *
+ * @example
+ * ```typescript
+ * const results = searchEmojis('笑');
+ * // 返回包含 '微笑', '偷笑', '坏笑' 等的表情
+ * ```
+ */
+export function searchEmojis(keyword: string): EmojiInfo[] {
+ return getAllEmojiData().filter(emoji => emoji.name.indexOf(keyword) !== -1);
+}
+
+/**
+ * 检查表情是否存在
+ * @param name 表情名称
+ * @returns 是否存在该表情
+ *
+ * @example
+ * ```typescript
+ * const exists = hasEmoji('微笑'); // true
+ * const notExists = hasEmoji('不存在的表情'); // false
+ * ```
+ */
+export function hasEmoji(name: EmojiName): boolean {
+ return name in EMOJI_DATA;
+}
+
+/**
+ * 获取表情名称列表
+ * @param category 可选的类别筛选
+ * @returns 表情名称数组
+ *
+ * @example
+ * ```typescript
+ * const allNames = getEmojiNames();
+ * const faceNames = getEmojiNames(EmojiCategory.FACE);
+ * ```
+ */
+export function getEmojiNames(category?: EmojiCategory): string[] {
+ if (category) {
+ return getEmojisByCategory(category).map(emoji => emoji.name);
+ }
+ const names: string[] = [];
+ for (const key in EMOJI_DATA) {
+ if (Object.prototype.hasOwnProperty.call(EMOJI_DATA, key)) {
+ names.push(key);
+ }
+ }
+ return names;
+}
+
+/**
+ * 随机获取表情
+ * @param category 可选的类别筛选
+ * @returns 随机表情信息
+ *
+ * @example
+ * ```typescript
+ * const randomEmoji = getRandomEmoji();
+ * const randomFaceEmoji = getRandomEmoji(EmojiCategory.FACE);
+ * ```
+ */
+export function getRandomEmoji(category?: EmojiCategory): EmojiInfo {
+ const emojis = category ? getEmojisByCategory(category) : getAllEmojis();
+ const randomIndex = Math.floor(Math.random() * emojis.length);
+ return emojis[randomIndex];
+}
+
+/**
+ * 默认导出对象，包含所有主要功能
+ */
+const WeChatEmojis = {
+ // 枚举和类型
+ EmojiCategory,
+
+ // 数据
+ EMOJI_CATEGORIES,
+
+ // 工具函数
+ getEmojiPath,
+ getEmojiInfo,
+ getEmojisByCategory,
+ getAllEmojis,
+ searchEmojis,
+ hasEmoji,
+ getEmojiNames,
+ getRandomEmoji,
+} as const;
+
+export default WeChatEmojis;
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
new file mode 100644
index 0000000..1ce6be3
--- /dev/null
+++ b/src/components/ErrorBoundary/index.tsx
@@ -0,0 +1,173 @@
+/**
+ * 错误边界组件
+ * 用于捕获React组件树中的JavaScript错误，记录错误信息，并显示降级UI
+ */
+
+import React, { Component, ErrorInfo, ReactNode } from "react";
+import { Button, Result } from "antd";
+import { captureError } from "@/utils/sentry";
+import { performanceMonitor } from "@/utils/performance";
+
+interface Props {
+ children: ReactNode;
+ fallback?: ReactNode;
+ onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | null;
+ errorInfo: ErrorInfo | null;
+}
+
+/**
+ * 错误边界组件
+ * 使用类组件实现，因为React错误边界必须是类组件
+ */
+export class ErrorBoundary extends Component {
+ constructor(props: Props) {
+ super(props);
+ this.state = {
+ hasError: false,
+ error: null,
+ errorInfo: null,
+ };
+ }
+
+ static getDerivedStateFromError(error: Error): State {
+ // 更新state，使下一次渲染能够显示降级UI
+ return {
+ hasError: true,
+ error,
+ errorInfo: null,
+ };
+ }
+
+ componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ // 记录错误信息
+ console.error("ErrorBoundary捕获到错误:", error, errorInfo);
+
+ // 性能监控：记录错误（使用measure方法）
+ performanceMonitor.measure(
+ "ErrorBoundary.error",
+ () => {
+ // 错误已记录，这里只是用于性能监控
+ },
+ {
+ error: error.message,
+ componentStack: errorInfo.componentStack,
+ errorBoundary: true,
+ },
+ );
+
+ // 更新state
+ this.setState({
+ error,
+ errorInfo,
+ });
+
+ // 调用自定义错误处理函数
+ if (this.props.onError) {
+ try {
+ this.props.onError(error, errorInfo);
+ } catch (onErrorError) {
+ console.error("onError回调函数执行失败:", onErrorError);
+ }
+ }
+
+ // 发送错误到Sentry（如果已配置）
+ try {
+ captureError(error, {
+ tags: {
+ errorBoundary: "true",
+ component: errorInfo.componentStack?.split("\n")[0] || "unknown",
+ },
+ extra: {
+ componentStack: errorInfo.componentStack,
+ errorInfo: errorInfo.toString(),
+ },
+ });
+ } catch (sentryError) {
+ console.warn("发送错误到Sentry失败:", sentryError);
+ }
+ }
+
+ handleReset = () => {
+ this.setState({
+ hasError: false,
+ error: null,
+ errorInfo: null,
+ });
+ };
+
+ render() {
+ if (this.state.hasError) {
+ // 如果提供了自定义fallback，使用它
+ if (this.props.fallback) {
+ return this.props.fallback;
+ }
+
+ // 默认错误UI
+ return (
+
+
+ }
+ extra={[
+ ,
+ ,
+ ]}
+ />
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+/**
+ * 带错误边界的HOC
+ */
+export function withErrorBoundary
+ }
+ 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/src/components/EmojiSeclection/index.ts b/src/components/EmojiSeclection/index.ts
new file mode 100644
index 0000000..d4aa499
--- /dev/null
+++ b/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/src/components/EmojiSeclection/wechatEmoji.ts b/src/components/EmojiSeclection/wechatEmoji.ts
new file mode 100644
index 0000000..eecd9e8
--- /dev/null
+++ b/src/components/EmojiSeclection/wechatEmoji.ts
@@ -0,0 +1,902 @@
+/**
+ * 微信表情包 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}
+ >
+ 
+
+ ))}
+ 暂无表情
+ )}
+ 抱歉，应用遇到了一个错误。请尝试刷新页面或联系技术支持。
+ {import.meta.env.DEV && this.state.error && ( +
+
+ )}
+ + 错误详情（开发环境） +
+
+ {this.state.error.toString()}
+ {this.state.errorInfo?.componentStack}
+
+ ( + Component: React.ComponentType
,
+ fallback?: ReactNode,
+) {
+ return function WithErrorBoundaryComponent(props: P) {
+ return (
+
+ }
+ 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/src/components/Layout/LayoutFiexd.tsx b/src/components/Layout/LayoutFiexd.tsx
new file mode 100644
index 0000000..9a5cefd
--- /dev/null
+++ b/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/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
new file mode 100644
index 0000000..c43e890
--- /dev/null
+++ b/src/components/Layout/layout.module.scss
@@ -0,0 +1,27 @@
+.container {
+ display: flex;
+ height: 100vh;
+ flex-direction: column;
+}
+
+.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/src/components/LineChart.tsx b/src/components/LineChart.tsx
new file mode 100644
index 0000000..bb93e51
--- /dev/null
+++ b/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}
+
+ 暂无选择
+
+ )}
+ - (
+
+ }
+ allowClear={!readonly && selectedOptions.length > 0}
+ onClear={handleClear}
+ 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.title}
+ ID: {group.id}
+
+ {loading ? (
+
+
+
+ ) : groups.length > 0 ? (
+ 加载中...
+
+ {groups.map(group => (
+
+ ) : (
+
+ {selectionMode === "single" ? (
+ g.id === group.id)}
+ onChange={() => !readonly && handleGroupToggle(group)}
+ disabled={readonly}
+ style={{ marginRight: 12 }}
+ />
+ ) : (
+ g.id === group.id)}
+ onChange={() => !readonly && handleGroupToggle(group)}
+ disabled={readonly}
+ style={{ marginRight: 12 }}
+ />
+ )}
+
+ ))}
+
+
+
+ {group.cover ? (
+ 
+ ) : (
+ group.title.charAt(0)
+ )}
+
+
+
+ {group.title}
+
+ 创建人: {group.userName}
+
+
+
+ )}
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的素材`
+ : "没有找到素材"}
+
+
+
+ {
+ if (backFn) {
+ backFn();
+ } else {
+ navigate(-1);
+ }
+ }}
+ />
+
+ )
+ }
+ right={right}
+ >
+
+ {title}
+
+
+
+ );
+};
+
+export default NavCommon;
diff --git a/src/components/PlaceholderPage.tsx b/src/components/PlaceholderPage.tsx
new file mode 100644
index 0000000..69a8ddd
--- /dev/null
+++ b/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}"的流量池包`
+ : "没有找到流量池包"}
+
+
+
+
+ {showSelectAll && (
+ onSelectAll?.(e.target.checked)}
+ className={style.selectAllCheckbox}
+ >
+ 全选当前页
+
+ )}
+
+
+
+
+ {currentPage} / {totalPages}
+
+
+
+
+
+
+ );
+};
+
+export default PopupFooter;
diff --git a/src/components/PopuLayout/header.module.scss b/src/components/PopuLayout/header.module.scss
new file mode 100644
index 0000000..f54cbbe
--- /dev/null
+++ b/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/src/components/PopuLayout/header.tsx b/src/components/PopuLayout/header.tsx
new file mode 100644
index 0000000..160bf43
--- /dev/null
+++ b/src/components/PopuLayout/header.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button, Space } 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)}
+ onPressEnter={() => onSearch && onSearch(searchQuery)}
+ prefix={
+
+
+ {showRefresh && onRefresh && (
+
+ )}
+
+
+ );
+};
+
+export default PowerNavigation;
diff --git a/src/components/PowerNavtion/types.ts b/src/components/PowerNavtion/types.ts
new file mode 100644
index 0000000..b4431da
--- /dev/null
+++ b/src/components/PowerNavtion/types.ts
@@ -0,0 +1,30 @@
+import React from "react";
+
+/**
+ * PowerNavigation 组件类型定义文件
+ *
+ * 简化版本，按照图片设计
+ */
+
+/**
+ * PowerNavigation 组件属性类型
+ */
+export interface PowerNavigationProps {
+ /** 页面标题 */
+ title?: string;
+ /** 页面副标题 */
+ subtitle?: string;
+ /** 是否显示返回按钮 */
+ showBackButton?: boolean;
+ /** 返回按钮文本 */
+ backButtonText?: string;
+ /** 返回按钮点击事件 */
+ onBackClick?: () => void;
+ /** 自定义CSS类名 */
+ className?: string;
+ /** 自定义样式对象 */
+ style?: React.CSSProperties;
+}
+
+// 导出所有类型
+export type { PowerNavigationProps as default };
diff --git a/src/components/StepIndicator/index.tsx b/src/components/StepIndicator/index.tsx
new file mode 100644
index 0000000..655bbaf
--- /dev/null
+++ b/src/components/StepIndicator/index.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Steps } from "antd-mobile";
+
+interface StepIndicatorProps {
+ currentStep: number;
+ steps: { id: number; title: string; subtitle: string }[];
+}
+
+const StepIndicator: React.FC
+ {/* 返回按钮 */}
+ {showBackButton && (
+ }
+ onClick={handleBackClick}
+ className={styles.backButton}
+ >
+ {backButtonText}
+
+ )}
+
+ {/* 标题区域 */}
+
+
+ {title}
+ {subtitle && {subtitle}}
+
+ {rightContent}
+
+
+ {steps.map((step, idx) => (
+
+ {step.id}
+
+ }
+ />
+ ))}
+
+
+ );
+};
+
+export default StepIndicator;
diff --git a/src/components/TwoColumnSelection/TwoColumnSelection.module.scss b/src/components/TwoColumnSelection/TwoColumnSelection.module.scss
new file mode 100644
index 0000000..5f53a34
--- /dev/null
+++ b/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/src/components/TwoColumnSelection/TwoColumnSelection.tsx b/src/components/TwoColumnSelection/TwoColumnSelection.tsx
new file mode 100644
index 0000000..e1475cd
--- /dev/null
+++ b/src/components/TwoColumnSelection/TwoColumnSelection.tsx
@@ -0,0 +1,296 @@
+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[];
+ onLoadMore?: () => void; // 加载更多回调
+ hasMore?: boolean; // 是否有更多数据
+ loading?: boolean; // 是否正在加载
+}
+
+const TwoColumnSelection: React.FC
+
+ {friend.nickname}
+ {friend.wechatId}
+
+ {/* 左侧：好友列表 */}
+
+
+
+
+ {/* 右侧：已选好友 */}
+
+ {
+ const value = e.target.value;
+ setSearchQuery(value);
+ handleSearch(value);
+ }}
+ prefix={
+
+
+ {isLoading && !loading ? (
+
+ 加载中...
+ ) : friends.length > 0 ? (
+ // 使用 React.memo 优化列表项渲染
+ friends.map(friend => {
+ const isSelected = selectedFriendsMap.has(friend.id);
+ return (
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的好友`
+ : "暂无好友"}
+
+ )}
+
+ {/* 使用外部传入的加载更多 */}
+ {hasMore && (
+
+
+
+ )}
+
+
+
+ 已选联系人 ({selectedFriends.length})
+
+
+
+ {selectedFriends.length > 0 ? (
+ selectedFriends.map(friend => (
+
+
+
+ {friend.nickname?.charAt(0)}
+
+
+ ))
+ ) : (
+
+
+
+ {friend.nickname}
+ 暂无选择
+ )}
+
+
+ );
+};
+
+export default UpdateNotification;
diff --git a/src/components/Upload/AudioRecorder/index.tsx b/src/components/Upload/AudioRecorder/index.tsx
new file mode 100644
index 0000000..8e9a1dc
--- /dev/null
+++ b/src/components/Upload/AudioRecorder/index.tsx
@@ -0,0 +1,416 @@
+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;
+ name: 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="点击录音"
+ />
+
+
+ {loading ? (
+
+ );
+
+ // 自定义文件列表项
+ const customItemRender = (
+ originNode: React.ReactElement,
+ file: UploadFile,
+ ) => {
+ if (file.status === "uploading") {
+ return (
+
+
+ ) : (
+
+
+ 上传中...
+
+
+
+ )}
+
+
+
+
+
+ {maxCount === 1
+ ? "上传音频"
+ : `上传音频 (${fileList.length}/${maxCount})`}
+
+
+ 支持 MP3、WAV、AAC 等格式，最大 {maxSize}MB
+ {maxCount > 1 && `，最多上传 ${maxCount} 个音频`}
+
+
+
+ );
+ }
+
+ if (file.status === "done") {
+ return (
+
+
+
+
+
+
+
+ {file.name}
+
+ {file.size ? formatFileSize(file.size) : "计算中..."}
+
+
+ }
+ onClick={() => handleRemove(file)}
+ className={style.deleteBtn}
+ />
+
+
+
+ );
+ }
+
+ return originNode;
+ };
+
+ const action = import.meta.env.VITE_API_BASE_URL + "/v1/attachment/upload";
+
+ return (
+
+
+
+
+
+
+ {file.name}
+
+ {file.size ? formatFileSize(file.size) : "未知大小"}
+
+
+ {showPreview && (
+ }
+ onClick={() => handlePreview(file.url || "")}
+ className={style.previewBtn}
+ />
+ )}
+ }
+ onClick={() => handleRemove(file)}
+ className={style.deleteBtn}
+ />
+
+
+ 1}
+ fileList={fileList}
+ accept="audio/*"
+ listType="text"
+ showUploadList={{
+ showPreviewIcon: false,
+ showRemoveIcon: false,
+ showDownloadIcon: false,
+ }}
+ disabled={disabled || loading}
+ beforeUpload={beforeUpload}
+ onChange={handleChange}
+ onRemove={handleRemove}
+ maxCount={maxCount}
+ itemRender={customItemRender}
+ >
+ {fileList.length >= maxCount ? null : uploadButton}
+
+
+ {/* 音频预览模态框 */}
+ setPreviewVisible(false)}
+ footer={null}
+ width={600}
+ centered
+ >
+
+
+ );
+};
+
+export default AudioUpload;
diff --git a/src/components/Upload/AvatarUpload/index.module.scss b/src/components/Upload/AvatarUpload/index.module.scss
new file mode 100644
index 0000000..abec0b8
--- /dev/null
+++ b/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/src/components/Upload/AvatarUpload/index.tsx b/src/components/Upload/AvatarUpload/index.tsx
new file mode 100644
index 0000000..6c69637
--- /dev/null
+++ b/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()}
+
+