-
- ) : (
- 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}"的账号`
- : "没有找到账号"}
-
-
- }
- allowClear={!readonly}
- size="large"
- readOnly={readonly}
- disabled={readonly}
- style={
- readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
- }
- />
-
- )}
- {/* 已选内容库列表窗口 */}
- {showSelectedList && selectedOptions.length > 0 && (
-
- {selectedOptions.map(item => (
-
- )}
- {/* 弹窗 */}
-
-
- ))}
-
- {item.name || item.id}
-
- {!readonly && (
- }
- size="small"
- style={{
- marginLeft: 4,
- color: "#ff4d4f",
- border: "none",
- background: "none",
- minWidth: 24,
- height: 24,
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- }}
- onClick={() => handleRemoveLibrary(item.id)}
- />
- )}
-
- {loading ? (
-
-
-
- ) : libraries.length > 0 ? (
- 加载中...
-
- {libraries.map(item => (
-
- ))}
-
- ) : (
-
-
- )}
-
- {searchQuery
- ? `没有找到包含"${searchQuery}"的内容库`
- : "没有找到内容库"}
-
-
- }
- allowClear={!readonly}
- size="large"
- readOnly={readonly}
- disabled={readonly}
- style={
- readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
- }
- />
-
- )}
- {/* 已选设备列表窗口 */}
- {mode === "input" && showSelectedList && selectedOptions.length > 0 && (
-
- {selectedOptions.map(device => (
-
- )}
- {/* 弹窗 */}
-
-
- ))}
-
- 【 {device.memo}】 - {device.wechatId}
-
- {!readonly && (
- }
- size="small"
- style={{
- marginLeft: 4,
- color: "#ff4d4f",
- border: "none",
- background: "none",
- minWidth: 24,
- height: 24,
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- }}
- onClick={() => handleRemoveDevice(device.id)}
- />
- )}
-
- {loading ? (
-
-
-
- ) : (
- 加载中...
-
- {filteredDevices.map(device => (
-
- ))}
-
- )}
-
- }
- 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/nkebao/src/components/Layout/layout.module.scss b/nkebao/src/components/Layout/layout.module.scss
deleted file mode 100644
index 3818f44d8..000000000
--- a/nkebao/src/components/Layout/layout.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.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/nkebao/src/components/LineChart.tsx b/nkebao/src/components/LineChart.tsx
deleted file mode 100644
index bb93e512f..000000000
--- a/nkebao/src/components/LineChart.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
-
- {
- if (backFn) {
- backFn();
- } else {
- navigate(-1);
- }
- }}
- />
-
- )
- }
- right={right}
- >
-
- {title}
-
-
-
- );
-};
-
-export default NavCommon;
diff --git a/nkebao/src/components/PlaceholderPage.tsx b/nkebao/src/components/PlaceholderPage.tsx
deleted file mode 100644
index 4eec7f2f8..000000000
--- a/nkebao/src/components/PlaceholderPage.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import { NavBar, Button } from "antd-mobile";
-import { PlusOutlined } from "@ant-design/icons";
-import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
-
-interface PlaceholderPageProps {
- title: string;
- showBack?: boolean;
- showAddButton?: boolean;
- addButtonText?: string;
- showFooter?: boolean;
-}
-
-const PlaceholderPage: React.FC
- {title}
-
- }
- right={
- showAddButton ? (
-
- ) : undefined
- }
- />
- }
- footer={showFooter ?
-
- {title}页面
-此页面正在开发中...
-
-
- 总计 {total} 条记录
-
-
-
- {currentPage} / {totalPages}
-
-
-
-
-
-
- );
-};
-
-export default PopupFooter;
diff --git a/nkebao/src/components/PopuLayout/header.module.scss b/nkebao/src/components/PopuLayout/header.module.scss
deleted file mode 100644
index f54cbbeeb..000000000
--- a/nkebao/src/components/PopuLayout/header.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.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/nkebao/src/components/PopuLayout/header.tsx b/nkebao/src/components/PopuLayout/header.tsx
deleted file mode 100644
index 652433c3b..000000000
--- a/nkebao/src/components/PopuLayout/header.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Input, Button } from "antd";
-import { Tabs } from "antd-mobile";
-import style from "./header.module.scss";
-
-interface PopupHeaderProps {
- title: string;
- searchQuery: string;
- setSearchQuery: (value: string) => void;
- searchPlaceholder?: string;
- loading?: boolean;
- onRefresh?: () => void;
- showRefresh?: boolean;
- showSearch?: boolean;
- showTabs?: boolean;
- tabsConfig?: {
- activeKey: string;
- onChange: (key: string) => void;
- tabs: Array<{ title: string; key: string }>;
- };
-}
-
-const PopupHeader: React.FC已选择 {selectedCount} 条记录
-
-
-
-
-
-
-
- {showSearch && (
- {title}
-
-
- )}
-
- {showTabs && tabsConfig && (
-
- setSearchQuery(e.target.value)}
- prefix={
-
- {showRefresh && onRefresh && (
-
- )}
-
-
- {steps.map((step, idx) => (
-
- {step.id}
-
- }
- />
- ))}
-
-
- );
-};
-
-export default StepIndicator;
diff --git a/nkebao/src/components/UpdateNotification/index.tsx b/nkebao/src/components/UpdateNotification/index.tsx
deleted file mode 100644
index 371b3d8a2..000000000
--- a/nkebao/src/components/UpdateNotification/index.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "antd-mobile";
-import { updateChecker } from "@/utils/updateChecker";
-import {
- ReloadOutlined,
- CloudDownloadOutlined,
- RocketOutlined,
-} from "@ant-design/icons";
-
-interface UpdateNotificationProps {
- position?: "top" | "bottom";
- autoReload?: boolean;
- showToast?: boolean;
-}
-
-const UpdateNotification: React.FC
- {/* 背景装饰 */}
-
- );
-};
-
-export default UpdateNotification;
diff --git a/nkebao/src/components/Upload/AvatarUpload/index.module.scss b/nkebao/src/components/Upload/AvatarUpload/index.module.scss
deleted file mode 100644
index abec0b860..000000000
--- a/nkebao/src/components/Upload/AvatarUpload/index.module.scss
+++ /dev/null
@@ -1,484 +0,0 @@
-.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/nkebao/src/components/Upload/AvatarUpload/index.tsx b/nkebao/src/components/Upload/AvatarUpload/index.tsx
deleted file mode 100644
index 6c6963753..000000000
--- a/nkebao/src/components/Upload/AvatarUpload/index.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-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()}
-
-