编辑页面

HTML内容
<!DOCTYPE html>
<!-- saved from url=(0040)https://sidhkgn7h13u.space.minimaxi.com/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>茶叶商城 · 小程序端</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #1a1a1a; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
        .phone-container { width: 375px; height: 812px; background: #f5f5f5; border-radius: 40px; overflow: hidden; position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
        .status-bar { background: #fff; padding: 12px 24px 8px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500; }
        .status-time { font-weight: 600; }
        .status-icons { display: flex; gap: 5px; align-items: center; }
        .page { display: none; height: calc(100% - 90px); overflow-y: auto; background: #f5f5f5; }
        .page.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .home-header { background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%); color: white; padding: 15px 20px 25px; }
        .home-title { font-size: 20px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
        .search-bar { background: rgba(255,255,255,0.2); border-radius: 20px; padding: 10px 15px; display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
        .search-bar input { background: transparent; border: none; color: white; flex: 1; font-size: 14px; outline: none; }
        .search-bar input::placeholder { color: rgba(255,255,255,0.7); }
        .category-scroll { display: flex; gap: 12px; padding: 15px 20px; overflow-x: auto; background: white; margin-bottom: 10px; }
        .category-scroll::-webkit-scrollbar { display: none; }
        .category-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
        .category-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: #f5f5f5; transition: all 0.3s; }
        .category-item.active .category-icon { background: #4a7c23; transform: scale(1.1); }
        .category-name { font-size: 12px; color: #666; }
        .category-item.active .category-name { color: #4a7c23; font-weight: 500; }
        .seckill-banner { background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%); margin: 0 15px 15px; border-radius: 12px; padding: 15px; color: white; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .seckill-left h3 { font-size: 16px; margin-bottom: 5px; }
        .seckill-left p { font-size: 12px; opacity: 0.9; }
        .seckill-timer { display: flex; gap: 5px; align-items: center; }
        .timer-num { background: white; color: #ff4d4f; padding: 3px 6px; border-radius: 4px; font-weight: 600; font-size: 14px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 15px 10px; }
        .section-title { font-size: 16px; font-weight: 600; color: #333; }
        .section-more { font-size: 12px; color: #999; cursor: pointer; }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 15px 15px; }
        .product-card { background: white; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.3s; }
        .product-card:active { transform: scale(0.98); }
        .product-image { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #e8f5e0 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; }
        .product-tag { position: absolute; top: 8px; left: 8px; background: #ff4d4f; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .product-info { padding: 10px; }
        .product-name { font-size: 14px; color: #333; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: #ff4d4f; font-size: 16px; font-weight: 600; }
        .product-price small { font-size: 12px; }
        .product-sales { font-size: 11px; color: #999; }
        .category-header { background: white; padding: 15px; margin-bottom: 10px; }
        .category-search { background: #f5f5f5; border-radius: 20px; padding: 10px 15px; display: flex; align-items: center; gap: 8px; color: #999; font-size: 14px; cursor: pointer; }
        .category-content { display: flex; }
        .category-sidebar { width: 80px; background: #f9f9f9; position: fixed; top: 100px; bottom: 90px; overflow-y: auto; }
        .category-tab { padding: 15px 10px; text-align: center; font-size: 13px; color: #666; border-left: 3px solid transparent; cursor: pointer; }
        .category-tab.active { background: white; color: #4a7c23; border-left-color: #4a7c23; font-weight: 500; }
        .category-products { flex: 1; padding: 15px; margin-left: 80px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .cart-header { background: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .cart-title { font-size: 16px; font-weight: 600; }
        .cart-edit { color: #ff4d4f; font-size: 14px; cursor: pointer; }
        .cart-item { background: white; margin: 0 15px 10px; border-radius: 12px; padding: 15px; display: flex; gap: 12px; }
        .cart-checkbox { width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; font-size: 12px; color: transparent; }
        .cart-checkbox.checked { border-color: #4a7c23; background: #4a7c23; color: white; }
        .cart-product-image { width: 80px; height: 80px; border-radius: 8px; background: linear-gradient(135deg, #e8f5e0 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; cursor: pointer; }
        .cart-product-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .cart-product-name { font-size: 14px; color: #333; cursor: pointer; }
        .cart-product-spec { font-size: 12px; color: #999; margin-top: 4px; }
        .cart-product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .cart-price { color: #ff4d4f; font-size: 16px; font-weight: 600; }
        .quantity-control { display: flex; align-items: center; gap: 10px; }
        .quantity-btn { width: 24px; height: 24px; border-radius: 4px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
        .quantity-num { font-size: 14px; min-width: 20px; text-align: center; }
        .cart-bottom { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); width: 375px; background: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
        .cart-total { display: flex; align-items: baseline; gap: 5px; }
        .cart-total-label { font-size: 14px; color: #666; }
        .cart-total-price { color: #ff4d4f; font-size: 20px; font-weight: 600; }
        .cart-settle { background: #4a7c23; color: white; padding: 10px 25px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .order-tabs { display: flex; background: white; margin-bottom: 10px; }
        .order-tab { flex: 1; text-align: center; padding: 15px; font-size: 14px; color: #666; border-bottom: 2px solid transparent; cursor: pointer; }
        .order-tab.active { color: #4a7c23; border-bottom-color: #4a7c23; }
        .order-card { background: white; margin: 0 15px 10px; border-radius: 12px; overflow: hidden; }
        .order-card-header { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; }
        .order-shop { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
        .order-status { font-size: 13px; color: #ff4d4f; }
        .order-product { padding: 12px 15px; display: flex; gap: 10px; cursor: pointer; }
        .order-product-image { width: 70px; height: 70px; border-radius: 8px; background: linear-gradient(135deg, #e8f5e0 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
        .order-product-info { flex: 1; }
        .order-product-name { font-size: 14px; color: #333; margin-bottom: 5px; }
        .order-product-spec { font-size: 12px; color: #999; }
        .order-product-price { display: flex; justify-content: space-between; margin-top: 8px; }
        .order-price { color: #ff4d4f; font-size: 14px; }
        .order-count { color: #999; font-size: 12px; }
        .order-card-footer { padding: 12px 15px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #f5f5f5; }
        .order-btn { padding: 6px 15px; border-radius: 15px; font-size: 13px; cursor: pointer; }
        .order-btn-gray { border: 1px solid #ddd; color: #666; }
        .order-btn-primary { background: #4a7c23; color: white; }
        .order-btn-red { border: 1px solid #ff4d4f; color: #ff4d4f; }
        .profile-header { background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%); padding: 30px 20px; color: white; }
        .profile-info { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
        .profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .profile-id { font-size: 12px; opacity: 0.8; }
        .profile-stats { display: flex; justify-content: space-around; background: rgba(255,255,255,0.15); border-radius: 12px; padding: 15px; }
        .profile-stat { text-align: center; cursor: pointer; }
        .profile-stat-value { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
        .profile-stat-label { font-size: 12px; opacity: 0.9; }
        .profile-menu { background: white; margin: 15px; border-radius: 12px; overflow: hidden; }
        .profile-menu-item { padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .profile-menu-item:last-child { border-bottom: none; }
        .profile-menu-left { display: flex; align-items: center; gap: 12px; }
        .profile-menu-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .profile-menu-text { font-size: 14px; color: #333; }
        .profile-menu-arrow { color: #ccc; font-size: 14px; }
        .detail-page, .sub-page { display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 375px; height: 100%; background: white; z-index: 200; animation: slideUp 0.3s ease; }
        .detail-page.active, .sub-page.active { display: block; }
        @keyframes slideUp { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } }
        .detail-header, .sub-header { position: sticky; top: 0; background: white; z-index: 10; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
        .detail-back, .sub-back { font-size: 24px; cursor: pointer; color: #333; }
        .detail-actions { display: flex; gap: 15px; }
        .detail-action { font-size: 20px; cursor: pointer; }
        .detail-image { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #e8f5e0 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; font-size: 100px; }
        .detail-content { padding: 20px; }
        .detail-price-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 15px; }
        .detail-price-symbol { color: #ff4d4f; font-size: 18px; }
        .detail-price { color: #ff4d4f; font-size: 28px; font-weight: 700; }
        .detail-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px; line-height: 1.5; }
        .detail-desc { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 20px; }
        .detail-specs { border-top: 1px solid #f5f5f5; padding-top: 20px; }
        .detail-spec-title { font-size: 14px; color: #333; margin-bottom: 10px; }
        .detail-spec-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .detail-spec-tag { padding: 8px 15px; background: #f5f5f5; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer; }
        .detail-spec-tag.active { background: #e8f5e0; color: #4a7c23; border: 1px solid #4a7c23; }
        .detail-bottom { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 375px; background: white; padding: 15px 20px; display: flex; gap: 15px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
        .detail-cart-btn { width: 50px; height: 50px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; cursor: pointer; }
        .detail-cart-badge { position: absolute; top: -3px; right: -3px; background: #ff4d4f; color: white; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .detail-add-cart, .detail-buy-now { flex: 1; padding: 15px; border-radius: 25px; text-align: center; font-size: 16px; font-weight: 500; cursor: pointer; }
        .detail-add-cart { background: #4a7c23; color: white; }
        .detail-buy-now { background: #ff4d4f; color: white; }
        .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 375px; background: white; display: flex; justify-content: space-around; padding: 10px 0 25px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; }
        .nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; position: relative; }
        .nav-icon { font-size: 24px; }
        .nav-text { font-size: 11px; color: #999; }
        .nav-item.active .nav-text { color: #4a7c23; }
        .nav-badge { position: absolute; top: -3px; right: -8px; background: #ff4d4f; color: white; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
        .coupon-popup { display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 375px; height: 100%; background: rgba(0,0,0,0.5); z-index: 300; justify-content: flex-end; }
        .coupon-popup.active { display: flex; }
        .coupon-content { width: 100%; background: white; border-radius: 20px 20px 0 0; padding: 20px; animation: slideUp 0.3s; }
        .coupon-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .coupon-title { font-size: 18px; font-weight: 600; }
        .coupon-close { font-size: 24px; color: #999; cursor: pointer; }
        .coupon-item { background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%); border-radius: 12px; padding: 15px; color: white; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .coupon-left { text-align: center; border-right: 1px dashed rgba(255,255,255,0.5); padding-right: 15px; }
        .coupon-value { font-size: 32px; font-weight: 700; }
        .coupon-condition { font-size: 12px; opacity: 0.9; }
        .coupon-right { flex: 1; padding-left: 15px; }
        .coupon-name { font-size: 15px; font-weight: 500; margin-bottom: 5px; }
        .coupon-time { font-size: 11px; opacity: 0.8; }
        .coupon-receive { background: white; color: #ff4d4f; padding: 5px 12px; border-radius: 15px; font-size: 12px; cursor: pointer; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: white; padding: 15px 25px; border-radius: 8px; font-size: 14px; z-index: 500; animation: toastIn 0.3s; }
        @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
        .page::-webkit-scrollbar { display: none; }

        /* 子页面通用样式 */
        .sub-title { font-size: 16px; font-weight: 600; text-align: center; flex: 1; }
        .sub-content { padding: 20px; min-height: 300px; }
        .menu-list { background: white; border-radius: 12px; overflow: hidden; }
        .menu-list-item { padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .menu-list-item:last-child { border-bottom: none; }
        .menu-list-left { display: flex; align-items: center; gap: 12px; }
        .menu-list-icon { font-size: 20px; }
        .menu-list-text { font-size: 14px; color: #333; }
        .menu-list-arrow { color: #ccc; }

        /* 地址列表 */
        .address-card { background: white; margin: 0 15px 10px; border-radius: 12px; padding: 15px; }
        .address-default { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .address-name { font-size: 15px; font-weight: 500; }
        .address-phone { font-size: 14px; color: #666; margin-left: 15px; }
        .address-tag { background: #4a7c23; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
        .address-detail { font-size: 13px; color: #999; margin-bottom: 10px; }
        .address-actions { display: flex; justify-content: flex-end; gap: 15px; }
        .address-action { font-size: 13px; color: #666; display: flex; align-items: center; gap: 5px; cursor: pointer; }
        .address-action.selected { color: #4a7c23; }

        /* 评价列表 */
        .review-card { background: white; margin: 0 15px 10px; border-radius: 12px; padding: 15px; }
        .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .review-user { font-size: 14px; color: #333; }
        .review-time { font-size: 12px; color: #999; }
        .review-stars { color: #ffc107; font-size: 14px; margin-bottom: 8px; }
        .review-content { font-size: 14px; color: #333; line-height: 1.5; }
        .review-product { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #999; }

        /* 服务单 */
        .service-card { background: white; margin: 0 15px 10px; border-radius: 12px; padding: 15px; }
        .service-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .service-status { color: #ff4d4f; font-size: 14px; }
        .service-product { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #f5f5f5; }
        .service-reason { font-size: 13px; color: #666; margin-top: 10px; }

        /* 钱包 */
        .wallet-balance { background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%); color: white; margin: 15px; border-radius: 12px; padding: 25px; text-align: center; }
        .wallet-label { font-size: 14px; opacity: 0.9; margin-bottom: 10px; }
        .wallet-value { font-size: 36px; font-weight: 700; }
        .wallet-actions { display: flex; gap: 15px; margin-top: 20px; justify-content: center; }
        .wallet-btn { padding: 10px 25px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .wallet-btn-recharge { background: white; color: #4a7c23; }
        .wallet-btn-withdraw { border: 1px solid white; color: white; background: transparent; }

        /* 帮助中心 */
        .help-list { background: white; margin: 0 15px 10px; border-radius: 12px; }
        .help-item { padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .help-item:last-child { border-bottom: none; }
        .help-question { font-size: 14px; color: #333; }
        .help-answer { font-size: 13px; color: #999; margin-top: 10px; line-height: 1.5; }

        /* 设置页 */
        .setting-item { background: white; margin-bottom: 1px; padding: 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .setting-left { display: flex; align-items: center; gap: 12px; }
        .setting-icon { font-size: 20px; }
        .setting-text { font-size: 14px; color: #333; }
        .setting-arrow { color: #ccc; }

        /* 结算页 */
        .address-section { background: white; padding: 15px; margin-bottom: 10px; cursor: pointer; }
        .address-content { display: flex; align-items: center; gap: 12px; }
        .address-icon { font-size: 24px; }
        .address-info { flex: 1; }
        .no-address { text-align: center; color: #999; font-size: 14px; padding: 20px; }
        .order-items { background: white; margin-bottom: 10px; }
        .order-item { padding: 15px; display: flex; gap: 12px; }
        .order-item-image { width: 70px; height: 70px; border-radius: 8px; background: linear-gradient(135deg, #e8f5e0 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .order-item-info { flex: 1; }
        .order-item-name { font-size: 14px; color: #333; margin-bottom: 5px; }
        .order-item-spec { font-size: 12px; color: #999; }
        .order-item-bottom { display: flex; justify-content: space-between; margin-top: 8px; }
        .order-item-price { color: #ff4d4f; font-size: 14px; }
        .order-item-count { color: #999; font-size: 12px; }
        .coupon-section { background: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; cursor: pointer; }
        .coupon-section-left { display: flex; align-items: center; gap: 10px; }
        .coupon-section-label { font-size: 14px; color: #333; }
        .coupon-section-value { color: #ff4d4f; font-size: 14px; }
        .price-section { background: white; padding: 15px; margin-bottom: 80px; }
        .price-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
        .price-label { color: #666; }
        .price-value { color: #333; }
        .price-total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #f5f5f5; font-size: 16px; }
        .price-total-label { color: #333; font-weight: 500; }
        .price-total-value { color: #ff4d4f; font-weight: 600; }
        .submit-section { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 375px; background: white; padding: 15px; display: flex; justify-content: flex-end; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
        .submit-btn { background: #4a7c23; color: white; padding: 12px 30px; border-radius: 20px; font-size: 16px; cursor: pointer; }

        /* 支付页 */
        .pay-section { background: white; margin-bottom: 10px; }
        .pay-amount { padding: 30px; text-align: center; }
        .pay-label { font-size: 14px; color: #666; margin-bottom: 15px; }
        .pay-value { font-size: 36px; font-weight: 700; color: #ff4d4f; }
        .pay-methods { padding: 15px; }
        .pay-method { padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .pay-method:last-child { border-bottom: none; }
        .pay-method-left { display: flex; align-items: center; gap: 12px; }
        .pay-method-icon { font-size: 24px; }
        .pay-method-name { font-size: 14px; color: #333; }
        .pay-method-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; }
        .pay-method-check.selected { border-color: #4a7c23; background: #4a7c23; color: white; }
        .pay-btn { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 375px; background: white; padding: 15px; }
        .pay-submit { background: #4a7c23; color: white; padding: 15px; border-radius: 25px; text-align: center; font-size: 16px; cursor: pointer; }

        /* 支付成功页 */
        .success-icon { font-size: 80px; text-align: center; padding: 40px; }
        .success-title { text-align: center; font-size: 20px; font-weight: 600; color: #333; margin-bottom: 10px; }
        .success-desc { text-align: center; font-size: 14px; color: #999; margin-bottom: 30px; }
        .success-actions { display: flex; gap: 15px; padding: 0 20px; }
        .success-btn { flex: 1; padding: 12px; border-radius: 20px; text-align: center; font-size: 14px; cursor: pointer; }
        .success-btn-view { border: 1px solid #4a7c23; color: #4a7c23; }
        .success-btn-home { background: #4a7c23; color: white; }

        /* 订单详情页 */
        .order-detail-status { background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%); color: white; padding: 25px; text-align: center; }
        .order-detail-status-icon { font-size: 40px; margin-bottom: 10px; }
        .order-detail-status-text { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .order-detail-status-desc { font-size: 13px; opacity: 0.9; }
        .order-detail-address { background: white; padding: 15px; display: flex; gap: 12px; margin-bottom: 10px; }
        .order-detail-logistics { background: white; padding: 15px; margin-bottom: 10px; cursor: pointer; }
        .logistics-title { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .logistics-status { font-size: 14px; color: #333; }
        .logistics-time { font-size: 12px; color: #999; }
        .logistics-detail { font-size: 13px; color: #666; line-height: 1.5; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="status-bar">
            <span class="status-time">9:41</span>
            <div class="status-icons"><span>📶</span><span>🔋</span></div>
        </div>

        <!-- 首页 -->
        <div class="page active" id="page-home">
            <div class="home-header">
                <div class="home-title">🍵 茶韵商城</div>
                <div class="search-bar" onclick="goToPage('category')">
                    <span>🔍</span>
                    <input type="text" placeholder="搜索茶叶商品" disabled="">
                </div>
            </div>

            <div class="category-scroll">
                <div class="category-item active" onclick="selectCategory(this)"><div class="category-icon">🍵</div><span class="category-name">推荐</span></div>
                <div class="category-item" onclick="selectCategory(this)"><div class="category-icon">🍃</div><span class="category-name">绿茶</span></div>
                <div class="category-item" onclick="selectCategory(this)"><div class="category-icon">🫖</div><span class="category-name">红茶</span></div>
                <div class="category-item" onclick="selectCategory(this)"><div class="category-icon">🍂</div><span class="category-name">普洱</span></div>
                <div class="category-item" onclick="selectCategory(this)"><div class="category-icon">🫱</div><span class="category-name">乌龙</span></div>
                <div class="category-item" onclick="selectCategory(this)"><div class="category-icon">🌼</div><span class="category-name">花茶</span></div>
                <div class="category-item" onclick="selectCategory(this)"><div class="category-icon">🎁</div><span class="category-name">礼盒</span></div>
            </div>

            <div class="seckill-banner" onclick="showToast('秒杀活动即将开始')">
                <div class="seckill-left"><h3>⏰ 限时秒杀</h3><p>精选好茶，超值优惠</p></div>
                <div class="seckill-timer"><span class="timer-num">02</span>:<span class="timer-num">45</span>:<span class="timer-num">30</span></div>
            </div>

            <div class="section-header">
                <span class="section-title">🔥 热销好茶</span>
                <span class="section-more" onclick="goToPage('category')">查看更多 ›</span>
            </div>
            <div class="product-grid">
                <div class="product-card" onclick="showDetail(1, '西湖龙井 特级茶叶 2024新茶', 128)">
                    <div class="product-image">🍵<span class="product-tag">爆款</span></div>
                    <div class="product-info">
                        <div class="product-name">西湖龙井 特级茶叶 2024新茶</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>128</span><span class="product-sales">已售 2.3万</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showDetail(2, '正山小种 红茶礼盒装', 268)">
                    <div class="product-image">🫖<span class="product-tag">热卖</span></div>
                    <div class="product-info">
                        <div class="product-name">正山小种 红茶礼盒装</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>268</span><span class="product-sales">已售 1.8万</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showDetail(3, '云南普洱茶饼 生茶357g', 88)">
                    <div class="product-image">🍂</div>
                    <div class="product-info">
                        <div class="product-name">云南普洱茶饼 生茶357g</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>88</span><span class="product-sales">已售 1.5万</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showDetail(4, '安溪铁观音 浓香型500g', 158)">
                    <div class="product-image">🫱<span class="product-tag">新品</span></div>
                    <div class="product-info">
                        <div class="product-name">安溪铁观音 浓香型500g</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>158</span><span class="product-sales">已售 9800</span></div>
                    </div>
                </div>
            </div>

            <div class="section-header">
                <span class="section-title">✨ 为你推荐</span>
                <span class="section-more" onclick="showToast('换一批推荐')">换一批 ›</span>
            </div>
            <div class="product-grid">
                <div class="product-card" onclick="showDetail(5, '茉莉花茶 浓香型250g', 68)">
                    <div class="product-image">🌼</div>
                    <div class="product-info">
                        <div class="product-name">茉莉花茶 浓香型250g</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>68</span><span class="product-sales">已售 8600</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showDetail(6, '碧螺春 一级茶叶 2024新茶', 98)">
                    <div class="product-image">🍃</div>
                    <div class="product-info">
                        <div class="product-name">碧螺春 一级茶叶 2024新茶</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>98</span><span class="product-sales">已售 7500</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showDetail(7, '茶叶礼盒 春节送礼佳品', 388)">
                    <div class="product-image">🎁</div>
                    <div class="product-info">
                        <div class="product-name">茶叶礼盒 春节送礼佳品</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>388</span><span class="product-sales">已售 5200</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showDetail(8, '黄山毛峰 特级250g', 118)">
                    <div class="product-image">🍵</div>
                    <div class="product-info">
                        <div class="product-name">黄山毛峰 特级250g</div>
                        <div class="product-bottom"><span class="product-price"><small>¥</small>118</span><span class="product-sales">已售 4800</span></div>
                    </div>
                </div>
            </div>
            <div style="height: 20px;"></div>
        </div>

        <!-- 分类页 -->
        <div class="page" id="page-category">
            <div class="category-header">
                <div class="category-search"><span>🔍</span><span>搜索商品</span></div>
            </div>
            <div class="category-content">
                <div class="category-sidebar">
                    <div class="category-tab active" onclick="selectCategoryTab(this)">全部</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">绿茶</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">红茶</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">普洱</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">乌龙</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">白茶</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">花茶</div>
                    <div class="category-tab" onclick="selectCategoryTab(this)">礼盒</div>
                </div>
                <div class="category-products">
                    <div class="product-card" onclick="showDetail(1, '西湖龙井 特级', 128)"><div class="product-image" style="aspect-ratio: 1;">🍵</div><div class="product-info"><div class="product-name">西湖龙井</div><div class="product-bottom"><span class="product-price"><small>¥</small>128</span></div></div></div>
                    <div class="product-card" onclick="showDetail(2, '正山小种 红茶', 268)"><div class="product-image" style="aspect-ratio: 1;">🫖</div><div class="product-info"><div class="product-name">正山小种</div><div class="product-bottom"><span class="product-price"><small>¥</small>268</span></div></div></div>
                    <div class="product-card" onclick="showDetail(3, '云南普洱 生茶', 88)"><div class="product-image" style="aspect-ratio: 1;">🍂</div><div class="product-info"><div class="product-name">云南普洱</div><div class="product-bottom"><span class="product-price"><small>¥</small>88</span></div></div></div>
                    <div class="product-card" onclick="showDetail(4, '铁观音 浓香型', 158)"><div class="product-image" style="aspect-ratio: 1;">🫱</div><div class="product-info"><div class="product-name">铁观音</div><div class="product-bottom"><span class="product-price"><small>¥</small>158</span></div></div></div>
                </div>
            </div>
        </div>

        <!-- 购物车页 -->
        <div class="page" id="page-cart">
            <div class="cart-header">
                <span class="cart-title">购物车</span>
                <span class="cart-edit" onclick="toggleCartEdit()">编辑</span>
            </div>
            <div id="cartItems">
                <div class="cart-item">
                    <div class="cart-checkbox checked" onclick="toggleCartCheck(this)">✓</div>
                    <div class="cart-product-image" onclick="showDetail(1, '西湖龙井 特级茶叶', 128)">🍵</div>
                    <div class="cart-product-info">
                        <div class="cart-product-name" onclick="showDetail(1, '西湖龙井 特级茶叶', 128)">西湖龙井 特级茶叶</div>
                        <div class="cart-product-spec">250g/罐</div>
                        <div class="cart-product-bottom">
                            <span class="cart-price">¥128</span>
                            <div class="quantity-control">
                                <span class="quantity-btn" onclick="changeQuantity(this, -1)">-</span>
                                <span class="quantity-num">2</span>
                                <span class="quantity-btn" onclick="changeQuantity(this, 1)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-item">
                    <div class="cart-checkbox" onclick="toggleCartCheck(this)"></div>
                    <div class="cart-product-image" onclick="showDetail(2, '正山小种 红茶礼盒', 268)">🫖</div>
                    <div class="cart-product-info">
                        <div class="cart-product-name" onclick="showDetail(2, '正山小种 红茶礼盒', 268)">正山小种 红茶礼盒</div>
                        <div class="cart-product-spec">500g/盒</div>
                        <div class="cart-product-bottom">
                            <span class="cart-price">¥268</span>
                            <div class="quantity-control">
                                <span class="quantity-btn" onclick="changeQuantity(this, -1)">-</span>
                                <span class="quantity-num">1</span>
                                <span class="quantity-btn" onclick="changeQuantity(this, 1)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cart-bottom">
                <div class="cart-total">
                    <span class="cart-total-label">合计:</span>
                    <span class="cart-total-price" id="cartTotal">¥256</span>
                </div>
                <div class="cart-settle" onclick="goToCheckout()">结算 (<span id="cartCount">2</span>)</div>
            </div>
        </div>

        <!-- 订单页 -->
        <div class="page" id="page-order">
            <div style="background: white; padding: 15px;">
                <div class="order-tabs">
                    <div class="order-tab active" onclick="selectOrderTab(this)">全部</div>
                    <div class="order-tab" onclick="selectOrderTab(this)">待付款</div>
                    <div class="order-tab" onclick="selectOrderTab(this)">待发货</div>
                    <div class="order-tab" onclick="selectOrderTab(this)">待收货</div>
                    <div class="order-tab" onclick="selectOrderTab(this)">已完成</div>
                </div>
            </div>

            <div class="order-card">
                <div class="order-card-header">
                    <span class="order-shop">🍵 茶韵商城旗舰店</span>
                    <span class="order-status">待发货</span>
                </div>
                <div class="order-product" onclick="showOrderDetail()">
                    <div class="order-product-image">🍵</div>
                    <div class="order-product-info">
                        <div class="order-product-name">西湖龙井 特级茶叶</div>
                        <div class="order-product-spec">250g/罐 × 2</div>
                        <div class="order-product-price">
                            <span class="order-price">¥256</span>
                            <span class="order-count">共2件</span>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <span class="order-btn order-btn-red" onclick="showRefundPage()">退款</span>
                    <span class="order-btn order-btn-primary" onclick="showToast('已提醒商家发货')">提醒发货</span>
                </div>
            </div>

            <div class="order-card">
                <div class="order-card-header">
                    <span class="order-shop">🍵 茶韵商城旗舰店</span>
                    <span class="order-status">待收货</span>
                </div>
                <div class="order-product" onclick="showOrderDetail()">
                    <div class="order-product-image">🫖</div>
                    <div class="order-product-info">
                        <div class="order-product-name">正山小种 红茶礼盒</div>
                        <div class="order-product-spec">500g/盒 × 1</div>
                        <div class="order-product-price">
                            <span class="order-price">¥268</span>
                            <span class="order-count">共1件</span>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <span class="order-btn order-btn-gray" onclick="showLogistics()">查看物流</span>
                    <span class="order-btn order-btn-primary" onclick="showToast('已确认收货')">确认收货</span>
                </div>
            </div>

            <div class="order-card">
                <div class="order-card-header">
                    <span class="order-shop">🍵 茶韵商城旗舰店</span>
                    <span class="order-status" style="color: #52c41a;">已完成</span>
                </div>
                <div class="order-product" onclick="showOrderDetail()">
                    <div class="order-product-image">🍂</div>
                    <div class="order-product-info">
                        <div class="order-product-name">云南普洱茶饼</div>
                        <div class="order-product-spec">357g/饼 × 1</div>
                        <div class="order-product-price">
                            <span class="order-price">¥88</span>
                            <span class="order-count">共1件</span>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <span class="order-btn order-btn-gray" onclick="buyAgain()">再次购买</span>
                    <span class="order-btn order-btn-primary" onclick="goToPage('review')">去评价</span>
                </div>
            </div>
        </div>

        <!-- 我的页 -->
        <div class="page" id="page-profile">
            <div class="profile-header">
                <div class="profile-info">
                    <div class="profile-avatar">👤</div>
                    <div>
                        <div class="profile-name">茶香四溢</div>
                        <div class="profile-id">ID: 88888888</div>
                    </div>
                </div>
                <div class="profile-stats">
                    <div class="profile-stat" onclick="goToPage('favorites')"><div class="profile-stat-value">128</div><div class="profile-stat-label">收藏</div></div>
                    <div class="profile-stat" onclick="goToPage('follow')"><div class="profile-stat-value">56</div><div class="profile-stat-label">关注</div></div>
                    <div class="profile-stat" onclick="goToPage('coupon')"><div class="profile-stat-value">12</div><div class="profile-stat-label">优惠券</div></div>
                </div>
            </div>

            <div class="profile-menu">
                <div class="profile-menu-item" onclick="goToPage('wallet')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #fff3e0;">💰</div><span class="profile-menu-text">我的钱包</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
                <div class="profile-menu-item" onclick="goToPage('address')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #e3f2fd;">📍</div><span class="profile-menu-text">收货地址</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
                <div class="profile-menu-item" onclick="goToPage('coupon')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #fce4ec;">🎫</div><span class="profile-menu-text">领券中心</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
            </div>

            <div class="profile-menu">
                <div class="profile-menu-item" onclick="goToPage('review')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #f3e5f5;">⭐</div><span class="profile-menu-text">我的评价</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
                <div class="profile-menu-item" onclick="goToPage('service')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #e8f5e9;">🔧</div><span class="profile-menu-text">售后服务</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
                <div class="profile-menu-item" onclick="goToPage('help')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #e0f7fa;">❓</div><span class="profile-menu-text">帮助中心</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
                <div class="profile-menu-item" onclick="goToPage('settings')">
                    <div class="profile-menu-left"><div class="profile-menu-icon" style="background: #f5f5f5;">⚙️</div><span class="profile-menu-text">设置</span></div>
                    <span class="profile-menu-arrow">›</span>
                </div>
            </div>
            <div style="height: 30px;"></div>
        </div>

        <!-- 商品详情页 -->
        <div class="detail-page" id="detailPage">
            <div class="detail-header">
                <span class="detail-back" onclick="closeDetail()">←</span>
                <div class="detail-actions">
                    <span class="detail-action">↗</span>
                    <span class="detail-action">♡</span>
                </div>
            </div>
            <div style="height: calc(100% - 180px); overflow-y: auto;">
                <div class="detail-image" id="detailImage">🍵</div>
                <div class="detail-content">
                    <div class="detail-price-row">
                        <span class="detail-price-symbol">¥</span>
                        <span class="detail-price" id="detailPrice">128</span>
                    </div>
                    <div class="detail-name" id="detailName">西湖龙井 特级茶叶 2024新茶 250g</div>
                    <div class="detail-desc">精选杭州西湖优质茶园，传承古法工艺，手工采摘明前嫩芽。茶汤嫩绿明亮，滋味鲜醇回甘，香气清高持久，叶底匀整成朵。每一口都是春天的味道，是送礼自饮的上佳之选。</div>
                    <div class="detail-specs">
                        <div class="detail-spec-title">选择规格</div>
                        <div class="detail-spec-tags">
                            <span class="detail-spec-tag active" onclick="selectSpec(this)">250g/罐</span>
                            <span class="detail-spec-tag" onclick="selectSpec(this)">500g/罐</span>
                            <span class="detail-spec-tag" onclick="selectSpec(this)">礼盒装</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-bottom">
                <div class="detail-cart-btn" onclick="goToPage('cart')">🛒<span class="detail-cart-badge" id="cartBadge">2</span></div>
                <div class="detail-add-cart" onclick="addToCart()">加入购物车</div>
                <div class="detail-buy-now" onclick="buyNow()">立即购买</div>
            </div>
        </div>

        <!-- 优惠券弹窗 -->
        <div class="coupon-popup" id="couponPopup">
            <div class="coupon-content">
                <div class="coupon-header">
                    <span class="coupon-title">优惠券</span>
                    <span class="coupon-close" onclick="closeCoupon()">×</span>
                </div>
                <div class="coupon-item">
                    <div class="coupon-left"><div class="coupon-value">¥20</div><div class="coupon-condition">满99元可用</div></div>
                    <div class="coupon-right"><div class="coupon-name">新人专享券</div><div class="coupon-time">有效期至 2024.06.30</div></div>
                    <span class="coupon-receive" onclick="receiveCoupon()">领取</span>
                </div>
                <div class="coupon-item" style="background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);">
                    <div class="coupon-left"><div class="coupon-value">¥50</div><div class="coupon-condition">满299元可用</div></div>
                    <div class="coupon-right"><div class="coupon-name">限时满减券</div><div class="coupon-time">有效期至 2024.05.31</div></div>
                    <span class="coupon-receive" onclick="receiveCoupon()">领取</span>
                </div>
                <div class="coupon-item" style="background: linear-gradient(135deg, #1890ff 0%, #69c0ff 100%);">
                    <div class="coupon-left"><div class="coupon-value">¥100</div><div class="coupon-condition">满599元可用</div></div>
                    <div class="coupon-right"><div class="coupon-name">会员专享券</div><div class="coupon-time">有效期至 2024.06.15</div></div>
                    <span class="coupon-receive" onclick="receiveCoupon()">领取</span>
                </div>
            </div>
        </div>

        <!-- 结算页 -->
        <div class="sub-page" id="page-checkout">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('checkout')">←</span>
                <span class="sub-title">确认订单</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100% - 50px); overflow-y: auto;">
                <div class="address-section" onclick="goToPage('address')">
                    <div class="address-content">
                        <span class="address-icon">📍</span>
                        <div class="address-info">
                            <div><span class="address-name">张三</span><span class="address-phone">138****8888</span></div>
                            <div class="address-detail">上海市浦东新区张江镇科苑路88号</div>
                        </div>
                    </div>
                </div>
                <div class="coupon-section" onclick="goToPage('couponSelect')">
                    <div class="coupon-section-left"><span>🎫</span><span class="coupon-section-label">优惠券</span></div>
                    <div><span class="coupon-section-value">-¥20</span><span style="color: #ccc; margin-left: 5px;">›</span></div>
                </div>
                <div class="order-items">
                    <div class="order-item">
                        <div class="order-item-image">🍵</div>
                        <div class="order-item-info">
                            <div class="order-item-name">西湖龙井 特级茶叶</div>
                            <div class="order-item-spec">250g/罐 × 2</div>
                            <div class="order-item-bottom">
                                <span class="order-item-price">¥256</span>
                                <span class="order-item-count">共2件</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="price-section">
                    <div class="price-row"><span class="price-label">商品金额</span><span class="price-value">¥256</span></div>
                    <div class="price-row"><span class="price-label">运费</span><span class="price-value">¥0</span></div>
                    <div class="price-row"><span class="price-label">优惠券</span><span class="price-value" style="color: #ff4d4f;">-¥20</span></div>
                    <div class="price-total">
                        <span class="price-total-label">合计</span>
                        <span class="price-total-value">¥236</span>
                    </div>
                </div>
            </div>
            <div class="submit-section">
                <div style="margin-right: 15px; color: #666; font-size: 14px;">实付: <span style="color: #ff4d4f; font-size: 18px; font-weight: 600;">¥236</span></div>
                <span class="submit-btn" onclick="goToPay()">提交订单</span>
            </div>
        </div>

        <!-- 支付页 -->
        <div class="sub-page" id="page-pay">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('pay')">←</span>
                <span class="sub-title">订单支付</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100% - 50px); overflow-y: auto;">
                <div class="pay-section">
                    <div class="pay-amount">
                        <div class="pay-label">支付金额</div>
                        <div class="pay-value">¥236</div>
                    </div>
                </div>
                <div class="pay-section">
                    <div class="pay-method" onclick="selectPayMethod(this)">
                        <div class="pay-method-left"><span class="pay-method-icon">💳</span><span class="pay-method-name">微信支付</span></div>
                        <div class="pay-method-check selected">✓</div>
                    </div>
                    <div class="pay-method" onclick="selectPayMethod(this)">
                        <div class="pay-method-left"><span class="pay-method-icon">💰</span><span class="pay-method-name">支付宝</span></div>
                        <div class="pay-method-check"></div>
                    </div>
                    <div class="pay-method" onclick="selectPayMethod(this)">
                        <div class="pay-method-left"><span class="pay-method-icon">🏦</span><span class="pay-method-name">银行卡</span></div>
                        <div class="pay-method-check"></div>
                    </div>
                </div>
            </div>
            <div class="pay-btn">
                <div class="pay-submit" onclick="doPay()">确认支付 ¥236</div>
            </div>
        </div>

        <!-- 支付成功页 -->
        <div class="sub-page" id="page-paySuccess">
            <div style="height: calc(100%); overflow-y: auto;">
                <div style="text-align: center; padding-top: 50px;">
                    <div class="success-icon">✅</div>
                    <div class="success-title">支付成功</div>
                    <div class="success-desc">订单已提交，请等待商家发货</div>
                </div>
                <div class="success-actions">
                    <span class="success-btn success-btn-view" onclick="goToPage('order')">查看订单</span>
                    <span class="success-btn success-btn-home" onclick="goToPage('home')">返回首页</span>
                </div>
            </div>
        </div>

        <!-- 钱包页 -->
        <div class="sub-page" id="page-wallet">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('wallet')">←</span>
                <span class="sub-title">我的钱包</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="wallet-balance">
                    <div class="wallet-label">账户余额</div>
                    <div class="wallet-value">¥1,288.00</div>
                    <div class="wallet-actions">
                        <span class="wallet-btn wallet-btn-recharge" onclick="showToast('充值功能')">充值</span>
                        <span class="wallet-btn wallet-btn-withdraw" onclick="showToast('提现功能')">提现</span>
                    </div>
                </div>
                <div class="menu-list">
                    <div class="menu-list-item"><div class="menu-list-left"><span class="menu-list-icon">📜</span><span class="menu-list-text">交易记录</span></div><span class="menu-list-arrow">›</span></div>
                    <div class="menu-list-item"><div class="menu-list-left"><span class="menu-list-icon">💳</span><span class="menu-list-text">我的银行卡</span></div><span class="menu-list-arrow">›</span></div>
                </div>
            </div>
        </div>

        <!-- 地址管理页 -->
        <div class="sub-page" id="page-address">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('address')">←</span>
                <span class="sub-title">收货地址</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="address-card">
                    <div class="address-default">
                        <div><span class="address-name">张三</span><span class="address-phone">138****8888</span><span class="address-tag">默认</span></div>
                    </div>
                    <div class="address-detail">上海市浦东新区张江镇科苑路88号</div>
                    <div class="address-actions">
                        <span class="address-action selected">✓ 默认地址</span>
                        <span class="address-action" onclick="showToast('编辑地址')">✏️ 编辑</span>
                        <span class="address-action" onclick="showToast('删除地址')">🗑️ 删除</span>
                    </div>
                </div>
                <div class="address-card">
                    <div class="address-default">
                        <div><span class="address-name">李四</span><span class="address-phone">139****6666</span></div>
                    </div>
                    <div class="address-detail">北京市海淀区中关村大街1号</div>
                    <div class="address-actions">
                        <span class="address-action" onclick="showToast('设为默认')">⚪ 设为默认</span>
                        <span class="address-action" onclick="showToast('编辑地址')">✏️ 编辑</span>
                        <span class="address-action" onclick="showToast('删除地址')">🗑️ 删除</span>
                    </div>
                </div>
                <div style="padding: 20px;">
                    <div style="background: #4a7c23; color: white; padding: 15px; border-radius: 25px; text-align: center; cursor: pointer;" onclick="showToast('新增地址')">+ 添加新地址</div>
                </div>
            </div>
        </div>

        <!-- 优惠券页 -->
        <div class="sub-page" id="page-coupon">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('coupon')">←</span>
                <span class="sub-title">优惠券</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div style="padding: 20px;">
                    <div class="coupon-item"><div class="coupon-left"><div class="coupon-value">¥20</div><div class="coupon-condition">满99元可用</div></div><div class="coupon-right"><div class="coupon-name">新人专享券</div><div class="coupon-time">有效期至 2024.06.30</div></div><span class="coupon-receive" onclick="showToast('已使用')">已领取</span></div>
                    <div class="coupon-item" style="background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);"><div class="coupon-left"><div class="coupon-value">¥50</div><div class="coupon-condition">满299元可用</div></div><div class="coupon-right"><div class="coupon-name">限时满减券</div><div class="coupon-time">有效期至 2024.05.31</div></div><span class="coupon-receive">立即使用</span></div>
                </div>
            </div>
        </div>

        <!-- 我的评价页 -->
        <div class="sub-page" id="page-review">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('review')">←</span>
                <span class="sub-title">我的评价</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar">👤</div>
                        <div><div class="review-user">茶客123</div><div class="review-time">2024-05-08</div></div>
                    </div>
                    <div class="review-stars">★★★★★</div>
                    <div class="review-content">茶叶非常新鲜，口感很好，香气浓郁，下次还会购买！</div>
                    <div class="review-product">🍵 西湖龙井 特级茶叶</div>
                </div>
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar">👤</div>
                        <div><div class="review-user">爱喝茶</div><div class="review-time">2024-05-06</div></div>
                    </div>
                    <div class="review-stars">★★★★☆</div>
                    <div class="review-content">包装精美，送礼很有面子。物流也很快，整体满意。</div>
                    <div class="review-product">🫖 正山小种 红茶礼盒</div>
                </div>
            </div>
        </div>

        <!-- 售后服务页 -->
        <div class="sub-page" id="page-service">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('service')">←</span>
                <span class="sub-title">售后服务</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="service-card">
                    <div class="service-header">
                        <span style="font-size: 14px;">退款申请</span>
                        <span class="service-status">处理中</span>
                    </div>
                    <div class="service-product">
                        <div class="order-item-image">🍂</div>
                        <div class="order-item-info">
                            <div class="order-item-name">云南普洱茶饼</div>
                            <div class="order-item-spec">357g/饼 × 1</div>
                            <div class="order-item-price">¥88</div>
                        </div>
                    </div>
                    <div class="service-reason">退款原因：商品与描述不符</div>
                </div>
                <div style="padding: 20px;">
                    <div style="background: #4a7c23; color: white; padding: 15px; border-radius: 25px; text-align: center; cursor: pointer;" onclick="showToast('新建售后单')">+ 新建售后单</div>
                </div>
            </div>
        </div>

        <!-- 帮助中心页 -->
        <div class="sub-page" id="page-help">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('help')">←</span>
                <span class="sub-title">帮助中心</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="help-list">
                    <div class="help-item"><span class="help-question">如何查看物流信息？</span><span style="color: #ccc;">›</span></div>
                    <div class="help-item"><span class="help-question">如何申请退款？</span><span style="color: #ccc;">›</span></div>
                    <div class="help-item"><span class="help-question">如何联系客服？</span><span style="color: #ccc;">›</span></div>
                    <div class="help-item"><span class="help-question">如何修改收货地址？</span><span style="color: #ccc;">›</span></div>
                    <div class="help-item"><span class="help-question">优惠券如何使用？</span><span style="color: #ccc;">›</span></div>
                    <div class="help-item"><span class="help-question">支付问题</span><span style="color: #ccc;">›</span></div>
                </div>
            </div>
        </div>

        <!-- 物流详情页 -->
        <div class="sub-page" id="page-logistics">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('logistics')">←</span>
                <span class="sub-title">物流详情</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div style="background: white; padding: 15px; margin-bottom: 10px;">
                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
                        <div style="width: 60px; height: 60px; border-radius: 8px; background: linear-gradient(135deg, #e8f5e0, #c8e6c9); display: flex; align-items: center; justify-content: center; font-size: 28px;">🫖</div>
                        <div style="flex: 1;">
                            <div style="font-size: 14px; color: #333; margin-bottom: 5px;">正山小种 红茶礼盒</div>
                            <div style="font-size: 12px; color: #999;">500g/盒 × 1</div>
                        </div>
                    </div>
                </div>
                <div style="background: white; padding: 15px; margin-bottom: 10px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <span style="font-size: 14px; color: #333; font-weight: 500;">顺丰速运 SF1234567890</span>
                        <span style="font-size: 12px; color: #4a7c23;" onclick="copyNumber()">复制</span>
                    </div>
                    <div style="font-size: 13px; color: #666;">预计送达时间：2024年5月15日</div>
                </div>
                <div style="background: white; padding: 15px;">
                    <div style="font-size: 14px; color: #333; font-weight: 500; margin-bottom: 15px;">物流跟踪</div>
                    <div style="position: relative; padding-left: 25px;">
                        <div style="position: absolute; left: 8px; top: 20px; bottom: 20px; width: 2px; background: #e0e0e0;"></div>
                        <div style="position: relative; margin-bottom: 20px;">
                            <div style="position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #4a7c23;"></div>
                            <div style="font-size: 14px; color: #333; margin-bottom: 5px;">商品已签收</div>
                            <div style="font-size: 12px; color: #999;">2024-05-12 14:30 已签收，感谢使用顺丰速运</div>
                        </div>
                        <div style="position: relative; margin-bottom: 20px;">
                            <div style="position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #ddd;"></div>
                            <div style="font-size: 14px; color: #333; margin-bottom: 5px;">正在派送</div>
                            <div style="font-size: 12px; color: #999;">2024-05-12 08:00 快递员正在为您派送，请保持电话畅通</div>
                        </div>
                        <div style="position: relative; margin-bottom: 20px;">
                            <div style="position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #ddd;"></div>
                            <div style="font-size: 14px; color: #333; margin-bottom: 5px;">到达目的地城市</div>
                            <div style="font-size: 12px; color: #999;">2024-05-11 20:15 快件已到达【上海浦东转运中心】</div>
                        </div>
                        <div style="position: relative;">
                            <div style="position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #ddd;"></div>
                            <div style="font-size: 14px; color: #333; margin-bottom: 5px;">已发货</div>
                            <div style="font-size: 12px; color: #999;">2024-05-10 16:30 商家已发货，快件发出</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置页 -->
        <div class="sub-page" id="page-settings">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('settings')">←</span>
                <span class="sub-title">设置</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="setting-item"><div class="setting-left"><span class="setting-icon">👤</span><span class="setting-text">账户与安全</span></div><span class="setting-arrow">›</span></div>
                <div class="setting-item"><div class="setting-left"><span class="setting-icon">🔔</span><span class="setting-text">消息通知</span></div><span class="setting-arrow">›</span></div>
                <div class="setting-item"><div class="setting-left"><span class="setting-icon">🌐</span><span class="setting-text">语言设置</span></div><span class="setting-arrow">›</span></div>
                <div class="setting-item"><div class="setting-left"><span class="setting-icon">� clear</span><span class="setting-text">清除缓存</span></div><span class="setting-arrow">›</span></div>
                <div class="setting-item"><div class="setting-left"><span class="setting-icon">📱</span><span class="setting-text">关于我们</span></div><span class="setting-arrow">›</span></div>
                <div style="padding: 20px;">
                    <div style="background: #f5f5f5; color: #666; padding: 15px; border-radius: 25px; text-align: center; cursor: pointer;" onclick="showToast('已退出登录')">退出登录</div>
                </div>
            </div>
        </div>

        <!-- 优惠券选择页 -->
        <div class="sub-page" id="page-couponSelect">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('couponSelect')">←</span>
                <span class="sub-title">选择优惠券</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div style="padding: 15px 15px 10px;">
                    <div style="font-size: 12px; color: #999; margin-bottom: 10px;">可用优惠券</div>
                    <div class="coupon-item" onclick="selectCoupon(20, '-¥20')" style="margin-bottom: 12px; cursor: pointer;">
                        <div class="coupon-left"><div class="coupon-value">¥20</div><div class="coupon-condition">满99元可用</div></div>
                        <div class="coupon-right"><div class="coupon-name">新人专享券</div><div class="coupon-time">有效期至 2024.06.30</div></div>
                    </div>
                    <div class="coupon-item" style="background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%); margin-bottom: 12px; cursor: pointer;" onclick="selectCoupon(50, '-¥50')">
                        <div class="coupon-left"><div class="coupon-value">¥50</div><div class="coupon-condition">满299元可用</div></div>
                        <div class="coupon-right"><div class="coupon-name">限时满减券</div><div class="coupon-time">有效期至 2024.05.31</div></div>
                    </div>
                </div>
                <div style="padding: 15px;">
                    <div style="font-size: 12px; color: #999; margin-bottom: 10px;">暂不可用</div>
                    <div class="coupon-item" style="opacity: 0.5; margin-bottom: 12px; cursor: not-allowed;">
                        <div class="coupon-left"><div class="coupon-value">¥100</div><div class="coupon-condition">满599元可用</div></div>
                        <div class="coupon-right"><div class="coupon-name">会员专享券</div><div class="coupon-time">有效期至 2024.06.15</div></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 收藏页 -->
        <div class="sub-page" id="page-favorites">
            <div class="sub-header">
                <span class="sub-back" onclick="closeSubPage('favorites')">←</span>
                <span class="sub-title">我的收藏</span>
                <span style="width: 40px;"></span>
            </div>
            <div style="height: calc(100%); overflow-y: auto;">
                <div class="product-grid" style="padding-top: 15px;">
                    <div class="product-card" onclick="showDetail(1, '西湖龙井 特级', 128)"><div class="product-image">🍵</div><div class="product-info"><div class="product-name">西湖龙井 特级</div><div class="product-bottom"><span class="product-price"><small>¥</small>128</span></div></div></div>
                    <div class="product-card" onclick="showDetail(3, '云南普洱', 88)"><div class="product-image">🍂</div><div class="product-info"><div class="product-name">云南普洱茶饼</div><div class="product-bottom"><span class="product-price"><small>¥</small>88</span></div></div></div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="goToPage('home', this)"><span class="nav-icon">🏠</span><span class="nav-text">首页</span></div>
            <div class="nav-item" onclick="goToPage('category', this)"><span class="nav-icon">📂</span><span class="nav-text">分类</span></div>
            <div class="nav-item" onclick="goToPage('cart', this)"><span class="nav-icon">🛒</span><span class="nav-text">购物车</span><span class="nav-badge" id="navBadge">2</span></div>
            <div class="nav-item" onclick="goToPage('order', this)"><span class="nav-icon">📋</span><span class="nav-text">订单</span></div>
            <div class="nav-item" onclick="goToPage('profile', this)"><span class="nav-icon">👤</span><span class="nav-text">我的</span></div>
        </div>
    </div>

    <script>
        let cartCount = 2;
        let currentProduct = { id: 1, name: '西湖龙井 特级茶叶', price: 128 };

        // 主导航
        function goToPage(page, el) {
            closeAllSubPages();
            document.getElementById('detailPage').classList.remove('active');
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            const targetPage = document.getElementById('page-' + page);
            if (targetPage) {
                targetPage.classList.add('active');
            }
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            if (el) el.classList.add('active');
            else {
                document.querySelectorAll('.nav-item').forEach(item => {
                    if (item.querySelector('.nav-icon').textContent.includes('🏠') && page === 'home') item.classList.add('active');
                    if (item.querySelector('.nav-icon').textContent.includes('📂') && page === 'category') item.classList.add('active');
                    if (item.querySelector('.nav-icon').textContent.includes('🛒') && page === 'cart') item.classList.add('active');
                    if (item.querySelector('.nav-icon').textContent.includes('📋') && page === 'order') item.classList.add('active');
                    if (item.querySelector('.nav-icon').textContent.includes('👤') && page === 'profile') item.classList.add('active');
                });
            }
            window.scrollTo(0, 0);
        }

        // 关闭所有子页面
        function closeAllSubPages() {
            document.querySelectorAll('.sub-page').forEach(p => p.classList.remove('active'));
        }

        // 关闭子页面
        function closeSubPage(page) {
            document.getElementById('page-' + page).classList.remove('active');
        }

        // 商品详情
        function showDetail(id, name, price) {
            currentProduct = { id, name, price };
            document.getElementById('detailName').textContent = name;
            document.getElementById('detailPrice').textContent = price;
            document.getElementById('detailImage').textContent = id === 1 ? '🍵' : id === 2 ? '🫖' : id === 3 ? '🍂' : id === 4 ? '🫱' : id === 5 ? '🌼' : id === 6 ? '🍃' : id === 7 ? '🎁' : '🍵';
            document.getElementById('detailPage').classList.add('active');
        }

        function closeDetail() {
            document.getElementById('detailPage').classList.remove('active');
        }

        // 规格选择
        function selectSpec(el) {
            document.querySelectorAll('.detail-spec-tag').forEach(tag => tag.classList.remove('active'));
            el.classList.add('active');
        }

        // 加入购物车
        function addToCart() {
            cartCount++;
            updateCartBadge();
            showToast('已添加到购物车');
        }

        // 立即购买
        function buyNow() {
            closeDetail();
            goToCheckout();
        }

        // 更新购物车徽章
        function updateCartBadge() {
            document.getElementById('cartBadge').textContent = cartCount;
            document.getElementById('navBadge').textContent = cartCount;
            document.getElementById('cartCount').textContent = cartCount;
        }

        // 去结算
        function goToCheckout() {
            document.getElementById('page-checkout').classList.add('active');
        }

        // 去支付
        function goToPay() {
            closeSubPage('checkout');
            document.getElementById('page-pay').classList.add('active');
        }

        // 选择支付方式
        function selectPayMethod(el) {
            el.querySelector('.pay-method-check').classList.add('selected');
            el.parentElement.querySelectorAll('.pay-method-check').forEach(check => {
                if (check !== el.querySelector('.pay-method-check')) check.classList.remove('selected');
            });
        }

        // 执行支付
        function doPay() {
            closeSubPage('pay');
            document.getElementById('page-paySuccess').classList.add('active');
        }

        // 分类选择
        function selectCategory(el) {
            document.querySelectorAll('.category-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
        }

        function selectCategoryTab(el) {
            document.querySelectorAll('.category-tab').forEach(tab => tab.classList.remove('active'));
            el.classList.add('active');
        }

        // 订单Tab
        function selectOrderTab(el) {
            document.querySelectorAll('.order-tab').forEach(tab => tab.classList.remove('active'));
            el.classList.add('active');
        }

        // 订单详情
        function showOrderDetail() {
            showToast('订单详情页');
        }

        // 物流信息
        function showLogistics() {
            document.getElementById('page-logistics').classList.add('active');
        }

        // 退款页
        function showRefundPage() {
            goToPage('service');
        }

        // 再次购买
        function buyAgain() {
            cartCount++;
            updateCartBadge();
            showToast('已加入购物车');
        }

        // 购物车操作
        function toggleCartCheck(el) {
            el.classList.toggle('checked');
            el.textContent = el.classList.contains('checked') ? '✓' : '';
            updateCartTotal();
        }

        function updateCartTotal() {
            const items = document.querySelectorAll('.cart-item');
            let total = 0, count = 0;
            items.forEach(item => {
                const checkbox = item.querySelector('.cart-checkbox');
                if (checkbox.classList.contains('checked')) {
                    const price = parseInt(item.querySelector('.cart-price').textContent.replace('¥', ''));
                    const qty = parseInt(item.querySelector('.quantity-num').textContent);
                    total += price * qty;
                    count += qty;
                }
            });
            document.getElementById('cartTotal').textContent = '¥' + total;
            document.getElementById('cartCount').textContent = count;
        }

        function changeQuantity(el, delta) {
            const numEl = el.parentElement.querySelector('.quantity-num');
            let num = parseInt(numEl.textContent);
            num = Math.max(1, num + delta);
            numEl.textContent = num;
            updateCartTotal();
        }

        function toggleCartEdit() {
            const editBtn = document.querySelector('.cart-edit');
            editBtn.textContent = editBtn.textContent === '编辑' ? '完成' : '编辑';
            showToast(editBtn.textContent === '完成' ? '选择要删除的商品' : '编辑完成');
        }

        // 优惠券
        function receiveCoupon() {
            showToast('优惠券已领取');
        }

        // 选择优惠券
        let selectedCouponDiscount = 20;
        function selectCoupon(discount, display) {
            selectedCouponDiscount = discount;
            document.querySelector('.coupon-section-value').textContent = display;
            closeSubPage('couponSelect');
            updateCheckoutPrice();
        }

        // 更新结算价格
        function updateCheckoutPrice() {
            const subtotal = 256;
            const couponDiscount = selectedCouponDiscount;
            const total = subtotal - couponDiscount;
            document.querySelector('.price-row:last-child .price-value').textContent = '-¥' + couponDiscount;
            document.querySelector('.price-total-value').textContent = '¥' + total;
            document.querySelector('.pay-submit').textContent = '确认支付 ¥' + total;
            document.querySelector('.submit-section .price-total-value').textContent = '¥' + total;
        }

        function closeCoupon() {
            document.getElementById('couponPopup').classList.remove('active');
        }

        // 复制运单号
        function copyNumber() {
            showToast('运单号已复制');
        }

        // Toast提示
        function showToast(msg) {
            const existing = document.querySelector('.toast');
            if (existing) existing.remove();
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = msg;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        }
    </script>

<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.inland-security-footer {
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 0;
  width: fit-content;
  display: flex;
  justify-content: flex-end;
}

.tooltip-container {
  position: relative;
}

.trigger-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.minimax-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 300;
  color: #adadad;
  text-decoration: none;
}

.minimax-link:visited {
  color: #adadad;
}

.minimax-link:hover {
  color: #666666;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  padding-bottom: 16px; /* 8px 内容间距 + 8px 用于鼠标移动的透明区域 */
  font-size: 12px;
  line-height: 17px;
  background-color: #fafafa;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #171717;
}

/* 创建透明的连接区域，让鼠标可以平滑移动到 tooltip */
.tooltip-content::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 16px;
}

.tooltip-container:hover .tooltip-content {
  display: flex;
}

.info-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.beian-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #171717;
}

.beian-icon {
  width: 14px;
  height: 14px;
  margin-right: 2px;
}

.underline-text {
  color: #171717;
  text-decoration: underline;
}

.underline-text:hover {
  color: #000000;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .trigger-content {
    background-color: transparent;
  }

  .minimax-link,
  .minimax-link:visited {
    color: #666666;
  }

  .minimax-link:hover {
    color: #adadad;
  }

  .tooltip-content {
    background-color: #262626;
    color: #ededed;
  }

  .beian-link,
  .underline-text {
    color: #ededed;
  }

  .underline-text:hover {
    color: #ffffff;
  }
}

</style>
<div class="inland-security-footer">
  <div class="tooltip-container">
    <div class="trigger-content">
      <a href="https://www.minimaxi.com/" target="_blank" rel="noreferrer" class="minimax-link">
        <span>© 2026 MiniMax</span>
      </a>
    </div>
    <div class="tooltip-content">
      <section class="info-section">
        <span>上海稀宇科技有限公司</span>
      </section>

      <section class="info-section">
        <a class="beian-link" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402010179" target="_blank" rel="noreferrer">
          <img alt="hailuo-beian-icon" src="./茶叶商城 · 小程序端_files/223037d3-79fd-4db0-a456-749f38a6a14b.png" class="beian-icon">
          <span class="underline-text">沪公网安备31010402010179号</span>
        </a>
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer" class="underline-text">
          沪ICP备2023003282号-38
        </a>
      </section>

      <section class="info-section">
        <span>模型名称：MiniMax</span>
        <span>备案号：Shanghai-MiniMax-202505230046</span>
      </section>

      <section class="info-section">
        <a href="https://agent.minimaxi.com/doc/zh/terms-of-service.html" target="_blank" rel="noreferrer" class="underline-text">
          用户协议
        </a>
        <a href="https://agent.minimaxi.com/doc/zh/privacy-policy.html" target="_blank" rel="noreferrer" class="underline-text">
          隐私政策
        </a>
      </section>
    </div>
  </div>
</div>


<script>
/**
 * Iframe 元素高亮注入脚本
 * 需要在目标网站中引入此脚本来支持跨域 iframe 高亮功能
 *
 * 使用方法：
 * 1. 将此脚本添加到目标网站的 HTML 中
 * 2. 或通过浏览器扩展、用户脚本等方式注入
 */

(function () {
  "use strict";

  // 检查是否在 iframe 中
  if (window.self === window.top) {
    return; // 不在 iframe 中，不执行
  }

  // 检查是否已经初始化过
  if (window.__iframeHighlightInitialized) {
    return;
  }
  window.__iframeHighlightInitialized = true;
  console.log("Iframe 高亮脚本已加载");

  // 创建高亮覆盖层
  var overlay = document.createElement("div");
  overlay.id = "iframe-highlight-overlay";
  overlay.style.cssText = "\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: 999999;\n    overflow: hidden;\n  ";

  // 创建悬停高亮框（虚线边框）
  var highlightBox = document.createElement("div");
  highlightBox.id = "iframe-highlight-box";
  highlightBox.style.cssText = "\n    position: absolute;\n    border: 2px dashed #007AFF;\n    background: rgba(0, 122, 255, 0.08);\n    pointer-events: none;\n    display: none;\n    transition: all 0.1s ease;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n    border-radius: 2px;\n  ";

  // 创建选中节点的常驻高亮框（实线边框）
  var selectedBox = document.createElement("div");
  selectedBox.id = "iframe-selected-box";
  selectedBox.style.cssText = "\n    position: absolute;\n    border: 2px solid #007AFF;\n    pointer-events: none;\n    display: none;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 107, 53, 0.4);\n    border-radius: 2px;\n    z-index: 1000000;\n  ";

  // 创建悬停标签显示
  var tagLabel = document.createElement("div");
  tagLabel.id = "iframe-tag-label";
  tagLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 2px 6px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 2px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000001;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n    font-weight: 500;\n  ";

  // 创建选中节点标签
  var selectedLabel = document.createElement("div");
  selectedLabel.id = "iframe-selected-label";
  selectedLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 3px 8px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 3px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000002;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n    font-weight: 600;\n  ";
  overlay.appendChild(highlightBox);
  overlay.appendChild(selectedBox);
  overlay.appendChild(tagLabel);
  overlay.appendChild(selectedLabel);
  document.body.appendChild(overlay);

  // 存储当前选中的元素
  var selectedElement = null;
  var highlightEnabled = false;

  // 更新选中元素的高亮显示
  function updateSelectedHighlight(element) {
    console.log("updateSelectedHighlight called with:", element);
    if (!element) {
      selectedBox.style.display = "none";
      selectedLabel.style.display = "none";
      selectedElement = null;
      console.log("Cleared selected highlight");
      return;
    }
    selectedElement = element;
    var rect = element.getBoundingClientRect();
    console.log("Selected element rect:", rect);

    // 更新选中高亮框位置
    selectedBox.style.display = "block";
    selectedBox.style.left = "".concat(rect.left - 2, "px");
    selectedBox.style.top = "".concat(rect.top - 2, "px");
    selectedBox.style.width = "".concat(rect.width + 4, "px");
    selectedBox.style.height = "".concat(rect.height + 4, "px");

    // 更新选中标签位置和内容
    selectedLabel.style.display = "block";
    selectedLabel.textContent = "\u2713 <".concat(element.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 28;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 5) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    var labelWidth = selectedLabel.offsetWidth || 100; // 预估宽度
    if (labelLeft + labelWidth > window.innerWidth - 10) {
      labelLeft = window.innerWidth - labelWidth - 10;
    }
    selectedLabel.style.left = "".concat(Math.max(5, labelLeft), "px");
    selectedLabel.style.top = "".concat(labelTop, "px");
    console.log("Selected highlight positioned at:", {
      left: selectedBox.style.left,
      top: selectedBox.style.top,
      width: selectedBox.style.width,
      height: selectedBox.style.height
    });
  }
  function getElementSelector(element) {
    if (!(element instanceof Element)) throw new Error('Argument must be a DOM element');
    var segments = [];
    var current = element;
    while (current !== document.documentElement) {
      var selector = '';
      // 优先检查唯一ID
      if (current.id && document.querySelectorAll("#".concat(current.id)).length === 1) {
        segments.unshift("#".concat(current.id));
        break; // ID唯一，无需继续向上
      }

      // 生成类名选择器（取第一个有效类名）
      var classes = Array.from(current.classList).filter(function (c) {
        return !c.startsWith('js-');
      });
      var className = classes.length > 0 ? ".".concat(classes[0]) : '';

      // 生成位置索引（nth-child）
      var tag = current.tagName.toLowerCase();
      if (!className) {
        var siblings = Array.from(current.parentNode.children);
        var index = siblings.findIndex(function (el) {
          return el === current;
        }) + 1;
        selector = "".concat(tag, ":nth-child(").concat(index, ")");
      } else {
        selector = className;
      }
      segments.unshift(selector);
      current = current.parentElement;
    }

    // 处理根元素
    if (current === document.documentElement) {
      segments.unshift('html');
    }
    return segments.join(' > ');
  }

  // 获取元素文本内容
  function getElementText(element) {
    var _element$textContent;
    if (element.tagName === "INPUT") {
      return element.value || element.placeholder || "";
    }
    if (element.tagName === "TEXTAREA") {
      return element.value || element.placeholder || "";
    }
    var text = ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) || "";
    return text.length > 50 ? text.substring(0, 50) + "..." : text;
  }

  // 获取元素属性信息
  function getElementAttributes(element) {
    var attrs = {};
    for (var i = 0; i < element.attributes.length; i++) {
      var attr = element.attributes[i];
      attrs[attr.name] = attr.value;
    }
    return attrs;
  }

  // 鼠标悬停事件处理
  function handleMouseOver(e) {
    if (!highlightEnabled) return;
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免高亮 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 如果是已选中的元素，不显示悬停高亮
    if (target === selectedElement) {
      highlightBox.style.display = "none";
      tagLabel.style.display = "none";
      return;
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);

    // 更新悬停高亮框位置
    highlightBox.style.display = "block";
    highlightBox.style.left = "".concat(rect.left - 2, "px");
    highlightBox.style.top = "".concat(rect.top - 2, "px");
    highlightBox.style.width = "".concat(rect.width + 4, "px");
    highlightBox.style.height = "".concat(rect.height + 4, "px");

    // 更新标签位置和内容
    tagLabel.style.display = "block";
    tagLabel.textContent = "<".concat(target.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 22;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 0) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    if (labelLeft + tagLabel.offsetWidth > window.innerWidth) {
      labelLeft = window.innerWidth - tagLabel.offsetWidth - 5;
    }
    tagLabel.style.left = "".concat(Math.max(0, labelLeft), "px");
    tagLabel.style.top = "".concat(labelTop, "px");

    // 发送消息到父窗口
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 鼠标离开事件处理
  function handleMouseOut(e) {
    if (!highlightEnabled) return;
    var relatedTarget = e.relatedTarget;

    // 如果鼠标移动到高亮相关元素上，不隐藏高亮
    if (relatedTarget && (relatedTarget === highlightBox || relatedTarget === tagLabel || relatedTarget === overlay || relatedTarget === selectedBox || relatedTarget === selectedLabel)) {
      return;
    }
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: null,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 点击事件处理
  function handleClick(e) {
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免处理 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 检查是否是交互元素，这些元素需要保留默认行为
    var isInteractiveElement = ['input', 'textarea', 'select', 'button', 'a'].includes(target.tagName.toLowerCase());

    // 如果高亮功能启用，对于非交互元素阻止默认行为和事件传播
    if (highlightEnabled) {
      e.preventDefault();
      e.stopPropagation();
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);
    console.log("Element clicked:", {
      tagName: target.tagName,
      selector: selector,
      rect: rect
    });

    // 立即更新选中高亮
    updateSelectedHighlight(target);

    // 隐藏悬停高亮，因为现在是选中状态
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-click",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 监听来自父窗口的消息
  function handleParentMessage(event) {
    console.log("Received message from parent:", event.data);
    if (event.data.type === "iframe-highlight-toggle") {
      var enabled = event.data.enabled;
      console.log("Highlight toggle:", enabled);
      if (enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "enable-iframe-highlight") {
      console.log("Enable iframe highlight");
      enableHighlight();
    } else if (event.data.type === "disable-iframe-highlight") {
      console.log("Disable iframe highlight");
      disableHighlight();
    } else if (event.data.type === "toggle-iframe-highlight") {
      var _enabled = event.data.enabled !== undefined ? event.data.enabled : !highlightEnabled;
      console.log("Toggle iframe highlight to:", _enabled);
      if (_enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "update-selected-element") {
      var selector = event.data.selector;
      console.log("Update selected element with selector:", selector);
      if (selector) {
        try {
          var element = document.querySelector(selector);
          console.log("Found element by selector:", element);
          updateSelectedHighlight(element);
        } catch (error) {
          console.warn("Failed to select element:", error);
          updateSelectedHighlight(null);
        }
      } else {
        updateSelectedHighlight(null);
      }
    } else if (event.data.type === "clear-selected-element") {
      console.log("Clear selected element");
      updateSelectedHighlight(null);
    }
  }

  // 启用高亮功能
  function enableHighlight() {
    console.log("Enabling highlight");
    document.addEventListener("mouseover", handleMouseOver, true);
    document.addEventListener("mouseout", handleMouseOut, true);
    document.addEventListener("click", handleClick, true);
    highlightEnabled = true;
    overlay.style.display = "block";
  }

  // 禁用高亮功能
  function disableHighlight() {
    console.log("Disabling highlight");
    highlightEnabled = false;
    // 保持事件监听器，但通过 highlightEnabled 变量控制行为
    // 这样可以保留选中状态的显示
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    // 不隐藏 selectedBox 和 selectedLabel，保留选中状态
  }

  // 完全禁用高亮功能（移除所有监听器）
  function fullyDisableHighlight() {
    console.log("Fully disabling highlight");
    highlightEnabled = false;
    document.removeEventListener("mouseover", handleMouseOver, true);
    document.removeEventListener("mouseout", handleMouseOut, true);
    document.removeEventListener("click", handleClick, true);
    overlay.style.display = "none";
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    selectedBox.style.display = "none";
    selectedLabel.style.display = "none";
  }

  // 添加事件监听
  enableHighlight();
  window.addEventListener("message", handleParentMessage);

  // 暴露全局函数供外部调用
  window.__iframeHighlightControl = {
    enable: enableHighlight,
    disable: disableHighlight,
    fullyDisable: fullyDisableHighlight,
    isEnabled: function isEnabled() {
      return highlightEnabled;
    },
    getSelectedElement: function getSelectedElement() {
      return selectedElement;
    },
    updateSelected: updateSelectedHighlight,
    // 通过消息发送开关控制
    sendToggleMessage: function sendToggleMessage(enabled) {
      window.parent.postMessage({
        type: 'iframe-highlight-status',
        enabled: enabled || highlightEnabled,
        source: 'iframe-highlight-injector'
      }, '*');
    }
  };

  // 通知父窗口脚本已加载
  try {
    window.parent.postMessage({
      type: "iframe-highlight-ready",
      data: {
        url: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: Date.now()
      },
      source: "iframe-highlight-injector"
    }, "*");
  } catch (error) {
    console.warn("无法发送就绪消息到父窗口:", error);
  }

  // 清理函数
  window.__iframeHighlightCleanup = function () {
    fullyDisableHighlight();
    window.removeEventListener("message", handleParentMessage);
    if (overlay.parentElement) {
      overlay.parentElement.removeChild(overlay);
    }
    delete window.__iframeHighlightInitialized;
    delete window.__iframeHighlightCleanup;
  };
})();

</script>

<script>
/**
 * Iframe 元素高亮注入脚本
 * 需要在目标网站中引入此脚本来支持跨域 iframe 高亮功能
 *
 * 使用方法：
 * 1. 将此脚本添加到目标网站的 HTML 中
 * 2. 或通过浏览器扩展、用户脚本等方式注入
 */

(function () {
  "use strict";

  // 检查是否在 iframe 中
  if (window.self === window.top) {
    return; // 不在 iframe 中，不执行
  }

  // 检查是否已经初始化过
  if (window.__iframeHighlightInitialized) {
    return;
  }
  window.__iframeHighlightInitialized = true;
  console.log("Iframe 高亮脚本已加载");

  // 创建高亮覆盖层
  var overlay = document.createElement("div");
  overlay.id = "iframe-highlight-overlay";
  overlay.style.cssText = "\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: 999999;\n    overflow: hidden;\n  ";

  // 创建悬停高亮框（虚线边框）
  var highlightBox = document.createElement("div");
  highlightBox.id = "iframe-highlight-box";
  highlightBox.style.cssText = "\n    position: absolute;\n    border: 2px dashed #007AFF;\n    background: rgba(0, 122, 255, 0.08);\n    pointer-events: none;\n    display: none;\n    transition: all 0.1s ease;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n    border-radius: 2px;\n  ";

  // 创建选中节点的常驻高亮框（实线边框）
  var selectedBox = document.createElement("div");
  selectedBox.id = "iframe-selected-box";
  selectedBox.style.cssText = "\n    position: absolute;\n    border: 2px solid #007AFF;\n    pointer-events: none;\n    display: none;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 107, 53, 0.4);\n    border-radius: 2px;\n    z-index: 1000000;\n  ";

  // 创建悬停标签显示
  var tagLabel = document.createElement("div");
  tagLabel.id = "iframe-tag-label";
  tagLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 2px 6px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 2px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000001;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n    font-weight: 500;\n  ";

  // 创建选中节点标签
  var selectedLabel = document.createElement("div");
  selectedLabel.id = "iframe-selected-label";
  selectedLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 3px 8px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 3px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000002;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n    font-weight: 600;\n  ";
  overlay.appendChild(highlightBox);
  overlay.appendChild(selectedBox);
  overlay.appendChild(tagLabel);
  overlay.appendChild(selectedLabel);
  document.body.appendChild(overlay);

  // 存储当前选中的元素
  var selectedElement = null;
  var highlightEnabled = false;

  // 更新选中元素的高亮显示
  function updateSelectedHighlight(element) {
    console.log("updateSelectedHighlight called with:", element);
    if (!element) {
      selectedBox.style.display = "none";
      selectedLabel.style.display = "none";
      selectedElement = null;
      console.log("Cleared selected highlight");
      return;
    }
    selectedElement = element;
    var rect = element.getBoundingClientRect();
    console.log("Selected element rect:", rect);

    // 更新选中高亮框位置
    selectedBox.style.display = "block";
    selectedBox.style.left = "".concat(rect.left - 2, "px");
    selectedBox.style.top = "".concat(rect.top - 2, "px");
    selectedBox.style.width = "".concat(rect.width + 4, "px");
    selectedBox.style.height = "".concat(rect.height + 4, "px");

    // 更新选中标签位置和内容
    selectedLabel.style.display = "block";
    selectedLabel.textContent = "\u2713 <".concat(element.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 28;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 5) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    var labelWidth = selectedLabel.offsetWidth || 100; // 预估宽度
    if (labelLeft + labelWidth > window.innerWidth - 10) {
      labelLeft = window.innerWidth - labelWidth - 10;
    }
    selectedLabel.style.left = "".concat(Math.max(5, labelLeft), "px");
    selectedLabel.style.top = "".concat(labelTop, "px");
    console.log("Selected highlight positioned at:", {
      left: selectedBox.style.left,
      top: selectedBox.style.top,
      width: selectedBox.style.width,
      height: selectedBox.style.height
    });
  }
  function getElementSelector(element) {
    if (!(element instanceof Element)) throw new Error('Argument must be a DOM element');
    var segments = [];
    var current = element;
    while (current !== document.documentElement) {
      var selector = '';
      // 优先检查唯一ID
      if (current.id && document.querySelectorAll("#".concat(current.id)).length === 1) {
        segments.unshift("#".concat(current.id));
        break; // ID唯一，无需继续向上
      }

      // 生成类名选择器（取第一个有效类名）
      var classes = Array.from(current.classList).filter(function (c) {
        return !c.startsWith('js-');
      });
      var className = classes.length > 0 ? ".".concat(classes[0]) : '';

      // 生成位置索引（nth-child）
      var tag = current.tagName.toLowerCase();
      if (!className) {
        var siblings = Array.from(current.parentNode.children);
        var index = siblings.findIndex(function (el) {
          return el === current;
        }) + 1;
        selector = "".concat(tag, ":nth-child(").concat(index, ")");
      } else {
        selector = className;
      }
      segments.unshift(selector);
      current = current.parentElement;
    }

    // 处理根元素
    if (current === document.documentElement) {
      segments.unshift('html');
    }
    return segments.join(' > ');
  }

  // 获取元素文本内容
  function getElementText(element) {
    var _element$textContent;
    if (element.tagName === "INPUT") {
      return element.value || element.placeholder || "";
    }
    if (element.tagName === "TEXTAREA") {
      return element.value || element.placeholder || "";
    }
    var text = ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) || "";
    return text.length > 50 ? text.substring(0, 50) + "..." : text;
  }

  // 获取元素属性信息
  function getElementAttributes(element) {
    var attrs = {};
    for (var i = 0; i < element.attributes.length; i++) {
      var attr = element.attributes[i];
      attrs[attr.name] = attr.value;
    }
    return attrs;
  }

  // 鼠标悬停事件处理
  function handleMouseOver(e) {
    if (!highlightEnabled) return;
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免高亮 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 如果是已选中的元素，不显示悬停高亮
    if (target === selectedElement) {
      highlightBox.style.display = "none";
      tagLabel.style.display = "none";
      return;
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);

    // 更新悬停高亮框位置
    highlightBox.style.display = "block";
    highlightBox.style.left = "".concat(rect.left - 2, "px");
    highlightBox.style.top = "".concat(rect.top - 2, "px");
    highlightBox.style.width = "".concat(rect.width + 4, "px");
    highlightBox.style.height = "".concat(rect.height + 4, "px");

    // 更新标签位置和内容
    tagLabel.style.display = "block";
    tagLabel.textContent = "<".concat(target.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 22;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 0) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    if (labelLeft + tagLabel.offsetWidth > window.innerWidth) {
      labelLeft = window.innerWidth - tagLabel.offsetWidth - 5;
    }
    tagLabel.style.left = "".concat(Math.max(0, labelLeft), "px");
    tagLabel.style.top = "".concat(labelTop, "px");

    // 发送消息到父窗口
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 鼠标离开事件处理
  function handleMouseOut(e) {
    if (!highlightEnabled) return;
    var relatedTarget = e.relatedTarget;

    // 如果鼠标移动到高亮相关元素上，不隐藏高亮
    if (relatedTarget && (relatedTarget === highlightBox || relatedTarget === tagLabel || relatedTarget === overlay || relatedTarget === selectedBox || relatedTarget === selectedLabel)) {
      return;
    }
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: null,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 点击事件处理
  function handleClick(e) {
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免处理 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 检查是否是交互元素，这些元素需要保留默认行为
    var isInteractiveElement = ['input', 'textarea', 'select', 'button', 'a'].includes(target.tagName.toLowerCase());

    // 如果高亮功能启用，对于非交互元素阻止默认行为和事件传播
    if (highlightEnabled) {
      e.preventDefault();
      e.stopPropagation();
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);
    console.log("Element clicked:", {
      tagName: target.tagName,
      selector: selector,
      rect: rect
    });

    // 立即更新选中高亮
    updateSelectedHighlight(target);

    // 隐藏悬停高亮，因为现在是选中状态
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-click",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 监听来自父窗口的消息
  function handleParentMessage(event) {
    console.log("Received message from parent:", event.data);
    if (event.data.type === "iframe-highlight-toggle") {
      var enabled = event.data.enabled;
      console.log("Highlight toggle:", enabled);
      if (enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "enable-iframe-highlight") {
      console.log("Enable iframe highlight");
      enableHighlight();
    } else if (event.data.type === "disable-iframe-highlight") {
      console.log("Disable iframe highlight");
      disableHighlight();
    } else if (event.data.type === "toggle-iframe-highlight") {
      var _enabled = event.data.enabled !== undefined ? event.data.enabled : !highlightEnabled;
      console.log("Toggle iframe highlight to:", _enabled);
      if (_enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "update-selected-element") {
      var selector = event.data.selector;
      console.log("Update selected element with selector:", selector);
      if (selector) {
        try {
          var element = document.querySelector(selector);
          console.log("Found element by selector:", element);
          updateSelectedHighlight(element);
        } catch (error) {
          console.warn("Failed to select element:", error);
          updateSelectedHighlight(null);
        }
      } else {
        updateSelectedHighlight(null);
      }
    } else if (event.data.type === "clear-selected-element") {
      console.log("Clear selected element");
      updateSelectedHighlight(null);
    }
  }

  // 启用高亮功能
  function enableHighlight() {
    console.log("Enabling highlight");
    document.addEventListener("mouseover", handleMouseOver, true);
    document.addEventListener("mouseout", handleMouseOut, true);
    document.addEventListener("click", handleClick, true);
    highlightEnabled = true;
    overlay.style.display = "block";
  }

  // 禁用高亮功能
  function disableHighlight() {
    console.log("Disabling highlight");
    highlightEnabled = false;
    // 保持事件监听器，但通过 highlightEnabled 变量控制行为
    // 这样可以保留选中状态的显示
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    // 不隐藏 selectedBox 和 selectedLabel，保留选中状态
  }

  // 完全禁用高亮功能（移除所有监听器）
  function fullyDisableHighlight() {
    console.log("Fully disabling highlight");
    highlightEnabled = false;
    document.removeEventListener("mouseover", handleMouseOver, true);
    document.removeEventListener("mouseout", handleMouseOut, true);
    document.removeEventListener("click", handleClick, true);
    overlay.style.display = "none";
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    selectedBox.style.display = "none";
    selectedLabel.style.display = "none";
  }

  // 添加事件监听
  enableHighlight();
  window.addEventListener("message", handleParentMessage);

  // 暴露全局函数供外部调用
  window.__iframeHighlightControl = {
    enable: enableHighlight,
    disable: disableHighlight,
    fullyDisable: fullyDisableHighlight,
    isEnabled: function isEnabled() {
      return highlightEnabled;
    },
    getSelectedElement: function getSelectedElement() {
      return selectedElement;
    },
    updateSelected: updateSelectedHighlight,
    // 通过消息发送开关控制
    sendToggleMessage: function sendToggleMessage(enabled) {
      window.parent.postMessage({
        type: 'iframe-highlight-status',
        enabled: enabled || highlightEnabled,
        source: 'iframe-highlight-injector'
      }, '*');
    }
  };

  // 通知父窗口脚本已加载
  try {
    window.parent.postMessage({
      type: "iframe-highlight-ready",
      data: {
        url: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: Date.now()
      },
      source: "iframe-highlight-injector"
    }, "*");
  } catch (error) {
    console.warn("无法发送就绪消息到父窗口:", error);
  }

  // 清理函数
  window.__iframeHighlightCleanup = function () {
    fullyDisableHighlight();
    window.removeEventListener("message", handleParentMessage);
    if (overlay.parentElement) {
      overlay.parentElement.removeChild(overlay);
    }
    delete window.__iframeHighlightInitialized;
    delete window.__iframeHighlightCleanup;
  };
})();

</script>

<script>
/**
 * Iframe 元素高亮注入脚本
 * 需要在目标网站中引入此脚本来支持跨域 iframe 高亮功能
 *
 * 使用方法：
 * 1. 将此脚本添加到目标网站的 HTML 中
 * 2. 或通过浏览器扩展、用户脚本等方式注入
 */

(function () {
  "use strict";

  // 检查是否在 iframe 中
  if (window.self === window.top) {
    return; // 不在 iframe 中，不执行
  }

  // 检查是否已经初始化过
  if (window.__iframeHighlightInitialized) {
    return;
  }
  window.__iframeHighlightInitialized = true;
  console.log("Iframe 高亮脚本已加载");

  // 创建高亮覆盖层
  var overlay = document.createElement("div");
  overlay.id = "iframe-highlight-overlay";
  overlay.style.cssText = "\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: 999999;\n    overflow: hidden;\n  ";

  // 创建悬停高亮框（虚线边框）
  var highlightBox = document.createElement("div");
  highlightBox.id = "iframe-highlight-box";
  highlightBox.style.cssText = "\n    position: absolute;\n    border: 2px dashed #007AFF;\n    background: rgba(0, 122, 255, 0.08);\n    pointer-events: none;\n    display: none;\n    transition: all 0.1s ease;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n    border-radius: 2px;\n  ";

  // 创建选中节点的常驻高亮框（实线边框）
  var selectedBox = document.createElement("div");
  selectedBox.id = "iframe-selected-box";
  selectedBox.style.cssText = "\n    position: absolute;\n    border: 2px solid #007AFF;\n    pointer-events: none;\n    display: none;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 107, 53, 0.4);\n    border-radius: 2px;\n    z-index: 1000000;\n  ";

  // 创建悬停标签显示
  var tagLabel = document.createElement("div");
  tagLabel.id = "iframe-tag-label";
  tagLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 2px 6px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 2px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000001;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n    font-weight: 500;\n  ";

  // 创建选中节点标签
  var selectedLabel = document.createElement("div");
  selectedLabel.id = "iframe-selected-label";
  selectedLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 3px 8px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 3px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000002;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n    font-weight: 600;\n  ";
  overlay.appendChild(highlightBox);
  overlay.appendChild(selectedBox);
  overlay.appendChild(tagLabel);
  overlay.appendChild(selectedLabel);
  document.body.appendChild(overlay);

  // 存储当前选中的元素
  var selectedElement = null;
  var highlightEnabled = false;

  // 更新选中元素的高亮显示
  function updateSelectedHighlight(element) {
    console.log("updateSelectedHighlight called with:", element);
    if (!element) {
      selectedBox.style.display = "none";
      selectedLabel.style.display = "none";
      selectedElement = null;
      console.log("Cleared selected highlight");
      return;
    }
    selectedElement = element;
    var rect = element.getBoundingClientRect();
    console.log("Selected element rect:", rect);

    // 更新选中高亮框位置
    selectedBox.style.display = "block";
    selectedBox.style.left = "".concat(rect.left - 2, "px");
    selectedBox.style.top = "".concat(rect.top - 2, "px");
    selectedBox.style.width = "".concat(rect.width + 4, "px");
    selectedBox.style.height = "".concat(rect.height + 4, "px");

    // 更新选中标签位置和内容
    selectedLabel.style.display = "block";
    selectedLabel.textContent = "\u2713 <".concat(element.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 28;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 5) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    var labelWidth = selectedLabel.offsetWidth || 100; // 预估宽度
    if (labelLeft + labelWidth > window.innerWidth - 10) {
      labelLeft = window.innerWidth - labelWidth - 10;
    }
    selectedLabel.style.left = "".concat(Math.max(5, labelLeft), "px");
    selectedLabel.style.top = "".concat(labelTop, "px");
    console.log("Selected highlight positioned at:", {
      left: selectedBox.style.left,
      top: selectedBox.style.top,
      width: selectedBox.style.width,
      height: selectedBox.style.height
    });
  }
  function getElementSelector(element) {
    if (!(element instanceof Element)) throw new Error('Argument must be a DOM element');
    var segments = [];
    var current = element;
    while (current !== document.documentElement) {
      var selector = '';
      // 优先检查唯一ID
      if (current.id && document.querySelectorAll("#".concat(current.id)).length === 1) {
        segments.unshift("#".concat(current.id));
        break; // ID唯一，无需继续向上
      }

      // 生成类名选择器（取第一个有效类名）
      var classes = Array.from(current.classList).filter(function (c) {
        return !c.startsWith('js-');
      });
      var className = classes.length > 0 ? ".".concat(classes[0]) : '';

      // 生成位置索引（nth-child）
      var tag = current.tagName.toLowerCase();
      if (!className) {
        var siblings = Array.from(current.parentNode.children);
        var index = siblings.findIndex(function (el) {
          return el === current;
        }) + 1;
        selector = "".concat(tag, ":nth-child(").concat(index, ")");
      } else {
        selector = className;
      }
      segments.unshift(selector);
      current = current.parentElement;
    }

    // 处理根元素
    if (current === document.documentElement) {
      segments.unshift('html');
    }
    return segments.join(' > ');
  }

  // 获取元素文本内容
  function getElementText(element) {
    var _element$textContent;
    if (element.tagName === "INPUT") {
      return element.value || element.placeholder || "";
    }
    if (element.tagName === "TEXTAREA") {
      return element.value || element.placeholder || "";
    }
    var text = ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) || "";
    return text.length > 50 ? text.substring(0, 50) + "..." : text;
  }

  // 获取元素属性信息
  function getElementAttributes(element) {
    var attrs = {};
    for (var i = 0; i < element.attributes.length; i++) {
      var attr = element.attributes[i];
      attrs[attr.name] = attr.value;
    }
    return attrs;
  }

  // 鼠标悬停事件处理
  function handleMouseOver(e) {
    if (!highlightEnabled) return;
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免高亮 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 如果是已选中的元素，不显示悬停高亮
    if (target === selectedElement) {
      highlightBox.style.display = "none";
      tagLabel.style.display = "none";
      return;
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);

    // 更新悬停高亮框位置
    highlightBox.style.display = "block";
    highlightBox.style.left = "".concat(rect.left - 2, "px");
    highlightBox.style.top = "".concat(rect.top - 2, "px");
    highlightBox.style.width = "".concat(rect.width + 4, "px");
    highlightBox.style.height = "".concat(rect.height + 4, "px");

    // 更新标签位置和内容
    tagLabel.style.display = "block";
    tagLabel.textContent = "<".concat(target.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 22;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 0) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    if (labelLeft + tagLabel.offsetWidth > window.innerWidth) {
      labelLeft = window.innerWidth - tagLabel.offsetWidth - 5;
    }
    tagLabel.style.left = "".concat(Math.max(0, labelLeft), "px");
    tagLabel.style.top = "".concat(labelTop, "px");

    // 发送消息到父窗口
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 鼠标离开事件处理
  function handleMouseOut(e) {
    if (!highlightEnabled) return;
    var relatedTarget = e.relatedTarget;

    // 如果鼠标移动到高亮相关元素上，不隐藏高亮
    if (relatedTarget && (relatedTarget === highlightBox || relatedTarget === tagLabel || relatedTarget === overlay || relatedTarget === selectedBox || relatedTarget === selectedLabel)) {
      return;
    }
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: null,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 点击事件处理
  function handleClick(e) {
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免处理 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 检查是否是交互元素，这些元素需要保留默认行为
    var isInteractiveElement = ['input', 'textarea', 'select', 'button', 'a'].includes(target.tagName.toLowerCase());

    // 如果高亮功能启用，对于非交互元素阻止默认行为和事件传播
    if (highlightEnabled) {
      e.preventDefault();
      e.stopPropagation();
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);
    console.log("Element clicked:", {
      tagName: target.tagName,
      selector: selector,
      rect: rect
    });

    // 立即更新选中高亮
    updateSelectedHighlight(target);

    // 隐藏悬停高亮，因为现在是选中状态
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-click",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 监听来自父窗口的消息
  function handleParentMessage(event) {
    console.log("Received message from parent:", event.data);
    if (event.data.type === "iframe-highlight-toggle") {
      var enabled = event.data.enabled;
      console.log("Highlight toggle:", enabled);
      if (enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "enable-iframe-highlight") {
      console.log("Enable iframe highlight");
      enableHighlight();
    } else if (event.data.type === "disable-iframe-highlight") {
      console.log("Disable iframe highlight");
      disableHighlight();
    } else if (event.data.type === "toggle-iframe-highlight") {
      var _enabled = event.data.enabled !== undefined ? event.data.enabled : !highlightEnabled;
      console.log("Toggle iframe highlight to:", _enabled);
      if (_enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "update-selected-element") {
      var selector = event.data.selector;
      console.log("Update selected element with selector:", selector);
      if (selector) {
        try {
          var element = document.querySelector(selector);
          console.log("Found element by selector:", element);
          updateSelectedHighlight(element);
        } catch (error) {
          console.warn("Failed to select element:", error);
          updateSelectedHighlight(null);
        }
      } else {
        updateSelectedHighlight(null);
      }
    } else if (event.data.type === "clear-selected-element") {
      console.log("Clear selected element");
      updateSelectedHighlight(null);
    }
  }

  // 启用高亮功能
  function enableHighlight() {
    console.log("Enabling highlight");
    document.addEventListener("mouseover", handleMouseOver, true);
    document.addEventListener("mouseout", handleMouseOut, true);
    document.addEventListener("click", handleClick, true);
    highlightEnabled = true;
    overlay.style.display = "block";
  }

  // 禁用高亮功能
  function disableHighlight() {
    console.log("Disabling highlight");
    highlightEnabled = false;
    // 保持事件监听器，但通过 highlightEnabled 变量控制行为
    // 这样可以保留选中状态的显示
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    // 不隐藏 selectedBox 和 selectedLabel，保留选中状态
  }

  // 完全禁用高亮功能（移除所有监听器）
  function fullyDisableHighlight() {
    console.log("Fully disabling highlight");
    highlightEnabled = false;
    document.removeEventListener("mouseover", handleMouseOver, true);
    document.removeEventListener("mouseout", handleMouseOut, true);
    document.removeEventListener("click", handleClick, true);
    overlay.style.display = "none";
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    selectedBox.style.display = "none";
    selectedLabel.style.display = "none";
  }

  // 添加事件监听
  enableHighlight();
  window.addEventListener("message", handleParentMessage);

  // 暴露全局函数供外部调用
  window.__iframeHighlightControl = {
    enable: enableHighlight,
    disable: disableHighlight,
    fullyDisable: fullyDisableHighlight,
    isEnabled: function isEnabled() {
      return highlightEnabled;
    },
    getSelectedElement: function getSelectedElement() {
      return selectedElement;
    },
    updateSelected: updateSelectedHighlight,
    // 通过消息发送开关控制
    sendToggleMessage: function sendToggleMessage(enabled) {
      window.parent.postMessage({
        type: 'iframe-highlight-status',
        enabled: enabled || highlightEnabled,
        source: 'iframe-highlight-injector'
      }, '*');
    }
  };

  // 通知父窗口脚本已加载
  try {
    window.parent.postMessage({
      type: "iframe-highlight-ready",
      data: {
        url: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: Date.now()
      },
      source: "iframe-highlight-injector"
    }, "*");
  } catch (error) {
    console.warn("无法发送就绪消息到父窗口:", error);
  }

  // 清理函数
  window.__iframeHighlightCleanup = function () {
    fullyDisableHighlight();
    window.removeEventListener("message", handleParentMessage);
    if (overlay.parentElement) {
      overlay.parentElement.removeChild(overlay);
    }
    delete window.__iframeHighlightInitialized;
    delete window.__iframeHighlightCleanup;
  };
})();

</script>
<style>
#minimax-floating-ball {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 12px;
  background: #222222;
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: #F8F8F8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  z-index: 9999;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

#minimax-floating-ball:hover {
  transform: translateY(-2px);
  background: #383838;
}
.minimax-ball-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.minimax-logo-wave {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20overflow%3D%27visible%27%20style%3D%27display%3A%20block%3B%27%20viewBox%3D%270%200%20170.136%20138.225%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cg%20id%3D%27Frame%202116748449%27%3E%3Cpath%20id%3D%27Subtract%27%20d%3D%27M170%20101.783C170%20105.144%20168.49%20108.327%20165.886%20110.453L134.963%20135.702C132.964%20137.334%20130.463%20138.225%20127.883%20138.225H10.4938C4.69824%20138.225%200%20133.527%200%20127.732V39.2289C0%2035.8597%201.51758%2032.6698%204.13162%2030.5442L38.5402%202.56547C40.536%200.942662%2043.0298%200.0567377%2045.602%200.0567377H159.506C165.302%200.0567377%20170%204.75498%20170%2010.5506V101.783Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Subtract_2%27%20d%3D%27M149.011%2094.4632C149.011%2096.1471%20148.253%2097.7415%20146.946%2098.8043L125.893%20115.936C124.895%20116.748%20123.648%20117.191%20122.361%20117.191H24.6479C22.716%20117.191%2021.15%20115.625%2021.15%20113.693V46.1166C21.15%2044.4267%2021.9135%2042.8274%2023.2274%2041.7648L47.367%2022.2437C48.3638%2021.4376%2049.607%2020.9982%2050.8888%2020.9988L145.514%2021.0427C147.446%2021.0436%20149.011%2022.6094%20149.011%2024.5406V94.4632Z%27%20fill%3D%27white%27%20style%3D%27fill%3Awhite%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Rectangle%20111142564%27%20d%3D%27M42.111%2080.8025C42.111%2077.7115%2044.6167%2075.2057%2047.7077%2075.2057H60.9999C64.0908%2075.2057%2066.5966%2077.7115%2066.5966%2080.8025V121.029H42.111V80.8025Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Rectangle%20111142567%27%20d%3D%27M79.1894%2080.8025C79.1894%2077.7115%2081.6952%2075.2057%2084.7861%2075.2057H98.0783C101.169%2075.2057%20103.675%2077.7115%20103.675%2080.8025V121.029H79.1894V80.8025Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 11px;
  background-color: #8FD1FF;
  border-radius: 4px;
}

.minimax-ball-text {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.minimax-close-icon {
  margin-left: 8px;
  font-size: 16px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.minimax-close-icon:hover {
  opacity: 1;
}
</style>
<div id="minimax-floating-ball" style="opacity: 1; transform: translateY(0px);">
  <div class="minimax-ball-content">
    <div class="minimax-logo-wave"></div>
    <span class="minimax-ball-text">Created by MiniMax Agent</span>
  </div>
  <div class="minimax-close-icon">×</div>
</div>
<script>
// Initialize floating ball functionality
function initFloatingBall() {
  const ball = document.getElementById('minimax-floating-ball');
  if (!ball) return;

  // Initial animation
  ball.style.opacity = '0';
  ball.style.transform = 'translateY(20px)';

  setTimeout(() => {
    ball.style.opacity = '1';
    ball.style.transform = 'translateY(0)';
  }, 500);

  // Handle logo click
  const ballContent = ball.querySelector('.minimax-ball-content');
  ballContent.addEventListener('click', function (e) {
    e.stopPropagation();
    window.open('https://agent.minimaxi.com/', '_blank');
    ball.style.transform = 'scale(0.95)';
    setTimeout(() => {
      ball.style.transform = 'scale(1)';
    }, 100);
  });

  // Handle close button click
  const closeIcon = ball.querySelector('.minimax-close-icon');
  closeIcon.addEventListener('click', function (e) {
    e.stopPropagation();
    ball.style.opacity = '0';
    ball.style.transform = 'translateY(20px)';

    setTimeout(() => {
      ball.style.display = 'none';
    }, 300);
  });
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', initFloatingBall); 
</script>

</body></html>