root/Neo-ZQYY
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微信小程序页面迁移校验之前 P5任务处理之前

Browse Source
This commit is contained in:
Neo
2026-03-09 01:19:21 +08:00
parent 263bf96035
commit 6e20987d2f
1112 changed files with 153824 additions and 219694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

665
docs/h5_ui/rendered/task-list.html Normal file
View File

@@ -0,0 +1,665 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务列表 - 球房运营助手</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="../css/banner.css" rel="stylesheet">
<link href="../css/ai-icons.css" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
padding-bottom: 70px;
}
/* 任务卡片边框颜色 */
.task-card {
position: relative;
border-left: 4px solid transparent;
}
.task-card.high-priority {
border-left-color: #f43f5e;
}
.task-card.priority {
border-left-color: #f97316;
}
.task-card.relationship {
border-left-color: #ec4899;
}
.task-card.callback {
border-left-color: #14b8a6;
}
/* 标签颜色 - 圆角矩形 */
.tag-high-priority {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
border-radius: 4px;
}
.tag-priority {
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
border-radius: 4px;
}
.tag-relationship {
background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
border-radius: 4px;
}
.tag-callback {
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
border-radius: 4px;
}
/* 进度条动画 */
.progress-bar {
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
transition: width 0.6s ease-out;
}
/* 6段档位进度条 */
.tier-progress {
display: flex;
gap: 2px;
height: 8px;
}
.tier-segment {
border-radius: 2px;
background: rgba(255,255,255,0.25);
position: relative;
overflow: hidden;
}
.tier-segment.completed {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}
.tier-segment.current {
background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 100%);
overflow: hidden;
}
.tier-segment.current .tier-fill {
height: 100%;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border-radius: 2px;
}
/* 红戳样式 - 透明印章风格 */
.red-stamp {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.stamp-badge {
position: absolute;
top: -2px;
right: -28px;
transform: rotate(-12deg) scale(0);
width: 52px;
height: 52px;
border: 3px solid rgb(239, 68, 68);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent;
pointer-events: none;
opacity: 0;
box-shadow:
inset 0 0 0 2px rgba(255, 255, 255, 0.95),
inset 0 0 10px 2px rgba(255, 255, 255, 0.7),
inset 0 0 20px 4px rgba(255, 255, 255, 0.4);
}
/* 盖戳动画 */
@keyframes stampDown {
0% {
transform: rotate(-12deg) scale(3);
opacity: 0;
}
50% {
transform: rotate(-12deg) scale(0.9);
opacity: 0.9;
}
70% {
transform: rotate(-12deg) scale(1.05);
opacity: 0.85;
}
100% {
transform: rotate(-12deg) scale(1);
opacity: 0.8;
}
}
.stamp-badge.stamp-animate {
animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.stamp-badge .thumb {
font-size: 18px;
line-height: 1;
}
.stamp-badge .stamp-text {
font-size: 11px;
color: rgb(220, 38, 38);
font-weight: bold;
margin-top: 1px;
text-shadow:
0 0 2px rgba(255,255,255,1),
0 0 4px rgba(255,255,255,0.9),
1px 1px 0 rgba(255,255,255,0.9),
-1px -1px 0 rgba(255,255,255,0.9),
1px -1px 0 rgba(255,255,255,0.9),
-1px 1px 0 rgba(255,255,255,0.9);
}
/* 进度条按比例宽度：0-100(45.45%), 100-130(13.64%), 130-160(13.64%), 160-190(13.64%), 190-220(13.64%) */
.tier-segment-0 { flex: 100; }
.tier-segment-1 { flex: 30; }
.tier-segment-2 { flex: 30; }
.tier-segment-3 { flex: 30; }
.tier-segment-4 { flex: 30; }
/* 下降趋势样式 */
.trend-down {
color: rgba(255,255,255,0.5);
font-size: 12px;
}
/* 业绩卡片文字样式 */
.stat-value {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.stat-highlight {
color: #6ee7b7;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.stat-label {
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.stat-secondary {
color: rgba(255,255,255,0.7);
}
.stat-accent {
color: #fcd34d;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* 奖金金额突出样式 */
.bonus-amount {
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.35),
0 0 12px rgba(251, 191, 36, 0.5);
}
/* === 任务分区 === */
.section-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
padding: 3px 10px;
border-radius: 4px;
}
/* 置顶卡片微亮边框 */
.task-card.pinned {
box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.08);
}
/* 放弃任务 */
.task-card.abandoned {
border-left-color: #d1d5db !important;
opacity: 0.55;
}
.task-card.abandoned .task-name {
color: #9ca3af;
}
.task-card.abandoned .task-desc {
color: #c5c5c5;
}
.task-card.abandoned .task-tag-wrap > span:first-child {
background: #d1d5db !important;
}
/* 备注指示器 */
.note-indicator {
font-size: 12px;
margin-left: 2px;
}
/* === 长按上下文菜单 === */
.context-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.context-overlay.active {
opacity: 1;
pointer-events: all;
}
.context-menu {
position: fixed;
z-index: 101;
background: #fff;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
min-width: 192px;
padding: 6px 0;
opacity: 0;
transform: scale(0.88);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
transform-origin: top left;
}
.context-menu.active {
opacity: 1;
transform: scale(1);
pointer-events: all;
}
.ctx-item {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 18px;
font-size: 14px;
color: #393939;
cursor: pointer;
transition: background 0.12s;
user-select: none;
}
.ctx-item:active {
background: #f3f3f3;
}
.ctx-item + .ctx-item {
border-top: 1px solid #f3f3f3;
}
/* === 备注 / 放弃弹窗 === */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 18vh;
padding-bottom: 40vh;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.modal-card {
background: #fff;
border-radius: 16px;
width: 88%;
max-width: 360px;
padding: 24px 20px 20px;
transform: translateY(24px);
transition: transform 0.25s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-overlay.active .modal-card {
transform: translateY(0);
}
.modal-card textarea {
width: 100%;
border: 1.5px solid #e7e7e7;
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.6;
resize: none;
outline: none;
font-family: inherit;
color: #2c2c2c;
transition: border-color 0.2s;
box-sizing: border-box;
}
.modal-card textarea:focus {
border-color: #0052d9;
}
.modal-card textarea.error-border {
border-color: #e34d59;
}
.modal-error {
color: #e34d59;
font-size: 12px;
margin-top: 6px;
display: none;
}
.modal-error.show {
display: block;
}
.modal-submit-btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
margin-top: 14px;
transition: background 0.2s, opacity 0.2s;
font-family: inherit;
}
.modal-submit-btn.primary {
background: #0052d9;
color: #fff;
}
.modal-submit-btn.primary:active {
background: #003eb3;
}
.modal-submit-btn.danger {
background: #e34d59;
color: #fff;
}
.modal-submit-btn.danger:active {
background: #c9363f;
}
</style>
</head>
<body class="bg-gray-1 min-h-screen">
<!-- 顶部区域 - 用户信息和业绩卡片 -->
<div class="banner-bg theme-blue texture-aurora text-white pb-4">
<!-- 用户信息 -->
<div class="px-5 pt-10 pb-3">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="text-xl font-semibold">小燕</span>
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
</div>
<p class="text-white/70 text-sm">广州朗朗桌球</p>
</div>
</div>
</div>
<!-- 业绩进度卡片 -->
<div class="mx-4">
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-3 border border-white/20">
<!-- 第一层：标题行 -->
<div class="flex items-center justify-between mb-2">
<div class="flex items-baseline gap-2">
<span class="stat-label text-sm font-medium">距离100小时仅剩</span>
<span class="stat-accent text-xl font-bold">12.5小时</span>
</div>
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
查看详情
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</a>
</div>
<!-- 第二层：5段档位进度条 + 边界小时数（按比例宽度） -->
<div class="relative mb-6">
<div class="tier-progress">
<div class="tier-segment tier-segment-0 completed" title="0档 <100h"></div>
<div class="tier-segment tier-segment-1 current" title="1档 100-130h">
<div class="tier-fill" style="width: 58%"></div>
</div>
<div class="tier-segment tier-segment-2" title="2档 130-160h"></div>
<div class="tier-segment tier-segment-3" title="3档 160-190h"></div>
<div class="tier-segment tier-segment-4" title="4档 190-220h"></div>
</div>
<!-- 档位边界小时数（按比例定位：0, 100/220≈45.45%, 130/220≈59.09%, 160/220≈72.73%, 190/220≈86.36%, 220/220=100%） -->
<div class="absolute w-full top-full mt-1.5 flex text-[9px]" style="left: 0;">
<span class="text-white/60" style="position:absolute; left:0; transform:translateX(0);">0</span>
<span class="text-white/60" style="position:absolute; left:45.45%; transform:translateX(-50%);">100</span>
<span class="text-white/80 font-medium" style="position:absolute; left:59.09%; transform:translateX(-50%);">130</span>
<span class="text-white/60" style="position:absolute; left:72.73%; transform:translateX(-50%);">160</span>
<span class="text-white/60" style="position:absolute; left:86.36%; transform:translateX(-50%);">190</span>
<span class="text-white/60" style="position:absolute; right:0; transform:translateX(0);">220</span>
</div>
</div>
<!-- 第三层：核心数据 - 两列布局（左宽右窄） -->
<div class="flex items-stretch mb-2.5">
<!-- 左侧：课时数据 + 红戳（占60%） -->
<div class="pr-4 border-r border-white/25 flex justify-center items-center" style="flex: 3;">
<!-- 自动宽度容器：包含课时数据和红戳，居中显示 -->
<div class="red-stamp inline-block relative" style="padding-right: 35px;">
<div class="text-center">
<div class="flex items-baseline justify-center gap-1.5">
<span class="stat-highlight text-xl font-bold">77.5</span>
<span class="stat-secondary text-sm">|</span>
<span class="stat-accent text-xl font-bold">12</span>
<span class="stat-secondary text-sm">|</span>
<span class="stat-value text-xl font-bold">87.5</span>
</div>
<p class="stat-label text-xs mt-1.5">基础课 | 激励课 | 全部</p>
</div>
<!-- 红戳徽章 -->
<div class="stamp-badge" style="right: -5px; top: 5px;">
<span class="thumb">👍</span>
<span class="stamp-text">已完成</span>
</div>
</div>
</div>
<!-- 右侧：奖金激励（占40%） -->
<div class="pl-3 text-center flex flex-col justify-center" style="flex: 2;">
<div class="bonus-amount">
<span class="text-3xl font-bold text-amber-300">800</span>
<span class="text-base text-amber-300/80">元</span>
</div>
<p class="stat-label text-xs mt-1.5">达100h即得</p>
</div>
</div>
<!-- 第四层：预计收入 -->
<div class="flex items-center justify-between pt-2 border-t border-white/25">
<span class="stat-label text-xs">2月预计收入 | 比1月同期</span>
<a href="performance.html" class="flex items-center gap-1.5 group">
<span class="stat-value text-lg font-bold">¥6,206</span>
<span class="trend-down">↓368</span>
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- 待办任务列表 -->
<div class="px-4 py-5">
<!-- 标题 -->
<div class="flex items-center justify-between mb-4">
<h2 class="text-base font-semibold text-gray-13">今日 客户维护</h2>
<span class="text-sm text-gray-6">共 7 项</span>
</div>
<!-- 📌 置顶区域 -->
<div class="mb-5">
<div class="flex items-center gap-1.5 mb-2.5">
<span class="section-label text-amber-700 bg-amber-50">📌 置顶</span>
<span class="text-sm text-gray-6">2项</span>
</div>
<div class="space-y-3">
<!-- 置顶: 王先生 -->
<div class="task-card high-priority pinned block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="1" data-task-name="王先生" data-task-type="high-priority">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
<span class="text-base font-semibold text-gray-13 task-name">王先生</span>
<span class="text-sm">💖</span>
<span class="note-indicator" title="有备注">📝</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：15天前 · 余额：非常多</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</p>
</div>
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</div>
</div>
<!-- 置顶: 李女士 -->
<div class="task-card high-priority pinned block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="2" data-task-name="李女士" data-task-type="high-priority">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
<span class="text-base font-semibold text-gray-13 task-name">李女士</span>
<span class="text-sm">🧡</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：20天前 · 余额：非常多</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>VIP客户，储值余额较多</p>
</div>
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</div>
</div>
</div>
</div>
<!-- 一般任务区域 -->
<div class="mb-5">
<div class="flex items-center gap-1.5 mb-2.5">
<span class="section-label text-gray-9 bg-gray-2">一般任务</span>
<span class="text-sm text-gray-6">3项</span>
</div>
<div class="space-y-3">
<!-- 张先生 -->
<div class="task-card priority block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="3" data-task-name="张先生" data-task-type="priority">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
<span class="text-base font-semibold text-gray-13 task-name">张先生</span>
<span class="text-sm">💛</span>
<span class="note-indicator" title="有备注">📝</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：10天前 · 余额：一般</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>消费频率下降，需关注</p>
</div>
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</div>
</div>
<!-- 刘先生 -->
<div class="task-card priority block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="4" data-task-name="刘先生" data-task-type="priority">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
<span class="text-base font-semibold text-gray-13 task-name">刘先生</span>
<span class="text-sm">💙</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：8天前 · 余额：一般</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>偏好晚间时段，可推荐夜场套餐</p>
</div>
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</div>
</div>
<!-- 陈先生 -->
<div class="task-card relationship block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="5" data-task-name="陈先生" data-task-type="relationship">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-relationship px-2 py-0.5 text-white text-xs font-medium">关系构建</span>
<span class="text-base font-semibold text-gray-13 task-name">陈先生</span>
<span class="text-sm">💙</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：5天前 · 余额：无</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>潜力客户，建议加强互动</p>
</div>
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</div>
</div>
</div>
</div>
<!-- ❌ 放弃的任务区域 -->
<div class="mb-2">
<div class="flex items-center gap-1.5 mb-2.5">
<span class="section-label text-gray-6 bg-gray-2">已放弃</span>
<span class="text-sm text-gray-6">2项</span>
</div>
<div class="space-y-3">
<!-- 放弃: 赵女士 -->
<div class="task-card callback abandoned block bg-white rounded-xl p-4 shadow-sm" data-task-id="6" data-task-name="赵女士" data-task-type="callback">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
<span class="text-base font-semibold text-gray-13 task-name">赵女士</span>
<span class="text-sm">🧡</span>
<span class="note-indicator" title="有备注">📝</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：3天前 · 余额：非常多</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc">放弃原因：客户已转会至其他球房</p>
</div>
</div>
</div>
<!-- 放弃: 周先生 -->
<div class="task-card callback abandoned block bg-white rounded-xl p-4 shadow-sm" data-task-id="7" data-task-name="周先生" data-task-type="callback">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
<span class="text-base font-semibold text-gray-13 task-name">周先生</span>
<span class="text-sm">💛</span>
<span class="note-indicator" title="有备注">📝</span>
</div>
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：5天前 · 余额：一般</p>
<p class="text-sm text-gray-6 leading-relaxed task-desc">放弃原因：联系方式失效，无法触达</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 长按上下文菜单 -->
<div class="context-overlay" id="contextOverlay"></div>
<div class="context-menu" id="contextMenu">
<div class="ctx-item" data-action="pin">
<span>📌</span><span>置顶任务</span>
</div>
<div class="ctx-item" data-action="abandon">
<span>❌</span><span>放弃任务</span>
</div>
<div class="ctx-item" data-action="ai">
<span>🤖</span><span>问问AI助手</span>
</div>
<div class="ctx-item" data-action="remark">
<span>📝</span><span>备注</span>
</div>
</div>
<!-- 备注 / 放弃 弹窗（可复用组件） -->
<div class="modal-overlay" id="remarkModal">
<div class="modal-card">
<h3 class="text-base font-semibold text-gray-13 mb-1" id="modalTitle">添加备注</h3>
<p class="text-xs text-gray-6 mb-3" id="modalSubtitle">为该客户的维护任务添加备注</p>
<textarea id="remarkInput" rows="4" placeholder="请输入备注内容..."></textarea>
<div class="modal-error" id="remarkError">请填写放弃原因，不能为空</div>
<button class="modal-submit-btn primary" id="modalSubmitBtn">保存备注</button>
<button class="mt-2 w-full text-center text-sm text-gray-6 py-2 bg-transparent border-0 cursor-pointer" id="modalCancelBtn">取消</button>
</div>
</div>
<!-- AI 标识配色 -->
<!-- 悬浮助手按钮 -->
<!-- 通用底部导航 -->
<!-- 盖戳动画 -->
<!-- 长按菜单 + 备注弹窗 交互 -->
</body>