"""board-customer.html — 各维度卡片差异化设计 + 跟/弃基线对齐"""

filepath = "docs/h5_ui/pages/board-customer.html"
with open(filepath, "r", encoding="utf-8") as f:
    c = f.read()

# 1. 修复"跟"和"弃"badge的基线对齐
# 当前 transform: translateY(-0.5px) 导致偏移，改为 vertical-align: baseline
c = c.replace(
    'transform: translateY(-0.5px);',
    'vertical-align: baseline;'
)

# 2. 最应召回 — 突出召回指数，用大号数字+红色超期天数
old_recall_card1 = '''    <!-- ==================== 最应召回（默认） ==================== -->
    <div id="dim-recall" class="dim-container active p-4 pt-1 space-y-3">
        <!-- Card 1: 演示 assignee (红色加粗+跟) + normal + abandoned (灰色+弃) -->
        <a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shrink-0">
                        <span class="text-white font-semibold text-sm">王</span>
                    </div>
                    <span class="font-semibold text-gray-13">王先生</span>
                </div>
                <div class="text-right shrink-0">
                    <div class="text-primary font-bold">0.92</div>
                    <div class="text-[10px] text-gray-6 -mt-0.5">召回指数</div>
                </div>
            </div>
            <div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
                <div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">5次</span></div>
                <div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">15天前</span></div>
                <div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
                <div class="text-gray-6">超过 <span class="text-error font-medium">8天</span></div>
                <div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥8,000</span></div>
            </div>
            <div class="text-xs border-t border-gray-1 pt-2 ml-11">
                <span class="text-gray-6">助教:</span>
                <span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
                <span class="assistant-sep">|</span>
                <span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
                <span class="assistant-sep">|</span>
                <span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
            </div>
        </a>'''

new_recall_card1 = '''    <!-- ==================== 最应召回（默认） ==================== -->
    <div id="dim-recall" class="dim-container active p-4 pt-1 space-y-3">
        <!-- Card 1 -->
        <a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shrink-0">
                        <span class="text-white font-semibold text-sm">王</span>
                    </div>
                    <span class="font-semibold text-gray-13">王先生</span>
                </div>
                <!-- 召回指数突出展示 -->
                <div class="flex items-center gap-2 shrink-0">
                    <div class="bg-error/10 rounded-lg px-2.5 py-1.5 text-center">
                        <div class="text-error font-bold text-lg leading-none">+8天</div>
                        <div class="text-[9px] text-error/70 mt-0.5">超期</div>
                    </div>
                    <div class="text-center">
                        <div class="text-primary font-bold text-lg leading-none">0.92</div>
                        <div class="text-[9px] text-gray-6 mt-0.5">召回指数</div>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-3 text-xs mb-2.5 ml-11">
                <span class="text-gray-7">到店 <span class="text-gray-11 font-medium">5次/30天</span></span>
                <span class="text-gray-4">·</span>
                <span class="text-gray-7">间隔 <span class="text-gray-11 font-medium">7天</span></span>
                <span class="text-gray-4">·</span>
                <span class="text-gray-7">余额 <span class="text-gray-11 font-medium">¥8,000</span></span>
            </div>
            <div class="text-xs border-t border-gray-1 pt-2 ml-11">
                <span class="text-gray-6">助教:</span>
                <span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
                <span class="assistant-sep">|</span>
                <span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
                <span class="assistant-sep">|</span>
                <span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
            </div>
        </a>'''

c = c.replace(old_recall_card1, new_recall_card1)

# 3. 最高余额 — 突出余额金额，用大号金色数字
# 替换第一张卡的右上角指数为余额突出展示
c = c.replace(
    '''    <!-- ==================== 最高余额 ==================== -->
    <div id="dim-balance" class="dim-container p-4 pt-1 space-y-3">
        <a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
                        <span class="text-white font-semibold text-sm">赵</span>
                    </div>
                    <span clas