优化客户管理模块：调整标签页样式，重构联系人展示为表格形式，提升用户体验和代码可读性。
This commit is contained in:
超级老白兔
@@ -0,0 +1,293 @@
|
||||
// 通用消息文本样式
|
||||
.messageText {
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// 位置消息基础样式
|
||||
.locationMessage {
|
||||
max-width: 420px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.locationCard {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-1px);
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 位置消息头部
|
||||
.locationHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px 8px;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.locationIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
margin-right: 12px;
|
||||
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.locationTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// 位置消息内容
|
||||
.locationContent {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.poiName {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.locationAddress {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.locationDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.poiCategory,
|
||||
.poiPhone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.4;
|
||||
|
||||
.categoryIcon,
|
||||
.phoneIcon {
|
||||
margin-right: 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
|
||||
.coordLabel {
|
||||
margin-right: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coordValue {
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
// 位置消息操作区域
|
||||
.locationAction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
|
||||
border-top: 1px solid #e1e8ed;
|
||||
color: #1890ff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.actionText {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.locationMessage {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.locationCard {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.locationHeader {
|
||||
padding: 10px 14px 6px;
|
||||
}
|
||||
|
||||
.locationIcon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 10px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.locationTitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.locationContent {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.poiName {
|
||||
font-size: 15px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.locationAddress {
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.locationDetails {
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.poiCategory,
|
||||
.poiPhone {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
font-size: 10px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.locationAction {
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深色模式支持（如果需要）
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.locationCard {
|
||||
background: #1f1f1f;
|
||||
border-color: #333;
|
||||
color: #e6e6e6;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.locationHeader {
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
.locationTitle {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.poiName {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.locationAddress {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.poiCategory,
|
||||
.poiPhone {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
background: #2a2a2a;
|
||||
border-color: #333;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.locationAction {
|
||||
background: linear-gradient(135deg, #1a2332 0%, #0d1419 100%);
|
||||
border-top-color: #333;
|
||||
color: #40a9ff;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #0d1419 0%, #1a2332 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import React from "react";
|
||||
import styles from "./LocationMessage.module.scss";
|
||||
|
||||
interface LocationMessageProps {
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface LocationData {
|
||||
x: string; // 经度
|
||||
y: string; // 纬度
|
||||
scale: string; // 缩放级别
|
||||
label: string; // 地址标签
|
||||
maptype: string; // 地图类型
|
||||
poiname: string; // POI名称
|
||||
poiid: string; // POI ID
|
||||
buildingId: string; // 建筑ID
|
||||
floorName: string; // 楼层名称
|
||||
poiCategoryTips: string; // POI分类提示
|
||||
poiBusinessHour: string; // 营业时间
|
||||
poiPhone: string; // 电话
|
||||
poiPriceTips: string; // 价格提示
|
||||
isFromPoiList: string; // 是否来自POI列表
|
||||
adcode: string; // 行政区划代码
|
||||
cityname: string; // 城市名称
|
||||
fromusername: string; // 发送者用户名
|
||||
}
|
||||
|
||||
const LocationMessage: React.FC<LocationMessageProps> = ({ content }) => {
|
||||
// 统一的错误消息渲染函数
|
||||
const renderErrorMessage = (fallbackText: string) => (
|
||||
<div className={styles.messageText}>{fallbackText}</div>
|
||||
);
|
||||
|
||||
if (typeof content !== "string" || !content.trim()) {
|
||||
return renderErrorMessage("[位置消息 - 无效内容]");
|
||||
}
|
||||
|
||||
try {
|
||||
// 解析位置消息内容
|
||||
const parseLocationContent = (content: string): LocationData | null => {
|
||||
try {
|
||||
// 提取XML中的location标签内容
|
||||
const locationMatch = content.match(/<location[^>]*>/);
|
||||
if (!locationMatch) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const locationTag = locationMatch[0];
|
||||
|
||||
// 提取所有属性
|
||||
const extractAttribute = (tag: string, attrName: string): string => {
|
||||
const regex = new RegExp(`${attrName}="([^"]*)"`);
|
||||
const match = tag.match(regex);
|
||||
return match ? match[1] : "";
|
||||
};
|
||||
|
||||
return {
|
||||
x: extractAttribute(locationTag, "x"),
|
||||
y: extractAttribute(locationTag, "y"),
|
||||
scale: extractAttribute(locationTag, "scale"),
|
||||
label: extractAttribute(locationTag, "label"),
|
||||
maptype: extractAttribute(locationTag, "maptype"),
|
||||
poiname: extractAttribute(locationTag, "poiname"),
|
||||
poiid: extractAttribute(locationTag, "poiid"),
|
||||
buildingId: extractAttribute(locationTag, "buildingId"),
|
||||
floorName: extractAttribute(locationTag, "floorName"),
|
||||
poiCategoryTips: extractAttribute(locationTag, "poiCategoryTips"),
|
||||
poiBusinessHour: extractAttribute(locationTag, "poiBusinessHour"),
|
||||
poiPhone: extractAttribute(locationTag, "poiPhone"),
|
||||
poiPriceTips: extractAttribute(locationTag, "poiPriceTips"),
|
||||
isFromPoiList: extractAttribute(locationTag, "isFromPoiList"),
|
||||
adcode: extractAttribute(locationTag, "adcode"),
|
||||
cityname: extractAttribute(locationTag, "cityname"),
|
||||
fromusername: extractAttribute(locationTag, "fromusername"),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("解析位置消息失败:", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const locationData = parseLocationContent(content);
|
||||
|
||||
if (!locationData) {
|
||||
return renderErrorMessage("[位置消息 - 解析失败]");
|
||||
}
|
||||
|
||||
// 生成地图链接
|
||||
const generateMapUrl = (lat: string, lng: string, label: string) => {
|
||||
// 使用腾讯地图链接
|
||||
return `https://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${lng};title:${encodeURIComponent(label)}&referer=wechat`;
|
||||
};
|
||||
|
||||
const mapUrl = generateMapUrl(
|
||||
locationData.y,
|
||||
locationData.x,
|
||||
locationData.label,
|
||||
);
|
||||
|
||||
// 处理POI信息
|
||||
const poiName = locationData.poiname || locationData.label;
|
||||
const poiCategory = locationData.poiCategoryTips
|
||||
? locationData.poiCategoryTips.split(":")[0]
|
||||
: "";
|
||||
const poiPhone = locationData.poiPhone || "";
|
||||
|
||||
return (
|
||||
<div className={styles.locationMessage}>
|
||||
<div
|
||||
className={styles.locationCard}
|
||||
onClick={() => window.open(mapUrl, "_blank")}
|
||||
>
|
||||
{/* 位置详情 */}
|
||||
<div className={styles.locationContent}>
|
||||
{/* POI名称 */}
|
||||
{poiName && <div className={styles.poiName}>{poiName}</div>}
|
||||
|
||||
{/* 详细地址 */}
|
||||
<div className={styles.locationAddress}>{locationData.label}</div>
|
||||
|
||||
{/* POI分类和电话 */}
|
||||
<div className={styles.locationDetails}>
|
||||
{poiCategory && (
|
||||
<div className={styles.poiCategory}>
|
||||
<span className={styles.categoryIcon}>🏷️</span>
|
||||
{poiCategory}
|
||||
</div>
|
||||
)}
|
||||
{poiPhone && (
|
||||
<div className={styles.poiPhone}>
|
||||
<span className={styles.phoneIcon}>📞</span>
|
||||
{poiPhone}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("位置消息渲染失败:", error);
|
||||
return renderErrorMessage("[位置消息 - 渲染失败]");
|
||||
}
|
||||
};
|
||||
|
||||
export default LocationMessage;
|
||||
Reference in New Issue
Block a user