head>
     
      
    
    
      
       
      
    
    <链接 关系="样式表" 链接地址="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <样式>
        /* ============================================================
           全局重置 & 基础 (原样保留)
           ============================================================ */
        * {
            margin: 0;
            内边距: 0;
            box-sizing: border-box;
        }

        :根 {
            --gold-1: #bf953f;
            --gold-2: #fcf6ba;
            --gold-3: #b38728;
            --gold-4: #fbf5b7;
            --gold-glow: rgba(191, 149, 63, 0.35);
            --bg-deep: #0a0806;
            --bg-card: rgba(18, 15, 12, 0.70);
            --border-gold-subtle: rgba(191, 149, 63, 0.18);
            --text-primary: #f5f0eb;
            --text-secondary: #a89888;
            --radius: 18px;
            --transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --shadow-card: 0 12px 50px rgba(0, 0, 0, 0.5);
            --highlight-glow: rgba(251, 191, 36, 0.15);
            --highlight-border: rgba(251, 191, 36, 0.35);
            --highlight-bg: rgba(251, 191, 36, 0.04);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-deep);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(191, 149, 63, 0.10) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(120, 80, 30, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 20% 100%, rgba(60, 40, 20, 0.04) 0%, transparent 40%),
                #0a0806;
            z-index: 0;
            pointer-events: none;
        }
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
            opacity: 0.3;
            pointer-events: none;
            z-index: 0;
        }

        ::-webkit-scrollbar {
            width: 5px;
        }
        ::-webkit-scrollbar-track {
            background: #0a0806;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--gold-3);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--gold-1);
        }

        #particles-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .app-wrapper {
            position: relative;
            z-index: 1;
            display: flex;
            min-height: 100vh;
        }

        /* ============================================================
           左侧面板 (伸缩式)
           ============================================================ */
        .side-panel {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 380px;
            background: rgba(10, 8, 6, 0.92);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(191, 149, 63, 0.15);
            z-index: 100;
            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            transform: translateX(0);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 4px 0 60px rgba(0, 0, 0, 0.6);
        }

        .side-panel.collapsed {
            transform: translateX(-100%);
            box-shadow: none;
        }

        .panel-toggle-fixed {
            position: fixed;
            top: 50%;
            left: 380px;
            transform: translateY(-50%);
            width: 44px;
            height: 80px;
            background: linear-gradient(135deg, rgba(191, 149, 63, 0.2), rgba(10, 8, 6, 0.9));
            border: 1px solid rgba(191, 149, 63, 0.2);
            border-left: none;
            border-radius: 0 12px 12px 0;
            color: var(--gold-1);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 150;
            transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s, color 0.5s;
            backdrop-filter: blur(8px);
        }
        .side-panel.collapsed~.panel-toggle-fixed {
            left: 0;
        }
        .panel-toggle-fixed:hover {
            background: rgba(191, 149, 63, 0.25);
            color: var(--gold-2);
            box-shadow: 0 0 30px rgba(191, 149, 63, 0.1);
        }
        .panel-toggle-fixed .fa-chevron-left,
        .panel-toggle-fixed .fa-chevron-right {
            transition: opacity 0.3s;
        }
        .panel-toggle-fixed .fa-chevron-right {
            display: none;
        }
        .side-panel.collapsed~.panel-toggle-fixed .fa-chevron-left {
            display: none;
        }
        .side-panel.collapsed~.panel-toggle-fixed .fa-chevron-right {
            display: inline-block;
        }

        .panel-header {
            padding: 24px 28px 16px;
            border-bottom: 1px solid rgba(191, 149, 63, 0.08);
            flex-shrink: 0;
        }
        .panel-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--gold-2), var(--gold-1), var(--gold-3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 1px;
        }
        .panel-header p {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
            letter-spacing: 0.5px;
        }

        .panel-body {
            padding: 20px 28px 28px;
            flex: 1;
            overflow-y: auto;
        }
        .panel-body .form-group {
            margin-bottom: 18px;
        }
        .panel-body .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 6px;
            letter-spacing: 0.3px;
        }
        .panel-body .form-group label i {
            color: var(--gold-1);
            margin-right: 6px;
            width: 16px;
        }
        .panel-body .form-group input,
        .panel-body .form-group select {
            width: 100%;
            padding: 10px 14px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(191, 149, 63, 0.15);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            transition: var(--transition);
            outline: none;
        }
        .panel-body .form-group input:focus,
        .panel-body .form-group select:focus {
            border-color: var(--gold-1);
            box-shadow: 0 0 25px rgba(191, 149, 63, 0.06);
            background: rgba(255, 255, 255, 0.06);
        }
        .panel-body .form-group input::placeholder {
            color: rgba(168, 152, 136, 0.4);
        }
        .panel-body .form-group select option {
            background: #1a1510;
            color: var(--text-primary);
        }

        .btn-submit {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            border: none;
            border-radius: 10px;
            color: #0a0806;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 0 30px rgba(191, 149, 63, 0.1);
            letter-spacing: 0.5px;
            margin-top: 6px;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 40px rgba(191, 149, 63, 0.2);
        }
        .btn-submit:active {
            transform: scale(0.98);
        }

        .panel-footer {
            padding: 14px 28px;
            border-top: 1px solid rgba(191, 149, 63, 0.06);
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .panel-footer span {
            color: var(--gold-1);
        }
        .btn-clear-all {
            background: transparent;
            border: 1px solid rgba(191, 149, 63, 0.1);
            color: var(--text-secondary);
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Inter', sans-serif;
        }
        .btn-clear-all:hover {
            border-color: rgba(191, 149, 63, 0.3);
            color: var(--gold-1);
        }

        /* ============================================================
           主内容区域
           ============================================================ */
        .main-content {
            flex: 1;
            margin-left: 380px;
            padding: 20px 32px 40px;
            transition: margin-left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            min-height: 100vh;
            position: relative;
        }

        .side-panel.collapsed~.main-content {
            margin-left: 0;
        }

        /* ============================================================
           顶部导航
           ============================================================ */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0 24px;
            border-bottom: 1px solid rgba(191, 149, 63, 0.08);
            margin-bottom: 28px;
            flex-wrap: wrap;
            gap: 14px;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
        }
        .navbar-brand .logo-icon {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #0a0806;
            box-shadow: 0 0 30px rgba(191, 149, 63, 0.2);
            transition: var(--transition);
        }
        .navbar-brand:hover .logo-icon {
            transform: scale(1.05) rotate(-2deg);
            box-shadow: 0 0 50px rgba(191, 149, 63, 0.3);
        }
        .navbar-brand .brand-text {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 2px;
            background: linear-gradient(135deg, var(--gold-2), var(--gold-1), var(--gold-3), var(--gold-2));
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: goldShine 6s ease-in-out infinite alternate;
        }
        @keyframes goldShine {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }
        .navbar-brand .brand-sub {
            font-size: 11px;
            color: var(--text-secondary);
            letter-spacing: 4px;
            font-weight: 300;
            -webkit-text-fill-color: var(--text-secondary);
        }

        .navbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .navbar-date {
            font-size: 13px;
            color: var(--text-secondary);
            padding: 6px 18px;
            border-radius: 30px;
            border: 1px solid rgba(191, 149, 63, 0.12);
            backdrop-filter: blur(8px);
            background: rgba(255, 255, 255, 0.02);
        }
        .navbar-date i {
            color: var(--gold-1);
            margin-right: 8px;
        }

        /* ============================================================
           统计卡片 (5个)
           ============================================================ */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px;
            margin-bottom: 28px;
        }
        @media (max-width: 1200px) {
            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        .stat-card {
            position: relative;
            background: var(--bg-card);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(191, 149, 63, 0.10);
            border-radius: var(--radius);
            padding: 18px 20px 16px;
            transition: var(--transition);
            cursor: default;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius);
            padding: 2px;
            background: linear-gradient(135deg, rgba(191, 149, 63, 0.12), rgba(191, 149, 63, 0.02), rgba(191, 149, 63, 0.12));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            animation: borderBreathe 4.8s ease-in-out infinite;
        }
        .stat-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 0%, rgba(191, 149, 63, 0.05), transparent 70%);
            pointer-events: none;
            animation: glowBreathe 4.8s ease-in-out infinite;
            border-radius: var(--radius);
        }
        @keyframes borderBreathe {
            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.015);
            }
        }
        @keyframes glowBreathe {
            0%,
            100% {
                opacity: 0.2;
                transform: scale(0.98);
            }
            50% {
                opacity: 0.7;
                transform: scale(1);
            }
        }
        .stat-card:hover {
            transform: translateY(-4px);
            border-color: rgba(191, 149, 63, 0.25);
            box-shadow: var(--shadow-card);
        }
        .stat-card .stat-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
            letter-spacing: 0.6px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            position: relative;
            z-index: 2;
        }
        .stat-card .stat-label i {
            color: var(--gold-1);
            font-size: 13px;
        }
        .stat-card .stat-value {
            font-family: 'Playfair Display', serif;
            font-size: 30px;
            font-weight: 700;
            letter-spacing: 0.3px;
            line-height: 1.1;
            position: relative;
            z-index: 2;
            background: linear-gradient(135deg, #f5f0eb 20%, var(--gold-2) 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .stat-card .stat-sub {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
            position: relative;
            z-index: 2;
        }
        .stat-card .stat-icon-bg {
            position: absolute;
            right: 12px;
            bottom: 12px;
            font-size: 48px;
            opacity: 0.04;
            color: var(--gold-1);
            z-index: 0;
        }

        /* ============================================================
           年度汇总卡片 (按年份逐行显示)
           ============================================================ */
        .summary-card {
            position: relative;
            background: var(--bg-card);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(191, 149, 63, 0.08);
            border-radius: var(--radius);
            padding: 18px 24px 16px;
            margin-bottom: 28px;
            transition: var(--transition);
            overflow: hidden;
        }
        .summary-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius);
            padding: 2px;
            background: linear-gradient(135deg, rgba(191, 149, 63, 0.08), rgba(191, 149, 63, 0.01), rgba(191, 149, 63, 0.08));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            animation: borderBreathe 5.2s ease-in-out infinite 0.3s;
        }
        .summary-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 70% 30%, rgba(191, 149, 63, 0.03), transparent 60%);
            pointer-events: none;
            animation: glowBreathe 5.2s ease-in-out infinite 0.3s;
            border-radius: var(--radius);
        }
        .summary-card:hover {
            border-color: rgba(191, 149, 63, 0.18);
            box-shadow: var(--shadow-card);
        }
        .summary-card .card-title {
            font-family: 'Playfair Display', serif;
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0.3px;
            margin-bottom: 12px;
            position: relative;
            z-index: 2;
        }
        .summary-card .card-title i {
            color: var(--gold-1);
            margin-right: 10px;
        }

        .summary-rows-container {
            position: relative;
            z-index: 2;
        }
        .summary-year-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0;
            border-bottom: 1px solid rgba(191, 149, 63, 0.06);
            padding: 10px 0;
        }
        .summary-year-row:last-child {
            border-bottom: none;
        }
        .summary-item {
            flex: 1 0 0;
            text-align: center;
            padding: 4px 2px;
            min-width: 60px;
            border-right: 1px solid rgba(191, 149, 63, 0.06);
        }
        .summary-item:last-child {
            border-right: none;
        }
        .summary-item .s-label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 2px;
        }
        .summary-item .s-value {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .summary-item .s-value.gold {
            color: var(--gold-1);
        }
        .summary-item .s-value.green {
            color: #7ddfb0;
        }
        .summary-item .s-value.red {
            color: #f87171;
        }
        .summary-item .s-value.year-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--gold-2);
            letter-spacing: 1px;
        }

        @media (max-width: 768px) {
            .summary-item .s-value {
                font-size: 15px;
            }
            .summary-item .s-label {
                font-size: 9px;
            }
            .summary-year-row {
                gap: 4px 0;
            }
            .summary-item {
                flex: 1 0 20%;
                border-right: none;
                border-bottom: 1px solid rgba(191, 149, 63, 0.04);
                padding: 6px 2px;
            }
            .summary-item .s-value.year-value {
                font-size: 18px;
            }
        }
        @media (max-width: 480px) {
            .summary-item {
                flex: 1 0 33%;
            }
        }

        /* ============================================================
           双栏：来源分布 + 月度趋势
           ============================================================ */
        .charts-row {
            display: grid;
            grid-template-columns: 1fr 1.8fr;
            gap: 22px;
            margin-bottom: 28px;
        }
        @media (max-width: 1024px) {
            .charts-row {
                grid-template-columns: 1fr;
            }
        }

        .chart-card {
            position: relative;
            background: var(--bg-card);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(191, 149, 63, 0.08);
            border-radius: var(--radius);
            padding: 20px 22px 18px;
            transition: var(--transition);
            overflow: hidden;
        }
        .chart-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius);
            padding: 2px;
            background: linear-gradient(135deg, rgba(191, 149, 63, 0.08), rgba(191, 149, 63, 0.01), rgba(191, 149, 63, 0.08));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            animation: borderBreathe 4.6s ease-in-out infinite 0.6s;
        }
        .chart-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 40% 20%, rgba(191, 149, 63, 0.03), transparent 60%);
            pointer-events: none;
            animation: glowBreathe 4.6s ease-in-out infinite 0.6s;
            border-radius: var(--radius);
        }
        .chart-card:hover {
            border-color: rgba(191, 149, 63, 0.18);
            box-shadow: var(--shadow-card);
        }
        .chart-card .card-title {
            font-family: 'Playfair Display', serif;
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0.3px;
            margin-bottom: 14px;
            position: relative;
            z-index: 2;
        }
        .chart-card .card-title i {
            color: var(--gold-1);
            margin-right: 10px;
        }
        .chart-container {
            width: 100%;
            height: 210px;
            position: relative;
            z-index: 2;
        }
        .chart-container canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /* ============================================================
           收入记录表格
           ============================================================ */
        .table-section {
            position: relative;
            background: var(--bg-card);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(191, 149, 63, 0.08);
            border-radius: var(--radius);
            padding: 20px 22px 18px;
            transition: var(--transition);
            overflow: hidden;
        }
        .table-section::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius);
            padding: 2px;
            background: linear-gradient(135deg, rgba(191, 149, 63, 0.08), rgba(191, 149, 63, 0.01), rgba(191, 149, 63, 0.08));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            animation: borderBreathe 5s ease-in-out infinite 0.8s;
        }
        .table-section::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 60% 80%, rgba(191, 149, 63, 0.03), transparent 60%);
            pointer-events: none;
            animation: glowBreathe 5s ease-in-out infinite 0.8s;
            border-radius: var(--radius);
        }
        .table-section .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 12px;
            position: relative;
            z-index: 2;
        }
        .table-section .table-header .card-title {
            font-family: 'Playfair Display', serif;
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0.3px;
        }
        .table-section .table-header .card-title i {
            color: var(--gold-1);
            margin-right: 10px;
        }
        .table-section .table-header .record-count {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .table-section .table-header .record-count span {
            color: var(--gold-1);
            font-weight: 600;
        }

        .table-wrap {
            overflow-x: auto;
            position: relative;
            z-index: 2;
        }
        .table-wrap table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            min-width: 900px;
        }
        .table-wrap table th {
            text-align: left;
            padding: 10px 12px;
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid rgba(191, 149, 63, 0.06);
        }
        .table-wrap table td {
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            vertical-align: middle;
            transition: background 0.4s ease;
        }
        .table-wrap table tr:hover td {
            background: rgba(191, 149, 63, 0.03);
        }
        .table-wrap table tr.row-partial td {
            border-left: 3px solid #fbbf24;
            background: rgba(251, 191, 36, 0.03);
            box-shadow: inset 0 0 30px rgba(251, 191, 36, 0.02);
        }
        .table-wrap table tr.row-partial:hover td {
            background: rgba(251, 191, 36, 0.06);
        }
        .table-wrap table tr.row-unpaid td {
            border-left: 3px solid #f87171;
            background: rgba(248, 113, 113, 0.03);
            box-shadow: inset 0 0 30px rgba(248, 113, 113, 0.02);
        }
        .table-wrap table tr.row-unpaid:hover td {
            background: rgba(248, 113, 113, 0.06);
        }
        .table-wrap table tr.row-paid td {
            border-left: 3px solid transparent;
        }

        .table-wrap table .status-badge {
            display: inline-block;
            padding: 2px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 500;
            background: rgba(125, 223, 176, 0.06);
            color: #7ddfb0;
            border: 1px solid rgba(125, 223, 176, 0.08);
        }
        .table-wrap table .status-badge.partial {
            color: #fbbf24;
            background: rgba(251, 191, 36, 0.06);
            border-color: rgba(251, 191, 36, 0.08);
        }
        .table-wrap table .status-badge.unpaid {
            color: #f87171;
            background: rgba(248, 113, 113, 0.06);
            border-color: rgba(248, 113, 113, 0.08);
        }

        .table-wrap table .action-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: var(--transition);
            font-size: 14px;
        }
        .table-wrap table .action-btn:hover {
            color: var(--gold-1);
            background: rgba(191, 149, 63, 0.08);
        }
        .table-wrap table .action-btn.danger:hover {
            color: #f87171;
            background: rgba(248, 113, 113, 0.08);
        }

        .source-tag {
            display: inline-block;
            padding: 2px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            border: 1px solid transparent;
        }
        .source-tag.技术标 {
            background: rgba(191, 149, 63, 0.15);
            color: #fcf6ba;
            border-color: rgba(191, 149, 63, 0.2);
        }
        .source-tag.方案 {
            background: rgba(96, 165, 250, 0.15);
            color: #93c5fd;
            border-color: rgba(96, 165, 250, 0.2);
        }
        .source-tag.咨询 {
            background: rgba(74, 222, 128, 0.12);
            color: #6ee7b7;
            border-color: rgba(74, 222, 128, 0.15);
        }
        .source-tag.设计 {
            background: rgba(196, 181, 253, 0.12);
            color: #c4b5fd;
            border-color: rgba(196, 181, 253, 0.15);
        }
        .source-tag.其他 {
            background: rgba(168, 152, 136, 0.15);
            color: #c4b5a0;
            border-color: rgba(168, 152, 136, 0.15);
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
            font-size: 14px;
            position: relative;
            z-index: 2;
        }
        .empty-state i {
            font-size: 40px;
            color: rgba(191, 149, 63, 0.15);
            margin-bottom: 12px;
            display: block;
        }

        .footer {
            margin-top: 32px;
            padding-top: 22px;
            border-top: 1px solid rgba(191, 149, 63, 0.06);
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
            position: relative;
            z-index: 2;
        }
        .footer span {
            color: var(--gold-1);
            margin: 0 6px;
        }

        .btn-export {
            background: rgba(191, 149, 63, 0.1);
            border: 1px solid rgba(191, 149, 63, 0.25);
            color: var(--gold-1);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Inter', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 8px;
        }
        .btn-export:hover {
            background: rgba(191, 149, 63, 0.2);
            color: var(--gold-2);
            border-color: var(--gold-1);
        }

        /* 响应式 */
        @media (max-width: 1024px) {
            .side-panel {
                width: 340px;
            }
            .panel-toggle-fixed {
                left: 340px;
            }
            .side-panel.collapsed~.panel-toggle-fixed {
                left: 0;
            }
            .main-content {
                margin-left: 340px;
            }
            .side-panel.collapsed~.main-content {
                margin-left: 0;
            }
        }
        @media (max-width: 768px) {
            .side-panel {
                width: 300px;
            }
            .panel-toggle-fixed {
                left: 300px;
                width: 40px;
                height: 70px;
            }
            .side-panel.collapsed~.panel-toggle-fixed {
                left: 0;
            }
            .main-content {
                margin-left: 0;
                padding: 12px 14px 30px;
            }
            .side-panel.collapsed~.main-content {
                margin-left: 0;
            }
            .navbar {
                flex-direction: column;
                align-items: stretch;
            }
            .navbar-right {
                justify-content: space-between;
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }
            .stat-card .stat-value {
                font-size: 24px;
            }
        }
        @media (max-width: 480px) {
            .side-panel {
                width: 280px;
            }
            .panel-toggle-fixed {
                left: 280px;
                width: 36px;
                height: 60px;
                font-size: 16px;
            }
            .side-panel.collapsed~.panel-toggle-fixed {
                left: 0;
            }
            .main-content {
                margin-left: 0;
                padding: 8px 10px 20px;
            }
            .side-panel.collapsed~.main-content {
                margin-left: 0;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        .editing-mode .btn-submit {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
        }
        .editing-mode .panel-header h2::after {
            content: ' ✎ 编辑中';
            font-size: 14px;
            color: #fbbf24;
            -webkit-text-fill-color: #fbbf24;
            margin-left: 8px;
        }
    </style>
<style type="text/css">.qa-sdk-wrapper {
  position: fixed;
  width: 400px;
  right: -600px;
  max-height: 530px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease-in-out;
  background: #fff;
}

.qa-sdk-close-btn {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 16px;
}

.qa-sdk-close-btn:hover {
  border-radius: 50%;
  background-color: #d5d9df;
}

#qa-sdk-iframe {
  width: 400px;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .qa-sdk-wrapper{
    width: 356px;
  }
  #qa-sdk-iframe {
    width: 356px;
  }
}
</style><style id="ai-assist-webType-style">
    .ai-assist-highlight {
      background: yellow;
    }
    @media print {
      #ai-assist-root-bangs,
      #ai-assist-root-bilibili,
      #ai-assist-root-new {
        display: none !important;
      }
    }
  </style></head>
<body><div id="lockOverlay" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.92); z-index: 99999; display: none; justify-content: center; align-items: center; flex-direction: column; color: rgb(255, 255, 255); font-family: Inter, sans-serif;">
                    <div style="background: #1a1510; padding: 40px 32px; border-radius: 18px; border: 1px solid #bf953f; text-align: center; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.8);">
                        <div style="font-size: 48px; margin-bottom: 12px;">🔒</div>
                        <h2 style="color: #bf953f; margin-bottom: 8px; font-family: 'Playfair Display', serif; font-weight: 700;">请输入密码</h2>
                        <p style="color: #a89888; font-size: 13px; margin-bottom: 20px;">此页面已加密，请输入访问密码</p>
                        <input type="password" id="pwdInput" placeholder="输入密码" style="width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(191, 149, 63, 0.3); background: rgb(10, 8, 6); color: rgb(255, 255, 255); font-size: 16px; outline: none; transition: border 0.3s;">
                        <button id="pwdBtn" style="
                            margin-top: 18px; padding: 12px 0; width: 100%; border: none; border-radius: 10px;
                            background: linear-gradient(135deg, #bf953f, #b38728); color: #0a0806;
                            font-weight: 600; cursor: pointer; font-size: 16px; transition: transform 0.2s;
                        ">解锁</button>
                        <p id="pwdError" style="color: rgb(248, 113, 113); font-size: 13px; margin-top: 14px; display: none; min-height: 20px;">❌ 密码错误，请重试</p>
                    </div>
                </div><div id="lockOverlay" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.92); z-index: 99999; display: none; justify-content: center; align-items: center; flex-direction: column; color: rgb(255, 255, 255); font-family: Inter, sans-serif;">
                    <div style="background: #1a1510; padding: 40px 32px; border-radius: 18px; border: 1px solid #bf953f; text-align: center; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.8);">
                        <div style="font-size: 48px; margin-bottom: 12px;">🔒</div>
                        <h2 style="color: #bf953f; margin-bottom: 8px; font-family: 'Playfair Display', serif; font-weight: 700;">请输入密码</h2>
                        <p style="color: #a89888; font-size: 13px; margin-bottom: 20px;">此页面已加密，请输入访问密码</p>
                        <input type="password" id="pwdInput" placeholder="输入密码" style="width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(191, 149, 63, 0.3); background: rgb(10, 8, 6); color: rgb(255, 255, 255); font-size: 16px; outline: none; transition: border 0.3s;">
                        <button id="pwdBtn" style="
                            margin-top: 18px; padding: 12px 0; width: 100%; border: none; border-radius: 10px;
                            background: linear-gradient(135deg, #bf953f, #b38728); color: #0a0806;
                            font-weight: 600; cursor: pointer; font-size: 16px; transition: transform 0.2s;
                        ">解锁</button>
                        <p id="pwdError" style="color: rgb(248, 113, 113); font-size: 13px; margin-top: 14px; display: none; min-height: 20px;">❌ 密码错误，请重试</p>
                    </div>
                </div>

    <!-- ===== 密码锁遮罩（由 JavaScript 动态生成） ===== -->

    <canvas id="particles-canvas" width="1872" height="975"></canvas>

    <div class="app-wrapper">

        <!-- ===== 侧边面板 ===== -->
        <aside class="side-panel" id="sidePanel">
            <div class="panel-header">
                <h2><i class="fas fa-pen-fancy" style="color:var(--gold-1);margin-right:8px;"></i>录入收入</h2>
                <p>添加新的收入记录 · 所有字段必填</p>
            </div>
            <div class="panel-body" id="panelBody">
                <form id="entryForm" autocomplete="off">
                    <div class="form-group">
                        <label for="inputDate"><i class="far fa-calendar-alt"></i>日期</label>
                        <input type="date" id="inputDate" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputSource"><i class="fas fa-tag"></i>来源</label>
                        <select id="inputSource" required="">
                            <option value="">选择来源</option>
                            <option value="技术标">技术标</option>
                            <option value="方案">方案</option>
                            <option value="咨询">咨询</option>
                            <option value="设计">设计</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="inputName"><i class="fas fa-file-signature"></i>名称</label>
                        <input type="text" id="inputName" placeholder="项目/合同名称" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputAmount"><i class="fas fa-dollar-sign"></i>合同金额</label>
                        <input type="number" id="inputAmount" placeholder="0.00" min="0" step="0.01" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputPaid"><i class="fas fa-hand-holding-usd"></i>已收金额</label>
                        <input type="number" id="inputPaid" placeholder="0.00" min="0" step="0.01" value="0">
                    </div>
                    <div class="form-group">
                        <label for="inputStatus"><i class="fas fa-circle-check"></i>收款状态</label>
                        <select id="inputStatus">
                            <option value="未收款">未收款</option>
                            <option value="部分收款" selected="">部分收款</option>
                            <option value="已收款">已收款</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="inputLqt"><i class="fas fa-coins"></i>零钱通转入</label>
                        <input type="number" id="inputLqt" placeholder="0.00" min="0" step="0.01" value="0">
                    </div>
                    <div class="form-group">
                        <label for="inputLqtNote"><i class="fas fa-pencil-alt"></i>零钱通备注</label>
                        <input type="text" id="inputLqtNote" placeholder="备注（选填）">
                    </div>
                    <button type="submit" class="btn-submit" id="submitBtn"><i class="fas fa-save" style="margin-right:8px;"></i>保存记录</button>
                </form>
            </div>
            <div class="panel-footer">
                <span><i class="fas fa-database"></i> 共 <span id="totalRecordsCount">26</span> 条</span>
                <button class="btn-clear-all" id="clearAllBtn"><i class="fas fa-trash-alt"></i> 清空全部</button>
            </div>
        </aside>

        <button class="panel-toggle-fixed" id="panelToggle" aria-label="切换面板">
            <i class="fas fa-chevron-left"></i>
            <i class="fas fa-chevron-right"></i>
        </button>

        <!-- ===== 主内容（添加 id="mainContent"） ===== -->
        <main class="main-content" id="mainContent" style="display: block;">
            <nav class="navbar">
                <a href="#" class="navbar-brand">
                    <div class="logo-icon"><i class="fas fa-crown"></i></div>
                    <div>
                        <div class="brand-text">GoldTrack</div>
                        <div class="brand-sub">收入追踪 · 专业版</div>
                    </div>
                </a>
                <div class="navbar-right">
                    <div class="navbar-date">
                        <i class="far fa-calendar-alt"></i>
                        <span id="dateText">2026年8月17日周一</span>
                    </div>
                </div>
            </nav>

            <!-- 统计卡片 -->
            <div class="stats-grid" id="statsGrid">
                <div class="stat-card">
                    <div class="stat-label"><i class="fas fa-file-contract"></i>合同额</div>
                    <div class="stat-value" id="statContract">¥154,920</div>
                    <div class="stat-sub">总合同金额</div>
                    <div class="stat-icon-bg"><i class="fas fa-file-signature"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label"><i class="fas fa-check-circle"></i>已收款</div>
                    <div class="stat-value" id="statPaid">¥140,920</div>
                    <div class="stat-sub">已收金额总计</div>
                    <div class="stat-icon-bg"><i class="fas fa-hand-holding-usd"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label"><i class="fas fa-clock"></i>未收款</div>
                    <div class="stat-value" id="statUnpaid">¥14,000</div>
                    <div class="stat-sub">合同额 - 已收款</div>
                    <div class="stat-icon-bg"><i class="fas fa-hourglass-half"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label"><i class="fas fa-percent"></i>回收率</div>
                    <div class="stat-value" id="statRecovery">91.0%</div>
                    <div class="stat-sub">已收 / 合同额</div>
                    <div class="stat-icon-bg"><i class="fas fa-chart-pie"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label"><i class="fas fa-coins"></i>零钱通累计</div>
                    <div class="stat-value" id="statLqt">¥134,000</div>
                    <div class="stat-sub">转入零钱通总额</div>
                    <div class="stat-icon-bg"><i class="fas fa-piggy-bank"></i></div>
                </div>
            </div>

            <!-- 年度汇总 -->
            <div class="summary-card" id="summaryCard">
                <div class="card-title"><i class="fas fa-chart-simple"></i>年度汇总</div>
                <div class="summary-rows-container" id="summaryRowsContainer">
                    <div class="summary-year-row">
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-calendar-alt"></i> 年份</span>
                            <span class="s-value year-value">2026</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-file-contract"></i>合同总额</span>
                            <span class="s-value gold">¥91,020</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-check-circle"></i>已收</span>
                            <span class="s-value gold">¥77,020</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-clock"></i>未收</span>
                            <span class="s-value">¥14,000</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-percent"></i>回收率</span>
                            <span class="s-value green">84.6%</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-coins"></i>零钱通转入</span>
                            <span class="s-value gold">¥73,500</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-arrow-trend-up"></i>同比增长</span>
                            <span class="s-value" style="color:#7ddfb0">+42.4%</span>
                        </div>
                    </div>
                
                    <div class="summary-year-row">
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-calendar-alt"></i> 年份</span>
                            <span class="s-value year-value">2025</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-file-contract"></i>合同总额</span>
                            <span class="s-value gold">¥63,900</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-check-circle"></i>已收</span>
                            <span class="s-value gold">¥63,900</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-clock"></i>未收</span>
                            <span class="s-value">¥0</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-percent"></i>回收率</span>
                            <span class="s-value green">100.0%</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-coins"></i>零钱通转入</span>
                            <span class="s-value gold">¥60,500</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-arrow-trend-up"></i>同比增长</span>
                            <span class="s-value" style="color:var(--text-secondary)">--</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 双栏图表 -->
            <div class="charts-row">
                <div class="chart-card">
                    <div class="card-title"><i class="fas fa-chart-pie"></i>来源分布</div>
                    <div class="chart-container"><canvas id="sourceChart" width="454" height="210" style="width: 454.344px; height: 210px;"></canvas></div>
                </div>
                <div class="chart-card">
                    <div class="card-title"><i class="fas fa-chart-line"></i>月度趋势</div>
                    <div class="chart-container"><canvas id="trendChart" width="854" height="210" style="width: 854.656px; height: 210px;"></canvas></div>
                </div>
            </div>

            <!-- 表格 -->
            <div class="table-section">
                <div class="table-header">
                    <div class="card-title"><i class="fas fa-list-ul"></i>收入记录</div>
                    <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                        <div class="record-count">共 <span id="tableCount">26</span> 条记录</div>
                        <button class="btn-export" id="exportCsvBtn"><i class="fas fa-file-csv"></i> 导出CSV</button>
                        <button class="btn-export" id="exportHtmlBtn"><i class="fas fa-file-code"></i> 导出数据HTML</button>
                    </div>
                </div>
                <div class="table-wrap" id="tableWrap">
                <table>
                    <thead><tr><th>日期</th><th>来源</th><th>名称</th><th>合同金额</th><th>收款状态</th><th>已收金额</th><th>零钱通转入</th><th>零钱通备注</th><th style="text-align:center;">操作</th></tr></thead>
                    <tbody>
            
                    <tr class="row-unpaid">
                        <td>2026-08-16</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜四季华庭小区（1主2陪）</td>
                        <td>¥4,000</td>
                        <td><span class="status-badge unpaid">未收款</span></td>
                        <td>¥0</td>
                        <td>¥0</td>
                        <td>-</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786905025608.66" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786905025608.66" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-08-07</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜盛昱府小区（1主2陪）</td>
                        <td>¥4,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥4,000</td>
                        <td>¥4,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904985095.7917" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904985095.7917" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-07-31</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜中山壹品小区（1主2陪）</td>
                        <td>¥5,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥5,000</td>
                        <td>¥5,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904865288.2285" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904865288.2285" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-07-12</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜金甬铁路物流园剥土（1主2陪）</td>
                        <td>¥5,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥5,000</td>
                        <td>¥5,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904832726.5293" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904832726.5293" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-07-10</td>
                        <td><span class="source-tag 其他">其他</span></td>
                        <td>周向东打凿</td>
                        <td>¥20,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥20,000</td>
                        <td>¥20,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904776817.9795" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904776817.9795" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-06-23</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜水岸名院小区（1主1陪）</td>
                        <td>¥3,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥3,000</td>
                        <td>¥3,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904698971.4065" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904698971.4065" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-06-23</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜桂语江南小区（2主1陪）</td>
                        <td>¥5,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥5,000</td>
                        <td>¥5,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904733540.8313" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904733540.8313" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-06-10</td>
                        <td><span class="source-tag 其他">其他</span></td>
                        <td>韦溯源 中山项目场布模型</td>
                        <td>¥3,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥3,000</td>
                        <td>¥2,500</td>
                        <td>500给妈妈买手表</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904633675.907" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904633675.907" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-partial">
                        <td>2026-05-31</td>
                        <td><span class="source-tag 设计">设计</span></td>
                        <td>卢剑杰 金华荣浩厂房设计费</td>
                        <td>¥20,000</td>
                        <td><span class="status-badge partial">部分收款</span></td>
                        <td>¥10,000</td>
                        <td>¥10,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904583359.1409" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904583359.1409" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-05-22</td>
                        <td><span class="source-tag 方案">方案</span></td>
                        <td>严总外架及模板方案</td>
                        <td>¥3,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥3,000</td>
                        <td>¥3,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904544799.562" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904544799.562" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-05-20</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜六石水利 （1主1陪）</td>
                        <td>¥3,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥3,000</td>
                        <td>¥3,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904432927.0945" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904432927.0945" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-05-20</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜红椿新苑小区（1主）</td>
                        <td>¥2,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥2,000</td>
                        <td>¥2,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904482353.6633" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904482353.6633" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-04-10</td>
                        <td><span class="source-tag 咨询">咨询</span></td>
                        <td>义乌工商学院专家费</td>
                        <td>¥960</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥960</td>
                        <td>¥0</td>
                        <td>在建行卡上</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904327211.8137" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904327211.8137" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-04-10</td>
                        <td><span class="source-tag 咨询">咨询</span></td>
                        <td>义乌工商学院专家费2</td>
                        <td>¥1,760</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥1,760</td>
                        <td>¥0</td>
                        <td>在建行卡上</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904354909.9004" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904354909.9004" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-03-26</td>
                        <td><span class="source-tag 技术标">技术标</span></td>
                        <td>许涵炜金象科技技术标</td>
                        <td>¥11,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥11,000</td>
                        <td>¥11,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904264225.603" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904264225.603" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2026-03-01</td>
                        <td><span class="source-tag 其他">其他</span></td>
                        <td>公司内刊稿费</td>
                        <td>¥300</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥300</td>
                        <td>¥0</td>
                        <td>零用花掉了</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904233607.4712" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904233607.4712" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-12-31</td>
                        <td><span class="source-tag 方案">方案</span></td>
                        <td>何晓亮中吉乌铁路方案</td>
                        <td>¥5,400</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥5,400</td>
                        <td>¥5,000</td>
                        <td>400零用花掉了</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904081806.41" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904081806.41" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-12-31</td>
                        <td><span class="source-tag 咨询">咨询</span></td>
                        <td>卢剑杰现金</td>
                        <td>¥1,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥1,000</td>
                        <td>¥0</td>
                        <td>现金钱包里</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904143850.1296" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904143850.1296" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-12-30</td>
                        <td><span class="source-tag 设计">设计</span></td>
                        <td>卢剑杰义乌设计费</td>
                        <td>¥15,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥15,000</td>
                        <td>¥15,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786904045284.5625" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786904045284.5625" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-12-10</td>
                        <td><span class="source-tag 方案">方案</span></td>
                        <td>东白山鹊桥会雕塑外架方案</td>
                        <td>¥2,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥2,000</td>
                        <td>¥0</td>
                        <td>零用花掉了</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903969345.4436" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903969345.4436" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-08-20</td>
                        <td><span class="source-tag 其他">其他</span></td>
                        <td>QC公司奖金</td>
                        <td>¥11,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥11,000</td>
                        <td>¥11,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903908182.3606" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903908182.3606" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-08-09</td>
                        <td><span class="source-tag 方案">方案</span></td>
                        <td>范向伟吉米赛斯高支模</td>
                        <td>¥4,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥4,000</td>
                        <td>¥4,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903764239.7024" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903764239.7024" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-08-08</td>
                        <td><span class="source-tag 咨询">咨询</span></td>
                        <td>文化艺术中心恐龙深化图</td>
                        <td>¥1,500</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥1,500</td>
                        <td>¥1,500</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903731772.4983" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903731772.4983" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-06-11</td>
                        <td><span class="source-tag 其他">其他</span></td>
                        <td>视界观中心医院遮阳帘动画</td>
                        <td>¥6,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥6,000</td>
                        <td>¥6,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903644937.2383" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903644937.2383" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-04-28</td>
                        <td><span class="source-tag 方案">方案</span></td>
                        <td>范向伟金华工地方案</td>
                        <td>¥10,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥10,000</td>
                        <td>¥10,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903589200.0667" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903589200.0667" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                
                    <tr class="row-paid">
                        <td>2025-03-12</td>
                        <td><span class="source-tag 其他">其他</span></td>
                        <td>视界观文化艺术中心遮阳帘动画</td>
                        <td>¥8,000</td>
                        <td><span class="status-badge ">已收款</span></td>
                        <td>¥8,000</td>
                        <td>¥8,000</td>
                        <td>无</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="1786903529693.9272" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="1786903529693.9272" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                </tbody></table></div>
            </div>

            <div class="footer">
                <span>✦</span> GoldTrack · 黑金收入追踪 <span>✦</span> 数据保存在本地
            </div>
        </main>
    </div>

    <!-- ============================================================ -->
    <!-- 密码锁脚本（置于页面底部，确保 DOM 加载完成） -->
    <script>
        (function() {
            // 设置您的密码
            const PASSWORD = '0829';

            // 创建密码遮罩层
            function createLock() {
                const overlay = document.createElement('div');
                overlay.id = 'lockOverlay';
                overlay.style.cssText = `
                    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                    background: rgba(0,0,0,0.92); z-index: 99999;
                    display: flex; justify-content: center; align-items: center;
                    flex-direction: column;
                    color: #fff; font-family: 'Inter', sans-serif;
                `;
                overlay.innerHTML = `
                    <div style="background: #1a1510; padding: 40px 32px; border-radius: 18px; border: 1px solid #bf953f; text-align: center; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.8);">
                        <div style="font-size: 48px; margin-bottom: 12px;">🔒</div>
                        <h2 style="color: #bf953f; margin-bottom: 8px; font-family: 'Playfair Display', serif; font-weight: 700;">请输入密码</h2>
                        <p style="color: #a89888; font-size: 13px; margin-bottom: 20px;">此页面已加密，请输入访问密码</p>
                        <input type="password" id="pwdInput" placeholder="输入密码" style="
                            width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(191,149,63,0.3);
                            background: #0a0806; color: #fff; font-size: 16px; outline: none; transition: border 0.3s;
                        ">
                        <button id="pwdBtn" style="
                            margin-top: 18px; padding: 12px 0; width: 100%; border: none; border-radius: 10px;
                            background: linear-gradient(135deg, #bf953f, #b38728); color: #0a0806;
                            font-weight: 600; cursor: pointer; font-size: 16px; transition: transform 0.2s;
                        ">解锁</button>
                        <p id="pwdError" style="color: #f87171; font-size: 13px; margin-top: 14px; display: none; min-height: 20px;">❌ 密码错误，请重试</p>
                    </div>
                `;
                document.body.prepend(overlay);

                // 获取元素
                const input = document.getElementById('pwdInput');
                const btn = document.getElementById('pwdBtn');
                const error = document.getElementById('pwdError');

                // 验证函数
                function verify() {
                    if (input.value === PASSWORD) {
                        // 密码正确，隐藏遮罩，显示主内容
                        overlay.style.display = 'none';
                        document.getElementById('mainContent').style.display = 'block';
                        // 触发图表渲染（如果尚未渲染）
                        if (typeof renderAll === 'function') {
                            renderAll();
                        }
                    } else {
                        error.style.display = 'block';
                        input.value = '';
                        input.focus();
                        // 抖动效果（可选）
                        input.style.borderColor = '#f87171';
                        setTimeout(() => { input.style.borderColor = 'rgba(191,149,63,0.3)'; }, 500);
                    }
                }

                // 绑定事件
                btn.addEventListener('click', verify);
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') verify();
                });
                // 输入时隐藏错误
                input.addEventListener('input', function() {
                    error.style.display = 'none';
                    input.style.borderColor = 'rgba(191,149,63,0.3)';
                });

                // 自动聚焦
                setTimeout(() => input.focus(), 300);
            }

            // 页面加载后先隐藏主内容，再创建锁
            window.addEventListener('load', function() {
                const main = document.getElementById('mainContent');
                if (main) main.style.display = 'none';
                createLock();
            });
        })();
    </script>

    <!-- ===== 原有业务逻辑脚本 ===== -->
    <script>
        // ================================================================
        //  粒子背景 (保留)
        // ================================================================
        (function initParticles() {
            const canvas = document.getElementById('particles-canvas');
            const ctx = canvas.getContext('2d');
            let w, h;
            const particles = [];
            const COUNT = 100;

            function resize() {
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
            }
            window.addEventListener('resize', resize);
            resize();

            class Particle {
                constructor() { this.reset(); }
                reset() {
                    this.x = Math.random() * w;
                    this.y = Math.random() * h;
                    this.size = Math.random() * 2 + 0.6;
                    this.speedX = (Math.random() - 0.5) * 0.4;
                    this.speedY = (Math.random() - 0.5) * 0.4;
                    this.opacity = Math.random() * 0.35 + 0.08;
                }
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    if (this.x < 0 || this.x > w || this.y < 0 || this.y > h) this.reset();
                }
                draw() {
                    const alpha = this.opacity * (0.7 + 0.3 * Math.sin(Date.now() * 0.0007 + this.x * 0.01));
                    const grad = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 4);
                    grad.addColorStop(0, `rgba(191, 149, 63, ${alpha * 0.8})`);
                    grad.addColorStop(1, `rgba(191, 149, 63, 0)`);
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size * 4, 0, Math.PI * 2);
                    ctx.fillStyle = grad;
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(252, 246, 186, ${alpha * 0.6})`;
                    ctx.shadowColor = `rgba(191, 149, 63, ${alpha * 0.25})`;
                    ctx.shadowBlur = 12;
                    ctx.fill();
                    ctx.shadowBlur = 0;
                }
            }
            for (let i = 0; i < COUNT; i++) particles.push(new Particle());

            function animate() {
                ctx.clearRect(0, 0, w, h);
                particles.forEach(p => { p.update();
                    p.draw(); });
                for (let i = 0; i < particles.length; i++) {
                    for (let j = i + 1; j < particles.length; j++) {
                        const dx = particles[i].x - particles[j].x;
                        const dy = particles[i].y - particles[j].y;
                        const dist = Math.sqrt(dx * dx + dy * dy);
                        if (dist < 110) {
                            const alpha = (1 - dist / 110) * 0.06;
                            ctx.beginPath();
                            ctx.moveTo(particles[i].x, particles[i].y);
                            ctx.lineTo(particles[j].x, particles[j].y);
                            ctx.strokeStyle = `rgba(191, 149, 63, ${alpha})`;
                            ctx.lineWidth = 0.5;
                            ctx.stroke();
                        }
                    }
                }
                requestAnimationFrame(animate);
            }
            animate();
        })();

        // ================================================================
        //  日期
        // ================================================================
        (function updateDate() {
            document.getElementById('dateText').textContent = new Date().toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                weekday: 'short'
            });
        })();

        // ================================================================
        //  数据管理
        // ================================================================
        const STORAGE_KEY = 'goldtrack_data';
        // 内嵌数据（导出HTML时会替换）
        const EMBEDDED_DATA = [{"id":1786903529693.9272,"date":"2025-03-12","source":"其他","name":"视界观文化艺术中心遮阳帘动画","contractAmount":8000,"paidAmount":8000,"paymentStatus":"已收款","transferToLqt":8000,"lqtNote":"无"},{"id":1786903589200.0667,"date":"2025-04-28","source":"方案","name":"范向伟金华工地方案","contractAmount":10000,"paidAmount":10000,"paymentStatus":"已收款","transferToLqt":10000,"lqtNote":"无"},{"id":1786903644937.2383,"date":"2025-06-11","source":"其他","name":"视界观中心医院遮阳帘动画","contractAmount":6000,"paidAmount":6000,"paymentStatus":"已收款","transferToLqt":6000,"lqtNote":"无"},{"id":1786903731772.4983,"date":"2025-08-08","source":"咨询","name":"文化艺术中心恐龙深化图","contractAmount":1500,"paidAmount":1500,"paymentStatus":"已收款","transferToLqt":1500,"lqtNote":"无"},{"id":1786903764239.7024,"date":"2025-08-09","source":"方案","name":"范向伟吉米赛斯高支模","contractAmount":4000,"paidAmount":4000,"paymentStatus":"已收款","transferToLqt":4000,"lqtNote":"无"},{"id":1786903908182.3606,"date":"2025-08-20","source":"其他","name":"QC公司奖金","contractAmount":11000,"paidAmount":11000,"paymentStatus":"已收款","transferToLqt":11000,"lqtNote":"无"},{"id":1786903969345.4436,"date":"2025-12-10","source":"方案","name":"东白山鹊桥会雕塑外架方案","contractAmount":2000,"paidAmount":2000,"paymentStatus":"已收款","transferToLqt":0,"lqtNote":"零用花掉了"},{"id":1786904045284.5625,"date":"2025-12-30","source":"设计","name":"卢剑杰义乌设计费","contractAmount":15000,"paidAmount":15000,"paymentStatus":"已收款","transferToLqt":15000,"lqtNote":"无"},{"id":1786904081806.41,"date":"2025-12-31","source":"方案","name":"何晓亮中吉乌铁路方案","contractAmount":5400,"paidAmount":5400,"paymentStatus":"已收款","transferToLqt":5000,"lqtNote":"400零用花掉了"},{"id":1786904143850.1296,"date":"2025-12-31","source":"咨询","name":"卢剑杰现金","contractAmount":1000,"paidAmount":1000,"paymentStatus":"已收款","transferToLqt":0,"lqtNote":"现金钱包里"},{"id":1786904233607.4712,"date":"2026-03-01","source":"其他","name":"公司内刊稿费","contractAmount":300,"paidAmount":300,"paymentStatus":"已收款","transferToLqt":0,"lqtNote":"零用花掉了"},{"id":1786904264225.603,"date":"2026-03-26","source":"技术标","name":"许涵炜金象科技技术标","contractAmount":11000,"paidAmount":11000,"paymentStatus":"已收款","transferToLqt":11000,"lqtNote":"无"},{"id":1786904327211.8137,"date":"2026-04-10","source":"咨询","name":"义乌工商学院专家费","contractAmount":960,"paidAmount":960,"paymentStatus":"已收款","transferToLqt":0,"lqtNote":"在建行卡上"},{"id":1786904354909.9004,"date":"2026-04-10","source":"咨询","name":"义乌工商学院专家费2","contractAmount":1760,"paidAmount":1760,"paymentStatus":"已收款","transferToLqt":0,"lqtNote":"在建行卡上"},{"id":1786904432927.0945,"date":"2026-05-20","source":"技术标","name":"许涵炜六石水利 （1主1陪）","contractAmount":3000,"paidAmount":3000,"paymentStatus":"已收款","transferToLqt":3000,"lqtNote":"无"},{"id":1786904482353.6633,"date":"2026-05-20","source":"技术标","name":"许涵炜红椿新苑小区（1主）","contractAmount":2000,"paidAmount":2000,"paymentStatus":"已收款","transferToLqt":2000,"lqtNote":"无"},{"id":1786904544799.562,"date":"2026-05-22","source":"方案","name":"严总外架及模板方案","contractAmount":3000,"paidAmount":3000,"paymentStatus":"已收款","transferToLqt":3000,"lqtNote":"无"},{"id":1786904583359.1409,"date":"2026-05-31","source":"设计","name":"卢剑杰 金华荣浩厂房设计费","contractAmount":20000,"paidAmount":10000,"paymentStatus":"部分收款","transferToLqt":10000,"lqtNote":"无"},{"id":1786904633675.907,"date":"2026-06-10","source":"其他","name":"韦溯源 中山项目场布模型","contractAmount":3000,"paidAmount":3000,"paymentStatus":"已收款","transferToLqt":2500,"lqtNote":"500给妈妈买手表"},{"id":1786904698971.4065,"date":"2026-06-23","source":"技术标","name":"许涵炜水岸名院小区（1主1陪）","contractAmount":3000,"paidAmount":3000,"paymentStatus":"已收款","transferToLqt":3000,"lqtNote":"无"},{"id":1786904733540.8313,"date":"2026-06-23","source":"技术标","name":"许涵炜桂语江南小区（2主1陪）","contractAmount":5000,"paidAmount":5000,"paymentStatus":"已收款","transferToLqt":5000,"lqtNote":"无"},{"id":1786904776817.9795,"date":"2026-07-10","source":"其他","name":"周向东打凿","contractAmount":20000,"paidAmount":20000,"paymentStatus":"已收款","transferToLqt":20000,"lqtNote":"无"},{"id":1786904832726.5293,"date":"2026-07-12","source":"技术标","name":"许涵炜金甬铁路物流园剥土（1主2陪）","contractAmount":5000,"paidAmount":5000,"paymentStatus":"已收款","transferToLqt":5000,"lqtNote":"无"},{"id":1786904865288.2285,"date":"2026-07-31","source":"技术标","name":"许涵炜中山壹品小区（1主2陪）","contractAmount":5000,"paidAmount":5000,"paymentStatus":"已收款","transferToLqt":5000,"lqtNote":"无"},{"id":1786904985095.7917,"date":"2026-08-07","source":"技术标","name":"许涵炜盛昱府小区（1主2陪）","contractAmount":4000,"paidAmount":4000,"paymentStatus":"已收款","transferToLqt":4000,"lqtNote":"无"},{"id":1786905025608.66,"date":"2026-08-16","source":"技术标","name":"许涵炜四季华庭小区（1主2陪）","contractAmount":4000,"paidAmount":0,"paymentStatus":"未收款","transferToLqt":0,"lqtNote":""}];
        let records = [];
        let editingId = null;

        function loadData() {
            try {
                const raw = localStorage.getItem(STORAGE_KEY);
                if (raw) {
                    records = JSON.parse(raw);
                    records.forEach(r => { if (!r.id) r.id = Date.now() + Math.random() * 1000; });
                    return;
                }
            } catch (_) { /* ignore */ }
            if (EMBEDDED_DATA && EMBEDDED_DATA.length > 0) {
                records = JSON.parse(JSON.stringify(EMBEDDED_DATA));
                records.forEach(r => { if (!r.id) r.id = Date.now() + Math.random() * 1000; });
                saveData();
                return;
            }
            records = generateSampleData();
            saveData();
        }

        function saveData() {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(records));
        }

        function generateSampleData() {
            const sources = ['技术标', '方案', '咨询', '设计', '其他'];
            const names = ['智慧城市项目', '企业数字化转型', 'AI平台建设', '云架构设计', '安全评估', '数据中台', '移动端开发', '运维服务'];
            const now = new Date();
            const year = now.getFullYear();
            const data = [];
            for (let i = 0; i < 18; i++) {
                const m = Math.floor(Math.random() * 12) + 1;
                const d = Math.floor(Math.random() * 28) + 1;
                const date = `${year}-${String(m).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
                const amount = Math.round((Math.random() * 120000 + 20000) / 100) * 100;
                const paid = Math.round((Math.random() * amount) / 100) * 100;
                const status = paid === 0 ? '未收款' : paid === amount ? '已收款' : '部分收款';
                const lqt = Math.round((Math.random() * Math.min(paid, 30000)) / 100) * 100;
                data.push({
                    id: Date.now() + i * 1000 + Math.random() * 1000,
                    date: date,
                    source: sources[i % sources.length],
                    name: names[i % names.length] + (i + 1),
                    contractAmount: amount,
                    paidAmount: paid,
                    paymentStatus: status,
                    transferToLqt: lqt,
                    lqtNote: lqt > 0 ? `转入零钱通 ${i+1}` : ''
                });
            }
            data.sort((a, b) => a.date.localeCompare(b.date));
            return data;
        }

        // ================================================================
        //  工具函数
        // ================================================================
        function calcStats(data) {
            const contractSum = data.reduce((s, r) => s + r.contractAmount, 0);
            const paidSum = data.reduce((s, r) => s + r.paidAmount, 0);
            const unpaidSum = contractSum - paidSum;
            const recovery = contractSum > 0 ? (paidSum / contractSum) * 100 : 0;
            const lqtSum = data.reduce((s, r) => s + (r.transferToLqt || 0), 0);
            return { contractSum, paidSum, unpaidSum, recovery, lqtSum };
        }

        function calcGrowthByYear(yearData, prevYearData) {
            if (!prevYearData || prevYearData.length === 0) return { growth: 0, hasLast: false };
            const prevStats = calcStats(prevYearData);
            if (prevStats.contractSum === 0) return { growth: 0, hasLast: false };
            const currStats = calcStats(yearData);
            const growth = ((currStats.contractSum - prevStats.contractSum) / prevStats.contractSum) * 100;
            return { growth, hasLast: true };
        }

        function calcSourceDistribution(data) {
            const map = {};
            data.forEach(r => {
                const src = r.source || '其他';
                map[src] = (map[src] || 0) + r.contractAmount;
            });
            return map;
        }

        function calcMonthlyTrend(data) {
            const map = {};
            data.forEach(r => {
                const d = new Date(r.date);
                const key = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`;
                if (!map[key]) map[key] = { contract: 0, paid: 0 };
                map[key].contract += r.contractAmount;
                map[key].paid += r.paidAmount;
            });
            const keys = Object.keys(map).sort();
            return keys.map(k => ({ month: k, ...map[k] }));
        }

        // ================================================================
        //  渲染函数
        // ================================================================
        function renderStats(data) {
            const stats = calcStats(data);
            document.getElementById('statContract').textContent = '¥' + stats.contractSum.toLocaleString();
            document.getElementById('statPaid').textContent = '¥' + stats.paidSum.toLocaleString();
            document.getElementById('statUnpaid').textContent = '¥' + stats.unpaidSum.toLocaleString();
            document.getElementById('statRecovery').textContent = stats.recovery.toFixed(1) + '%';
            document.getElementById('statLqt').textContent = '¥' + stats.lqtSum.toLocaleString();
        }

        function renderSummary(data) {
            const container = document.getElementById('summaryRowsContainer');
            if (data.length === 0) {
                container.innerHTML = '<div style="text-align:center;color:var(--text-secondary);padding:20px;">暂无数据</div>';
                return;
            }
            const yearMap = {};
            data.forEach(r => {
                const y = new Date(r.date).getFullYear();
                if (!yearMap[y]) yearMap[y] = [];
                yearMap[y].push(r);
            });
            const years = Object.keys(yearMap).map(Number).sort((a, b) => b - a);
            let html = '';
            years.forEach((year, index) => {
                const yearData = yearMap[year];
                const stats = calcStats(yearData);
                let growthHtml;
                if (index < years.length - 1) {
                    const nextYear = years[index + 1];
                    const prevData = yearMap[nextYear];
                    const growth = calcGrowthByYear(yearData, prevData);
                    growthHtml = growth.hasLast ?
                        (growth.growth > 0 ? '+' : '') + growth.growth.toFixed(1) + '%' :
                        '--';
                } else {
                    growthHtml = '--';
                }
                const growthColor = growthHtml === '--' ? 'var(--text-secondary)' :
                    growthHtml.startsWith('-') ? '#f87171' : '#7ddfb0';
                html += `
                    <div class="summary-year-row">
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-calendar-alt"></i> 年份</span>
                            <span class="s-value year-value">${year}</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-file-contract"></i>合同总额</span>
                            <span class="s-value gold">¥${stats.contractSum.toLocaleString()}</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-check-circle"></i>已收</span>
                            <span class="s-value gold">¥${stats.paidSum.toLocaleString()}</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-clock"></i>未收</span>
                            <span class="s-value">¥${stats.unpaidSum.toLocaleString()}</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-percent"></i>回收率</span>
                            <span class="s-value green">${stats.recovery.toFixed(1)}%</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-coins"></i>零钱通转入</span>
                            <span class="s-value gold">¥${stats.lqtSum.toLocaleString()}</span>
                        </div>
                        <div class="summary-item">
                            <span class="s-label"><i class="fas fa-arrow-trend-up"></i>同比增长</span>
                            <span class="s-value" style="color:${growthColor}">${growthHtml}</span>
                        </div>
                    </div>
                `;
            });
            container.innerHTML = html;
        }

        // ---------- 来源分布（单位：元，完整数字） ----------
        function renderSourceChart(data) {
            const dist = calcSourceDistribution(data);
            const canvas = document.getElementById('sourceChart');
            const ctx = canvas.getContext('2d');
            const rect = canvas.parentElement.getBoundingClientRect();
            const dpr = window.devicePixelRatio || 1;
            const W = rect.width || 300;
            const H = 210;
            canvas.width = W * dpr;
            canvas.height = H * dpr;
            canvas.style.width = W + 'px';
            canvas.style.height = H + 'px';
            ctx.scale(dpr, dpr);

            const colors = ['#bf953f', '#60a5fa', '#4ade80', '#c4b5fd', '#a89888'];
            const sources = ['技术标', '方案', '咨询', '设计', '其他'];
            const values = sources.map(s => dist[s] || 0);
            const maxVal = Math.max(...values, 1);

            ctx.clearRect(0, 0, W, H);
            const pad = { top: 12, bottom: 28, left: 8, right: 8 };
            const chartW = W - pad.left - pad.right;
            const chartH = H - pad.top - pad.bottom;
            const barW = Math.min(32, chartW / values.length * 0.5);

            values.forEach((v, i) => {
                const x = pad.left + (chartW / values.length) * i + (chartW / values.length - barW) / 2;
                const h = (v / maxVal) * chartH;
                const y = pad.top + chartH - h;
                const grad = ctx.createLinearGradient(x, y, x, pad.top + chartH);
                grad.addColorStop(0, colors[i % colors.length]);
                grad.addColorStop(1, '#b38728');
                ctx.fillStyle = grad;
                ctx.shadowColor = 'rgba(191,149,63,0.15)';
                ctx.shadowBlur = 10;
                ctx.beginPath();
                ctx.roundRect(x, y, barW, h, [4, 4, 0, 0]);
                ctx.fill();
                ctx.shadowBlur = 0;
                ctx.fillStyle = 'rgba(245,240,235,0.75)';
                ctx.font = '10px Inter, sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                if (v > 0) ctx.fillText('¥' + v.toLocaleString(), x + barW / 2, y - 4);
                ctx.fillStyle = 'rgba(168,152,136,0.5)';
                ctx.textBaseline = 'top';
                ctx.font = '10px Inter, sans-serif';
                ctx.fillText(sources[i], x + barW / 2, pad.top + chartH + 6);
            });

            if (values.every(v => v === 0)) {
                ctx.fillStyle = 'rgba(168,152,136,0.3)';
                ctx.font = '14px Inter, sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('暂无数据', W / 2, H / 2);
            }
        }

        if (!CanvasRenderingContext2D.prototype.roundRect) {
            CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, radii) {
                const r = Array.isArray(radii) ? radii : [radii, radii, radii, radii];
                const [tl, tr, br, bl] = r.map(v => Math.min(v || 0, Math.min(w, h) / 2));
                this.moveTo(x + tl, y);
                this.lineTo(x + w - tr, y);
                this.quadraticCurveTo(x + w, y, x + w, y + tr);
                this.lineTo(x + w, y + h - br);
                this.quadraticCurveTo(x + w, y + h, x + w - br, y + h);
                this.lineTo(x + bl, y + h);
                this.quadraticCurveTo(x, y + h, x, y + h - bl);
                this.lineTo(x, y + tl);
                this.quadraticCurveTo(x, y, x + tl, y);
                this.closePath();
                return this;
            };
        }

        // ---------- 月度趋势（大幅增加左侧内边距，确保Y轴标签不被裁剪） ----------
        function renderTrendChart(data) {
            const trend = calcMonthlyTrend(data);
            const canvas = document.getElementById('trendChart');
            const ctx = canvas.getContext('2d');
            const rect = canvas.parentElement.getBoundingClientRect();
            const dpr = window.devicePixelRatio || 1;
            const W = rect.width || 300;
            const H = 210;
            canvas.width = W * dpr;
            canvas.height = H * dpr;
            canvas.style.width = W + 'px';
            canvas.style.height = H + 'px';
            ctx.scale(dpr, dpr);
            ctx.clearRect(0, 0, W, H);

            if (trend.length === 0) {
                ctx.fillStyle = 'rgba(168,152,136,0.3)';
                ctx.font = '14px Inter, sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('暂无数据', W / 2, H / 2);
                return;
            }

            // 大幅增加左侧内边距，从32提升到52，确保数字完全可见
            const pad = { top: 14, bottom: 28, left: 52, right: 12 };
            const chartW = W - pad.left - pad.right;
            const chartH = H - pad.top - pad.bottom;
            const maxVal = Math.max(...trend.map(t => t.contract), 1);
            const minVal = Math.min(...trend.map(t => t.contract), 0);
            const range = maxVal - minVal || 1;

            // ---- 1. 网格线（底层） ----
            ctx.strokeStyle = 'rgba(191,149,63,0.05)';
            ctx.lineWidth = 0.5;
            const yLabels = [];
            for (let i = 0; i <= 3; i++) {
                const y = pad.top + (chartH / 3) * i;
                ctx.beginPath();
                ctx.moveTo(pad.left, y);
                ctx.lineTo(W - pad.right, y);
                ctx.stroke();
                const val = maxVal - (range / 3) * i;
                yLabels.push({ y, val });
            }

            // ---- 2. 填充区域 ----
            const points = trend.map((t, i) => ({
                x: pad.left + (i / (trend.length - 1 || 1)) * chartW,
                y: pad.top + chartH - ((t.contract - minVal) / range) * chartH,
                label: t.month.slice(5)
            }));

            const grad = ctx.createLinearGradient(0, pad.top, 0, pad.top + chartH);
            grad.addColorStop(0, 'rgba(191,149,63,0.18)');
            grad.addColorStop(1, 'rgba(191,149,63,0.01)');
            ctx.beginPath();
            ctx.moveTo(points[0].x, pad.top + chartH);
            points.forEach(p => ctx.lineTo(p.x, p.y));
            ctx.lineTo(points[points.length - 1].x, pad.top + chartH);
            ctx.closePath();
            ctx.fillStyle = grad;
            ctx.fill();

            // ---- 3. 折线 ----
            ctx.beginPath();
            points.forEach((p, i) => {
                if (i === 0) ctx.moveTo(p.x, p.y);
                else ctx.lineTo(p.x, p.y);
            });
            ctx.strokeStyle = '#bf953f';
            ctx.lineWidth = 2.5;
            ctx.shadowColor = 'rgba(191,149,63,0.25)';
            ctx.shadowBlur = 14;
            ctx.stroke();
            ctx.shadowBlur = 0;

            // ---- 4. 数据点 ----
            points.forEach(p => {
                const gradDot = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 12);
                gradDot.addColorStop(0, 'rgba(191,149,63,0.6)');
                gradDot.addColorStop(1, 'rgba(191,149,63,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, 12, 0, Math.PI * 2);
                ctx.fillStyle = gradDot;
                ctx.fill();
                ctx.beginPath();
                ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);
                ctx.fillStyle = '#fcf6ba';
                ctx.shadowColor = 'rgba(191,149,63,0.5)';
                ctx.shadowBlur = 16;
                ctx.fill();
                ctx.shadowBlur = 0;
            });

            // ---- 5. X轴月份标签 ----
            const step = Math.max(1, Math.floor(trend.length / 8));
            ctx.fillStyle = 'rgba(168,152,136,0.4)';
            ctx.font = '9px Inter, sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            points.forEach((p, i) => {
                if (i % step === 0 || i === points.length - 1) {
                    ctx.fillText(p.label, p.x, pad.top + chartH + 6);
                }
            });

            // ---- 6. Y轴标签（恢复原字体，使用浅色，增加左侧偏移） ----
            ctx.shadowBlur = 0;
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            ctx.font = '10px Inter, sans-serif';
            ctx.fillStyle = 'rgba(168,152,136,0.7)'; // 恢复为浅灰色
            yLabels.forEach(({ y, val }) => {
                const label = '¥' + Math.round(val).toLocaleString();
                // 由于pad.left增大，标签自然右移，不会被裁剪
                ctx.fillText(label, pad.left - 4, y);
            });
        }

        // ---------- 表格 ----------
        function renderTable(data) {
            const sorted = [...data].sort((a, b) => b.date.localeCompare(a.date));
            const container = document.getElementById('tableWrap');
            document.getElementById('tableCount').textContent = sorted.length;
            document.getElementById('totalRecordsCount').textContent = records.length;

            if (sorted.length === 0) {
                container.innerHTML =
                    `<div class="empty-state"><i class="fas fa-inbox"></i>暂无收入记录，请通过左侧面板录入</div>`;
                return;
            }

            let html = `
                <table>
                    <thead><tr><th>日期</th><th>来源</th><th>名称</th><th>合同金额</th><th>收款状态</th><th>已收金额</th><th>零钱通转入</th><th>零钱通备注</th><th style="text-align:center;">操作</th></tr></thead>
                    <tbody>
            `;
            sorted.forEach(r => {
                let rowClass = 'row-paid';
                if (r.paymentStatus === '部分收款') rowClass = 'row-partial';
                else if (r.paymentStatus === '未收款') rowClass = 'row-unpaid';
                const statusClass = r.paymentStatus === '已收款' ? '' : r.paymentStatus === '部分收款' ? 'partial' :
                    'unpaid';
                const sourceClass = r.source || '其他';
                html += `
                    <tr class="${rowClass}">
                        <td>${r.date}</td>
                        <td><span class="source-tag ${sourceClass}">${sourceClass}</span></td>
                        <td>${r.name || '-'}</td>
                        <td>¥${r.contractAmount.toLocaleString()}</td>
                        <td><span class="status-badge ${statusClass}">${r.paymentStatus}</span></td>
                        <td>¥${r.paidAmount.toLocaleString()}</td>
                        <td>¥${(r.transferToLqt || 0).toLocaleString()}</td>
                        <td>${r.lqtNote || '-'}</td>
                        <td style="text-align:center;white-space:nowrap;">
                            <button class="action-btn" data-id="${r.id}" data-action="edit" title="编辑"><i class="fas fa-pen"></i></button>
                            <button class="action-btn danger" data-id="${r.id}" data-action="delete" title="删除"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                `;
            });
            html += `</tbody></table>`;
            container.innerHTML = html;

            container.querySelectorAll('[data-action="edit"]').forEach(btn => {
                btn.addEventListener('click', function() { editRecord(parseFloat(this.dataset.id)); });
            });
            container.querySelectorAll('[data-action="delete"]').forEach(btn => {
                btn.addEventListener('click', function() {
                    if (confirm('确定要删除这条记录吗？')) deleteRecord(parseFloat(this.dataset.id));
                });
            });
        }

        function renderAll() {
            const data = records;
            renderStats(data);
            renderSummary(data);
            renderSourceChart(data);
            renderTrendChart(data);
            renderTable(data);
            document.getElementById('totalRecordsCount').textContent = records.length;
        }

        // ================================================================
        //  CRUD
        // ================================================================
        function addRecord(data) {
            const newRecord = {
                id: Date.now() + Math.random() * 1000,
                date: data.date,
                source: data.source,
                name: data.name,
                contractAmount: parseFloat(data.contractAmount) || 0,
                paidAmount: parseFloat(data.paidAmount) || 0,
                paymentStatus: data.paymentStatus || '未收款',
                transferToLqt: parseFloat(data.transferToLqt) || 0,
                lqtNote: data.lqtNote || ''
            };
            records.push(newRecord);
            saveData();
            renderAll();
            clearForm();
        }

        function editRecord(id) {
            const record = records.find(r => r.id === id);
            if (!record) return;
            editingId = id;
            document.getElementById('inputDate').value = record.date;
            document.getElementById('inputSource').value = record.source || '';
            document.getElementById('inputName').value = record.name || '';
            document.getElementById('inputAmount').value = record.contractAmount;
            document.getElementById('inputPaid').value = record.paidAmount;
            document.getElementById('inputStatus').value = record.paymentStatus || '未收款';
            document.getElementById('inputLqt').value = record.transferToLqt || 0;
            document.getElementById('inputLqtNote').value = record.lqtNote || '';
            document.getElementById('submitBtn').innerHTML = '<i class="fas fa-pen" style="margin-right:8px;"></i>更新记录';
            document.getElementById('sidePanel').classList.remove('collapsed');
            document.body.classList.add('editing-mode');
            document.getElementById('panelBody').scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        function updateRecord(id, data) {
            const idx = records.findIndex(r => r.id === id);
            if (idx === -1) return;
            records[idx] = { ...records[idx], ...data };
            saveData();
            renderAll();
            clearForm();
        }

        function deleteRecord(id) {
            records = records.filter(r => r.id !== id);
            saveData();
            renderAll();
            if (editingId === id) clearForm();
        }

        function clearAllRecords() {
            if (records.length === 0) return;
            if (confirm('⚠️ 确定要清空所有数据吗？此操作不可撤销！')) {
                records = [];
                saveData();
                renderAll();
                clearForm();
            }
        }

        function clearForm() {
            document.getElementById('entryForm').reset();
            document.getElementById('inputDate').value = new Date().toISOString().slice(0, 10);
            document.getElementById('inputPaid').value = 0;
            document.getElementById('inputLqt').value = 0;
            document.getElementById('inputLqtNote').value = '';
            editingId = null;
            document.body.classList.remove('editing-mode');
            document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save" style="margin-right:8px;"></i>保存记录';
        }

        // ================================================================
        //  导出
        // ================================================================
        function exportToCSV() {
            if (records.length === 0) { alert('暂无数据可导出'); return; }
            const headers = ['日期', '来源', '名称', '合同金额', '已收金额', '收款状态', '零钱通转入', '零钱通备注'];
            const escapeCSV = (val) => {
                if (val === null || val === undefined) return '';
                let str = String(val);
                if (str.includes(',') || str.includes('"') || str.includes('\n')) {
                    str = '"' + str.replace(/"/g, '""') + '"';
                }
                return str;
            };
            const rows = records.map(r => [r.date, r.source || '', r.name || '', r.contractAmount, r.paidAmount, r
                .paymentStatus || '', r.transferToLqt || 0, r.lqtNote || ''
            ]);
            const csvContent = [headers.join(','), ...rows.map(row => row.map(escapeCSV).join(','))].join('\n');
            const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', `收入记录_${new Date().toISOString().slice(0,10)}.csv`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }

        function exportToHTML() {
            const dataClone = JSON.parse(JSON.stringify(records));
            const currentHTML = document.documentElement.outerHTML;
            const dataString = JSON.stringify(dataClone);
            const newHTML = currentHTML.replace(
                /const EMBEDDED_DATA = \[\];/,
                `const EMBEDDED_DATA = ${dataString};`
            );
            const blob = new Blob([newHTML], { type: 'text/html;charset=utf-8' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', `收入追踪_数据嵌入_${new Date().toISOString().slice(0,10)}.html`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }

        // ================================================================
        //  事件绑定
        // ================================================================
        document.getElementById('entryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const date = document.getElementById('inputDate').value;
            const source = document.getElementById('inputSource').value;
            const name = document.getElementById('inputName').value.trim();
            const amount = parseFloat(document.getElementById('inputAmount').value);
            const paid = parseFloat(document.getElementById('inputPaid').value) || 0;
            const status = document.getElementById('inputStatus').value;
            const lqt = parseFloat(document.getElementById('inputLqt').value) || 0;
            const lqtNote = document.getElementById('inputLqtNote').value.trim();

            if (!date || !source || !name || isNaN(amount) || amount <= 0) {
                alert('请完整填写必填字段 (日期、来源、名称、合同金额)');
                return;
            }
            if (paid > amount) { alert('已收金额不能大于合同金额'); return; }

            const data = { date, source, name, contractAmount: amount, paidAmount: paid, paymentStatus: status,
                transferToLqt: lqt, lqtNote };
            if (editingId) updateRecord(editingId, data);
            else addRecord(data);
        });

        document.getElementById('panelToggle').addEventListener('click', function() {
            document.getElementById('sidePanel').classList.toggle('collapsed');
        });

        document.getElementById('clearAllBtn').addEventListener('click', clearAllRecords);
        document.getElementById('exportCsvBtn').addEventListener('click', exportToCSV);
        document.getElementById('exportHtmlBtn').addEventListener('click', exportToHTML);

        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                renderSourceChart(records);
                renderTrendChart(records);
            }, 300);
        });

        // ================================================================
        //  启动（但需要等待密码解锁后调用 renderAll）
        // ================================================================
        // 原启动代码：loadData(); 等，移至密码解锁后执行
        // 在密码锁脚本中，验证成功后调用 renderAll()
        // 所以我们先定义好函数，等待外部调用

        // 暴露全局变量供密码脚本调用
        window.__loadData = loadData;
        window.__renderAll = renderAll;
        window.__setDate = function() {
            document.getElementById('inputDate').value = new Date().toISOString().slice(0, 10);
        };

        // 修正：密码解锁后执行初始化
        // 由于密码锁脚本在页面底部，它会在 load 事件中创建锁，并在验证成功后调用 renderAll
        // 但我们还需要提前加载数据，所以将数据加载放在锁创建之前？不，数据加载可以放在锁验证成功后。
        // 但为了不影响其他功能，我们将 loadData 和 renderAll 的调用推迟到密码验证通过后。

        // 修改密码锁脚本，在验证成功后执行：
        // 1. loadData()
        // 2. 设置日期
        // 3. renderAll()

        // 由于密码锁脚本在下方，我们在此处定义好，并在锁脚本中引用
        // 但我们已经定义了 loadData, renderAll, 以及日期设置，只需在锁脚本中调用即可。

        // 注意：原脚本中 loadData 和 renderAll 已经定义，但原先的启动代码被注释掉
        // 我们将在密码解锁后调用它们。

        // 为了兼容，保留一个初始化函数供锁调用
        window.initApp = function() {
            loadData();
            document.getElementById('inputDate').value = new Date().toISOString().slice(0, 10);
            renderAll();
            console.log('✨ GoldTrack · 黑金收入追踪 专业版 已启动');
            console.log(`📊 共加载 ${records.length} 条记录`);
        };

        // 修改密码锁脚本中的验证成功部分，调用 initApp
        // 由于密码锁脚本在下方，我们可以直接修改其逻辑，但为了清晰，我将在下面的脚本中覆盖之前的锁逻辑。
        // 实际上，上面的锁脚本已经定义了 verify 函数，我们可以重新定义，但更简单的是在锁脚本中直接调用 window.initApp。
        // 由于锁脚本在页面底部，我们可以在那里修改。

        // 但上面已经有一个锁脚本了（在页面底部之前），我将替换为新的锁脚本，确保验证后调用 initApp。
        // 为了不重复，我将上面的锁脚本移除，重新在页面底部编写一个更完善的。
        // 但为了保持最小改动，我选择在页面底部的锁脚本中修改。
        // 不过现在页面中有两个锁脚本？不，上面只有一个，且是放在页面底部的。
        // 实际上在之前的代码中，我放了一个锁脚本在底部，现在我要更新它，使其在验证成功后调用 initApp。
        // 由于我无法直接修改已生成的代码，我在这次回答中给出完整的最终代码，并确保逻辑正确。

        // 因此，最终代码中的锁脚本将如下（在页面底部）：
        // (function() { ... 验证 ... 成功时调用 window.initApp(); })();

        // 由于这是一个完整的替换，我已经在最终代码中实现了这些。
        // 本段注释仅作为说明，实际运行的代码请参考最终输出的完整 HTML。
    </script>

    <!-- ===== 密码锁脚本（覆盖前面的，确保验证后初始化应用） ===== -->
    <script>
        (function() {
            const PASSWORD = '0829';

            function createLock() {
                const overlay = document.createElement('div');
                overlay.id = 'lockOverlay';
                overlay.style.cssText = `
                    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                    background: rgba(0,0,0,0.92); z-index: 99999;
                    display: flex; justify-content: center; align-items: center;
                    flex-direction: column;
                    color: #fff; font-family: 'Inter', sans-serif;
                `;
                overlay.innerHTML = `
                    <div style="background: #1a1510; padding: 40px 32px; border-radius: 18px; border: 1px solid #bf953f; text-align: center; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.8);">
                        <div style="font-size: 48px; margin-bottom: 12px;">🔒</div>
                        <h2 style="color: #bf953f; margin-bottom: 8px; font-family: 'Playfair Display', serif; font-weight: 700;">请输入密码</h2>
                        <p style="color: #a89888; font-size: 13px; margin-bottom: 20px;">此页面已加密，请输入访问密码</p>
                        <input type="password" id="pwdInput" placeholder="输入密码" style="
                            width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(191,149,63,0.3);
                            background: #0a0806; color: #fff; font-size: 16px; outline: none; transition: border 0.3s;
                        ">
                        <button id="pwdBtn" style="
                            margin-top: 18px; padding: 12px 0; width: 100%; border: none; border-radius: 10px;
                            background: linear-gradient(135deg, #bf953f, #b38728); color: #0a0806;
                            font-weight: 600; cursor: pointer; font-size: 16px; transition: transform 0.2s;
                        ">解锁</button>
                        <p id="pwdError" style="color: #f87171; font-size: 13px; margin-top: 14px; display: none; min-height: 20px;">❌ 密码错误，请重试</p>
                    </div>
                `;
                document.body.prepend(overlay);

                const input = document.getElementById('pwdInput');
                const btn = document.getElementById('pwdBtn');
                const error = document.getElementById('pwdError');

                function verify() {
                    if (input.value === PASSWORD) {
                        overlay.style.display = 'none';
                        document.getElementById('mainContent').style.display = 'block';
                        // 初始化应用
                        if (typeof window.initApp === 'function') {
                            window.initApp();
                        } else {
                            // fallback
                            console.warn('initApp not defined, trying manual init');
                            loadData();
                            document.getElementById('inputDate').value = new Date().toISOString().slice(0, 10);
                            renderAll();
                        }
                    } else {
                        error.style.display = 'block';
                        input.value = '';
                        input.focus();
                        input.style.borderColor = '#f87171';
                        setTimeout(() => { input.style.borderColor = 'rgba(191,149,63,0.3)'; }, 500);
                    }
                }

                btn.addEventListener('click', verify);
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') verify();
                });
                input.addEventListener('input', function() {
                    error.style.display = 'none';
                    input.style.borderColor = 'rgba(191,149,63,0.3)';
                });

                setTimeout(() => input.focus(), 300);
            }

            window.addEventListener('load', function() {
                const main = document.getElementById('mainContent');
                if (main) main.style.display = 'none';
                createLock();
            });
        })();
    </script>


</body><div id="ai-assist-root-bangs"></div><ai-assistant-floating-host data-ai-fab-host=""></ai-assistant-floating-host><div id="ai-assist-root-new"></div><div id="ai-assistant"></div></html>