删除腾讯地图定位服务修复说明文档,更新CustomerList组件样式以支持离线用户状态,调整MessageList组件的加载状态管理,增强filter工具以支持XML格式位置消息的识别。

This commit is contained in:
超级老白兔
2025-11-24 15:37:57 +08:00
parent bda57a84e8
commit c801490c2f
6 changed files with 13 additions and 80 deletions

View File

@@ -47,6 +47,11 @@
.active & {
border-color: #1890ff;
}
&.offline {
filter: grayscale(100%);
opacity: 0.6;
}
}
}
.allUser {

View File

@@ -89,7 +89,6 @@ const CustomerList: React.FC = () => {
>
<div className={styles.allUser}></div>
</Badge>
<div className={`${styles.onlineIndicator} ${styles.online}`} />
</div>
{customerList.map(customer => (
<div
@@ -105,7 +104,7 @@ const CustomerList: React.FC = () => {
<Avatar
src={customer.avatar}
size={50}
className={styles.userAvatar}
className={`${styles.userAvatar} ${!customer.isOnline ? styles.offline : ""}`}
style={{
backgroundColor: !customer.avatar ? "#1890ff" : undefined,
}}
@@ -113,9 +112,6 @@ const CustomerList: React.FC = () => {
{!customer.avatar && customer.name.charAt(0)}
</Avatar>
</Badge>
<div
className={`${styles.onlineIndicator} ${customer.isOnline ? styles.online : styles.offline}`}
/>
</div>
))}
</>

View File

@@ -383,7 +383,7 @@ const MessageList: React.FC<MessageListProps> = () => {
const requestId = ++loadRequestRef.current;
const initializeSessions = async () => {
setLoading(true);
// setLoading(true);
try {
const cachedSessions =
@@ -416,7 +416,7 @@ const MessageList: React.FC<MessageListProps> = () => {
}
} finally {
if (!isCancelled && loadRequestRef.current === requestId) {
setLoading(false);
// setLoading(false);
}
}
};

View File

@@ -58,6 +58,11 @@ export const messageFilter = (message: string) => {
return "[图片]";
}
// XML 格式的位置消息:包含 <location 标签
if (/<location[\s>]/i.test(message)) {
return "[位置]";
}
// 其他情况直接返回原始消息
return message;
}

View File

View File

@@ -1,73 +0,0 @@
# 腾讯地图定位服务修复说明
## 问题描述
`selectMap.tsx` 文件中使用腾讯地图定位服务时出现以下错误:
```
TypeError: window.TMap.service.Location is not a constructor
at selectMap.tsx:121:33
```
## 原因分析
错误原因是尝试将 `TMap.service.Location` 作为构造函数使用,但在腾讯地图 GL API 中,定位服务不是通过构造函数方式创建的。
## 修复方法
### 1. 修改定位服务的初始化方式
将原来的代码:
```typescript
// 创建IP定位服务
window.geolocationRef = new window.TMap.service.Location({
timeout: 10000,
convert: true,
});
```
修改为:
```typescript
// 使用腾讯地图内置的定位服务
window.geolocationRef = window.TMap.service.Geolocation;
```
### 2. 修改定位服务的调用方式
在调用定位服务时,将配置参数直接传入 `getLocation` 方法:
```typescript
window.geolocationRef.getLocation({
timeout: 10000,
convert: true,
success: function (result: any) {
// 处理成功回调
},
error: function () {
// 处理错误回调
},
});
```
## 技术说明
1. **腾讯地图 GL API 中的定位服务**
- 正确的服务名称是 `TMap.service.Geolocation`,而非 `TMap.service.Location`
- 它是一个对象,不需要使用 `new` 关键字实例化
- 配置参数应该直接传递给 `getLocation` 方法
2. **定位服务参数**
- `timeout`:定位超时时间,单位毫秒
- `convert`:是否将坐标转换为腾讯地图坐标系
3. **回调处理**
- `success`:定位成功回调函数,返回位置信息
- `error`:定位失败回调函数
## 注意事项
1. 确保腾讯地图 SDK 已正确加载
2. 确保 API 密钥有定位服务的权限
3. 定位精度可能受网络环境影响