删除腾讯地图定位服务修复说明文档,更新CustomerList组件样式以支持离线用户状态,调整MessageList组件的加载状态管理,增强filter工具以支持XML格式位置消息的识别。
This commit is contained in:
@@ -47,6 +47,11 @@
|
||||
.active & {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.allUser {
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
</>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -58,6 +58,11 @@ export const messageFilter = (message: string) => {
|
||||
return "[图片]";
|
||||
}
|
||||
|
||||
// XML 格式的位置消息:包含 <location 标签
|
||||
if (/<location[\s>]/i.test(message)) {
|
||||
return "[位置]";
|
||||
}
|
||||
|
||||
// 其他情况直接返回原始消息
|
||||
return message;
|
||||
}
|
||||
|
||||
0
Touchkebao/消息功能规划.md
Normal file
0
Touchkebao/消息功能规划.md
Normal 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. 定位精度可能受网络环境影响
|
||||
Reference in New Issue
Block a user