{"id":672,"date":"2025-06-11T16:05:50","date_gmt":"2025-06-11T08:05:50","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=672"},"modified":"2025-07-23T11:09:41","modified_gmt":"2025-07-23T03:09:41","slug":"data-tou","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/heartsync\/data-tou\/","title":{"rendered":"\u5bb6\u5ead\u5206\u6790\u7cfb\u7edfAnalytical system."},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <style>\n        :root {\n            --primary: #6e44ff;\n            --primary-light: #8d6eff;\n            --secondary: #ff6b8b;\n            --accent: #00d4ff;\n            --success: #2ed573;\n            --warning: #ff9f43;\n            --danger: #ff6b6b;\n            --dark: #1a1a2e;\n            --light: #f8f9fe;\n            --gray: #a3a8c3;\n            --card-bg: #ffffff;\n            --card-shadow: 0 10px 30px rgba(110, 68, 255, 0.1);\n            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;\n            background: linear-gradient(135deg, #f5f7ff 0%, #e6e9ff 100%);\n            color: #333;\n            line-height: 1.6;\n            padding: 0;\n            min-height: 100vh;\n        }\n\n        .app-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 16px;\n        }\n\n        \/* \u5934\u90e8\u6837\u5f0f - \u79d1\u6280\u611f\u8bbe\u8ba1 *\/\n        .app-header {\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n            border-radius: 20px;\n            padding: 24px;\n            margin-bottom: 24px;\n            box-shadow: var(--card-shadow);\n            position: relative;\n            overflow: hidden;\n            color: white;\n            text-align: center;\n        }\n\n        .app-header::before {\n            content: \"\";\n            position: absolute;\n            top: -50px;\n            right: -50px;\n            width: 200px;\n            height: 200px;\n            border-radius: 50%;\n            background: rgba(255, 255, 255, 0.1);\n        }\n\n        .app-header::after {\n            content: \"\";\n            position: absolute;\n            bottom: -30px;\n            left: -30px;\n            width: 150px;\n            height: 150px;\n            border-radius: 50%;\n            background: rgba(255, 255, 255, 0.08);\n        }\n\n        .app-title {\n            font-size: 1.8rem;\n            font-weight: 700;\n            margin-bottom: 8px;\n            position: relative;\n            z-index: 2;\n            text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n\n        .app-subtitle {\n            font-size: 1rem;\n            opacity: 0.9;\n            max-width: 600px;\n            margin: 0 auto;\n            position: relative;\n            z-index: 2;\n            font-weight: 300;\n        }\n\n        \/* \u6587\u4ef6\u4e0a\u4f20\u533a\u57df *\/\n        .upload-section {\n            background: var(--card-bg);\n            border-radius: 16px;\n            padding: 20px;\n            margin-bottom: 24px;\n            box-shadow: var(--card-shadow);\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n            align-items: center;\n        }\n        \n        .upload-controls {\n            flex: 1;\n            min-width: 300px;\n        }\n        \n        .upload-textarea {\n            width: 100%;\n            height: 120px;\n            padding: 15px;\n            border-radius: 12px;\n            border: 2px dashed rgba(110, 68, 255, 0.3);\n            background: rgba(110, 68, 255, 0.05);\n            font-family: inherit;\n            font-size: 1rem;\n            resize: none;\n            transition: var(--transition);\n        }\n        \n        .upload-textarea:focus {\n            outline: none;\n            border-color: var(--primary);\n            box-shadow: 0 0 0 3px rgba(110, 68, 255, 0.2);\n        }\n        \n        .upload-or {\n            text-align: center;\n            color: var(--gray);\n            font-weight: 500;\n            margin: 10px 0;\n        }\n        \n        .file-upload {\n            position: relative;\n            display: inline-block;\n            width: 100%;\n        }\n        \n        .file-upload-btn {\n            display: block;\n            width: 100%;\n            padding: 14px;\n            background: rgba(110, 68, 255, 0.1);\n            color: var(--primary);\n            border-radius: 12px;\n            text-align: center;\n            font-weight: 600;\n            cursor: pointer;\n            border: 2px dashed rgba(110, 68, 255, 0.3);\n            transition: var(--transition);\n        }\n        \n        .file-upload-btn:hover {\n            background: rgba(110, 68, 255, 0.2);\n        }\n        \n        .file-upload-input {\n            position: absolute;\n            left: 0;\n            top: 0;\n            opacity: 0;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n        }\n        \n        .upload-btn {\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n            color: white;\n            border: none;\n            padding: 14px 28px;\n            border-radius: 12px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: var(--transition);\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            font-size: 1.1rem;\n            box-shadow: 0 5px 15px rgba(110, 68, 255, 0.3);\n        }\n        \n        .upload-btn:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 8px 20px rgba(110, 68, 255, 0.4);\n        }\n        \n        .upload-preview {\n            flex: 1;\n            min-width: 300px;\n            background: rgba(110, 68, 255, 0.05);\n            border-radius: 16px;\n            padding: 20px;\n            border: 2px dashed rgba(110, 68, 255, 0.3);\n            min-height: 180px;\n        }\n        \n        .upload-preview-title {\n            font-size: 1.1rem;\n            font-weight: 600;\n            color: var(--primary);\n            margin-bottom: 15px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n        \n        .preview-content {\n            font-size: 0.95rem;\n            line-height: 1.6;\n            color: var(--dark);\n            max-height: 120px;\n            overflow-y: auto;\n        }\n        \n        .preview-content::-webkit-scrollbar {\n            width: 6px;\n        }\n        \n        .preview-content::-webkit-scrollbar-track {\n            background: rgba(110, 68, 255, 0.05);\n            border-radius: 3px;\n        }\n        \n        .preview-content::-webkit-scrollbar-thumb {\n            background: rgba(110, 68, 255, 0.2);\n            border-radius: 3px;\n        }\n\n        \/* \u65f6\u95f4\u9009\u62e9\u5668 - \u79fb\u52a8\u7aef\u4f18\u5316 *\/\n        .time-selector {\n            display: flex;\n            gap: 12px;\n            margin-bottom: 24px;\n            overflow-x: auto;\n            padding-bottom: 8px;\n            scrollbar-width: none;\n        }\n\n        .time-selector::-webkit-scrollbar {\n            display: none;\n        }\n\n        .time-card {\n            flex: 0 0 auto;\n            min-width: 150px;\n            background: var(--card-bg);\n            border-radius: 16px;\n            padding: 18px;\n            box-shadow: var(--card-shadow);\n            text-align: center;\n            cursor: pointer;\n            transition: var(--transition);\n            border: 2px solid transparent;\n        }\n\n        .time-card.active {\n            border-color: var(--primary);\n            background: rgba(110, 68, 255, 0.05);\n            box-shadow: 0 8px 20px rgba(108, 92, 231, 0.2);\n        }\n\n        .time-card:hover {\n            transform: translateY(-5px);\n        }\n\n        .time-title {\n            font-size: 1rem;\n            font-weight: 600;\n            color: var(--primary);\n            margin-bottom: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n        }\n\n        .time-range {\n            font-size: 0.85rem;\n            color: var(--gray);\n        }\n\n        \/* \u6210\u5458\u6807\u7b7e - \u6c34\u5e73\u6eda\u52a8 *\/\n        .members-tabs {\n            display: flex;\n            gap: 8px;\n            margin-bottom: 24px;\n            overflow-x: auto;\n            padding-bottom: 8px;\n            scrollbar-width: none;\n        }\n\n        .members-tabs::-webkit-scrollbar {\n            display: none;\n        }\n\n        .tab {\n            flex: 0 0 auto;\n            padding: 14px 20px;\n            border-radius: 50px;\n            cursor: pointer;\n            transition: var(--transition);\n            font-weight: 500;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            background: rgba(110, 68, 255, 0.08);\n            color: var(--primary);\n            white-space: nowrap;\n        }\n\n        .tab:hover {\n            background: rgba(110, 68, 255, 0.15);\n        }\n\n        .tab.active {\n            background: var(--primary);\n            color: white;\n            font-weight: 600;\n            box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);\n        }\n\n        \/* \u4eea\u8868\u677f\u7f51\u683c\u5e03\u5c40 *\/\n        .dashboard-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 24px;\n            margin-bottom: 24px;\n        }\n\n        \/* \u5361\u7247\u6837\u5f0f *\/\n        .card {\n            background: var(--card-bg);\n            border-radius: 20px;\n            box-shadow: var(--card-shadow);\n            padding: 24px;\n            transition: var(--transition);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 35px rgba(110, 68, 255, 0.2);\n        }\n\n        .card-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 20px;\n            padding-bottom: 16px;\n            border-bottom: 1px solid rgba(163, 168, 195, 0.2);\n        }\n\n        .card-title {\n            font-size: 1.2rem;\n            font-weight: 700;\n            color: var(--primary);\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        .card-title i {\n            font-size: 1.2rem;\n            color: var(--primary);\n        }\n\n        \/* \u7edf\u8ba1\u5361\u7247\u7f51\u683c *\/\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 16px;\n        }\n\n        .stat-card {\n            background: var(--light);\n            border-radius: 16px;\n            padding: 18px;\n            text-align: center;\n            transition: var(--transition);\n            border: 1px solid rgba(163, 168, 195, 0.1);\n        }\n\n        .stat-card:hover {\n            transform: translateY(-3px);\n            background: white;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n        }\n\n        .stat-value {\n            font-size: 2rem;\n            font-weight: 800;\n            margin: 12px 0;\n            font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;\n        }\n\n        .stat-positive { color: var(--success); }\n        .stat-neutral { color: var(--warning); }\n        .stat-negative { color: var(--danger); }\n\n        .stat-label {\n            font-size: 0.9rem;\n            color: var(--gray);\n            font-weight: 500;\n        }\n\n        \/* \u56fe\u8868\u5bb9\u5668 *\/\n        .chart-container {\n            height: 280px;\n            position: relative;\n            margin: 15px 0;\n        }\n\n        \/* \u60c5\u611f\u6807\u7b7e *\/\n        .emotion-tags {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            margin-top: 20px;\n        }\n\n        .emotion-tag {\n            display: inline-block;\n            padding: 8px 16px;\n            border-radius: 30px;\n            font-size: 0.9rem;\n            font-weight: 500;\n            box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;\n        }\n\n        .tag-happy { background: rgba(46, 213, 115, 0.15); color: var(--success); }\n        .tag-calm { background: rgba(255, 159, 67, 0.15); color: var(--warning); }\n        .tag-grateful { background: rgba(0, 212, 255, 0.15); color: var(--accent); }\n        .tag-anxious { background: rgba(255, 107, 107, 0.15); color: var(--danger); }\n        .tag-tense { background: rgba(110, 68, 255, 0.15); color: var(--primary); }\n        .tag-angry { background: rgba(26, 26, 46, 0.15); color: var(--dark); }\n        .tag-surprise { background: rgba(255, 107, 139, 0.15); color: var(--secondary); }\n\n        \/* \u60c5\u611f\u70ed\u529b\u56fe *\/\n        .heatmap-container {\n            overflow-x: auto;\n            padding-bottom: 10px;\n        }\n\n        .heatmap-grid {\n            display: grid;\n            grid-template-columns: 100px repeat(7, 1fr);\n            gap: 8px;\n            min-width: 700px;\n        }\n\n        .heatmap-header {\n            font-weight: 600;\n            color: var(--dark);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 40px;\n            background: var(--light);\n            border-radius: 12px;\n        }\n\n        .heatmap-cell {\n            height: 40px;\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: 600;\n            color: white;\n            transition: var(--transition);\n            position: relative;\n            cursor: pointer;\n            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);\n        }\n\n        .heatmap-cell:hover {\n            transform: scale(1.05);\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n            z-index: 2;\n        }\n\n        .heatmap-cell .tooltip {\n            position: absolute;\n            bottom: 100%;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(26, 26, 46, 0.9);\n            color: white;\n            padding: 8px 15px;\n            border-radius: 8px;\n            font-size: 0.9rem;\n            white-space: nowrap;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.3s;\n            z-index: 10;\n        }\n\n        .heatmap-cell:hover .tooltip {\n            opacity: 1;\n        }\n\n        \/* \u60c5\u611f\u56fe\u4f8b *\/\n        .emotion-key {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin-top: 25px;\n            padding: 15px;\n            background: var(--light);\n            border-radius: 16px;\n        }\n\n        .key-item {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .key-color {\n            width: 20px;\n            height: 20px;\n            border-radius: 6px;\n        }\n\n        .key-label {\n            font-size: 0.9rem;\n            color: var(--dark);\n        }\n\n        \/* \u60c5\u611f\u6d1e\u5bdf\u5361\u7247 *\/\n        .insight-card {\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n            color: white;\n            border-radius: 20px;\n            padding: 30px;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .insight-card::after {\n            content: \"\";\n            position: absolute;\n            top: -50px;\n            right: -50px;\n            width: 150px;\n            height: 150px;\n            border-radius: 50%;\n            background: rgba(255, 255, 255, 0.1);\n        }\n\n        .insight-title {\n            font-size: 1.3rem;\n            margin-bottom: 20px;\n            display: flex;\n            align-items: center;\n            position: relative;\n            z-index: 2;\n            font-weight: 700;\n        }\n\n        .insight-title i {\n            margin-right: 12px;\n            font-size: 1.4rem;\n        }\n\n        .insight-content {\n            line-height: 1.8;\n            position: relative;\n            z-index: 2;\n            font-size: 1.05rem;\n        }\n\n        .insight-content p {\n            margin-bottom: 15px;\n        }\n\n        .recommendation {\n            background: rgba(255, 255, 255, 0.2);\n            padding: 18px;\n            border-radius: 15px;\n            margin-top: 20px;\n            border-left: 4px solid white;\n            backdrop-filter: blur(5px);\n        }\n\n        .member-highlight {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n            margin-top: 20px;\n            background: rgba(255, 255, 255, 0.1);\n            padding: 15px;\n            border-radius: 12px;\n        }\n\n        .member-avatar {\n            width: 60px;\n            height: 60px;\n            border-radius: 50%;\n            background: white;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 24px;\n            color: var(--primary);\n            font-weight: bold;\n        }\n\n        .member-info h4 {\n            font-size: 1.1rem;\n            margin-bottom: 5px;\n        }\n\n        .member-info p {\n            margin: 0;\n            opacity: 0.9;\n            font-size: 0.95rem;\n        }\n\n        \/* \u9875\u811a *\/\n        .app-footer {\n            text-align: center;\n            margin-top: 40px;\n            padding: 25px;\n            color: var(--gray);\n            font-size: 0.95rem;\n            background: var(--card-bg);\n            border-radius: 15px;\n            box-shadow: var(--card-shadow);\n        }\n\n        \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n        @media (min-width: 768px) {\n            .app-title {\n                font-size: 2.4rem;\n            }\n            \n            .app-subtitle {\n                font-size: 1.1rem;\n            }\n            \n            .dashboard-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n            \n            .stats-grid {\n                grid-template-columns: repeat(4, 1fr);\n            }\n            \n            .card-full {\n                grid-column: 1 \/ -1;\n            }\n            \n            .time-card {\n                min-width: 200px;\n            }\n        }\n\n        @media (min-width: 1024px) {\n            .dashboard-grid {\n                grid-template-columns: repeat(3, 1fr);\n            }\n            \n            .card-large {\n                grid-column: span 2;\n            }\n            \n            .time-selector {\n                flex-wrap: wrap;\n            }\n        }\n\n        \/* \u52a8\u753b\u6548\u679c *\/\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .card {\n            animation: fadeIn 0.5s ease-out;\n        }\n\n        .card:nth-child(2) { animation-delay: 0.1s; }\n        .card:nth-child(3) { animation-delay: 0.2s; }\n        .card:nth-child(4) { animation-delay: 0.3s; }\n        .card:nth-child(5) { animation-delay: 0.4s; }\n        .card:nth-child(6) { animation-delay: 0.5s; }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"app-container\">\n        <header class=\"app-header\">\n            <h1 class=\"app-title\"><i class=\"fas fa-brain\"><\/i> \u60c5\u611f\u667a\u80fd\u5bb6\u5ead\u5206\u6790<\/h1>\n            <p class=\"app-subtitle\">AI\u9a71\u52a8\u7684\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u76d1\u6d4b\u4e0e\u5173\u7cfb\u4f18\u5316\u5e73\u53f0<\/p>\n        <\/header>\n        \n        <!-- \u6587\u4ef6\u4e0a\u4f20\u533a\u57df -->\n        <div class=\"upload-section\">\n            <div class=\"upload-controls\">\n                <textarea class=\"upload-textarea\" placeholder=\"\u5728\u6b64\u8f93\u5165\u6587\u5b57\u63cf\u8ff0\u5bb6\u5ead\u60c5\u611f\u72b6\u6001...\"><\/textarea>\n                <div class=\"upload-or\">\u6216<\/div>\n                <div class=\"file-upload\">\n                    <div class=\"file-upload-btn\">\n                        <i class=\"fas fa-cloud-upload-alt\"><\/i> \u9009\u62e9\u6587\u4ef6\u4e0a\u4f20\n                    <\/div>\n                    <input type=\"file\" class=\"file-upload-input\" id=\"fileInput\" accept=\".txt,.doc,.docx,.pdf\">\n                <\/div>\n            <\/div>\n            \n            <div class=\"upload-preview\">\n                <div class=\"upload-preview-title\">\n                    <i class=\"fas fa-file-alt\"><\/i> \u5185\u5bb9\u9884\u89c8\n                <\/div>\n                <div class=\"preview-content\" id=\"previewContent\">\n                    \u4e0a\u4f20\u6587\u5b57\u6216\u6587\u4ef6\u540e\uff0c\u9884\u89c8\u5c06\u663e\u793a\u5728\u8fd9\u91cc&#8230;\n                <\/div>\n            <\/div>\n            \n            <button class=\"upload-btn\" id=\"analyzeBtn\">\n                <i class=\"fas fa-chart-line\"><\/i> \u751f\u6210\u60c5\u611f\u5206\u6790\n            <\/button>\n        <\/div>\n        \n        <!-- \u65f6\u95f4\u9009\u62e9\u5668 -->\n        <div class=\"time-selector\">\n            <div class=\"time-card active\" data-period=\"week\">\n                <div class=\"time-title\"><i class=\"fas fa-calendar-week\"><\/i> \u672c\u5468<\/div>\n                <div class=\"time-range\">2025-06-09 \u81f3 2025-06-15<\/div>\n            <\/div>\n            <div class=\"time-card\" data-period=\"last_week\">\n                <div class=\"time-title\"><i class=\"fas fa-calendar-day\"><\/i> \u4e0a\u5468<\/div>\n                <div class=\"time-range\">2025-06-02 \u81f3 2025-06-08<\/div>\n            <\/div>\n            <div class=\"time-card\" data-period=\"month\">\n                <div class=\"time-title\"><i class=\"fas fa-calendar-alt\"><\/i> \u672c\u6708<\/div>\n                <div class=\"time-range\">2025-06-01 \u81f3 2025-06-30<\/div>\n            <\/div>\n            <div class=\"time-card\" data-period=\"last_month\">\n                <div class=\"time-title\"><i class=\"fas fa-calendar-check\"><\/i> \u4e0a\u6708<\/div>\n                <div class=\"time-range\">2025-05-01 \u81f3 2025-05-31<\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- \u6210\u5458\u9009\u62e9 -->\n        <div class=\"members-tabs\">\n            <div class=\"tab active\" data-member=\"all\">\n                <i class=\"fas fa-users\"><\/i> \u5168\u90e8\u6210\u5458\n            <\/div>\n            <div class=\"tab\" data-member=\"dad\">\n                <i class=\"fas fa-user\"><\/i> \u7238\u7238\n            <\/div>\n            <div class=\"tab\" data-member=\"mom\">\n                <i class=\"fas fa-user\"><\/i> \u5988\u5988\n            <\/div>\n            <div class=\"tab\" data-member=\"ming\">\n                <i class=\"fas fa-user\"><\/i> \u5c0f\u660e\n            <\/div>\n            <div class=\"tab\" data-member=\"hong\">\n                <i class=\"fas fa-user\"><\/i> \u5c0f\u7ea2\n            <\/div>\n        <\/div>\n        \n        <!-- \u4eea\u8868\u677f\u7f51\u683c -->\n        <div class=\"dashboard-grid\">\n            <!-- \u603b\u4f53\u7edf\u8ba1 -->\n            <div class=\"card\">\n                <div class=\"card-header\">\n                    <div class=\"card-title\">\n                        <i class=\"fas fa-chart-line\"><\/i> \u603b\u4f53\u7edf\u8ba1\n                    <\/div>\n                    <i class=\"fas fa-sync-alt\" style=\"color: var(--primary); cursor: pointer;\" id=\"refreshStats\"><\/i>\n                <\/div>\n                <div class=\"stats-grid\">\n                    <div class=\"stat-card\">\n                        <div class=\"stat-label\">\u60c5\u7eea\u8bb0\u5f55\u603b\u6570<\/div>\n                        <div class=\"stat-value\" id=\"totalRecords\">42<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-label\">\u79ef\u6781\u60c5\u7eea\u5360\u6bd4<\/div>\n                        <div class=\"stat-value stat-positive\" id=\"positivePercent\">68%<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-label\">\u6700\u9ad8\u8bb0\u5f55\u65e5<\/div>\n                        <div class=\"stat-value stat-neutral\" id=\"highDay\">15<\/div>\n                        <div class=\"stat-label\">(\u5468\u4e94)<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-label\">\u6700\u4f4e\u8bb0\u5f55\u65e5<\/div>\n                        <div class=\"stat-value stat-negative\" id=\"lowDay\">3<\/div>\n                        <div class=\"stat-label\">(\u5468\u4e00)<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- \u60c5\u7eea\u5206\u5e03 -->\n            <div class=\"card\">\n                <div class=\"card-header\">\n                    <div class=\"card-title\">\n                        <i class=\"fas fa-pie-chart\"><\/i> \u60c5\u7eea\u5206\u5e03\n                    <\/div>\n                    <i class=\"fas fa-info-circle\" style=\"color: var(--primary);\"><\/i>\n                <\/div>\n                <div class=\"chart-container\">\n                    <canvas id=\"emotionChart\"><\/canvas>\n                <\/div>\n                <div class=\"emotion-tags\">\n                    <span class=\"emotion-tag tag-happy\">\u5feb\u4e50 28%<\/span>\n                    <span class=\"emotion-tag tag-calm\">\u5e73\u9759 22%<\/span>\n                    <span class=\"emotion-tag tag-grateful\">\u611f\u6069 18%<\/span>\n                    <span class=\"emotion-tag tag-anxious\">\u7126\u8651 12%<\/span>\n                    <span class=\"emotion-tag tag-tense\">\u7d27\u5f20 10%<\/span>\n                    <span class=\"emotion-tag tag-angry\">\u6124\u6012 8%<\/span>\n                    <span class=\"emotion-tag tag-surprise\">\u60ca\u559c 2%<\/span>\n                <\/div>\n            <\/div>\n            \n            <!-- \u60c5\u611f\u8d8b\u52bf\u56fe -->\n            <div class=\"card card-large\">\n                <div class=\"card-header\">\n                    <div class=\"card-title\">\n                        <i class=\"fas fa-chart-area\"><\/i> \u60c5\u611f\u8d8b\u52bf\u5206\u6790\n                    <\/div>\n                    <div class=\"time-range\">\u672c\u5468\u6570\u636e<\/div>\n                <\/div>\n                <div class=\"chart-container\">\n                    <canvas id=\"trendChart\"><\/canvas>\n                <\/div>\n            <\/div>\n            \n            <!-- \u60c5\u7eea\u70ed\u529b\u56fe -->\n            <div class=\"card card-full\">\n                <div class=\"card-header\">\n                    <div class=\"card-title\">\n                        <i class=\"fas fa-fire\"><\/i> \u5bb6\u5ead\u60c5\u7eea\u70ed\u529b\u56fe\n                    <\/div>\n                    <div class=\"time-range\">\u672c\u5468\u6570\u636e<\/div>\n                <\/div>\n                <div class=\"heatmap-container\">\n                    <div class=\"heatmap-grid\">\n                        <!-- \u65e5\u671f -->\n                        <div class=\"heatmap-header\">\u60c5\u7eea\/\u65e5\u671f<\/div>\n                        <div class=\"heatmap-header\">\u5468\u4e00<\/div>\n                        <div class=\"heatmap-header\">\u5468\u4e8c<\/div>\n                        <div class=\"heatmap-header\">\u5468\u4e09<\/div>\n                        <div class=\"heatmap-header\">\u5468\u56db<\/div>\n                        <div class=\"heatmap-header\">\u5468\u4e94<\/div>\n                        <div class=\"heatmap-header\">\u5468\u516d<\/div>\n                        <div class=\"heatmap-header\">\u5468\u65e5<\/div>\n                        \n                        <!-- \u60c5\u7eea\u884c -->\n                        <div class=\"heatmap-header\">\u6124\u6012<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff416c, #ff4b2b);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u7238\u7238 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff416c, #ff4b2b);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5c0f\u660e (1\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u5988\u5988 (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        \n                        <div class=\"heatmap-header\">\u7126\u8651<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff9966, #ff5e62);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u5988\u5988 (4\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff9966, #ff5e62);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u7238\u7238 (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff9966, #ff5e62);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5c0f\u660e (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u5c0f\u7ea2 (1\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff9966, #ff5e62);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u5988\u5988 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u7238\u7238 (1\u6b21)<\/div>\n                        <\/div>\n                        \n                        <div class=\"heatmap-header\">\u7d27\u5f20<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u5c0f\u660e (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ff416c, #ff4b2b);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u7238\u7238 (1\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5988\u5988 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u5c0f\u7ea2 (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        \n                        <div class=\"heatmap-header\">\u5feb\u4e50<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>5<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u5168\u5bb6 (5\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u5c0f\u660e (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5c0f\u7ea2 (4\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>6<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u5168\u5bb6 (6\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>7<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u5168\u5bb6 (7\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>5<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u5168\u5bb6 (5\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u5168\u5bb6 (4\u6b21)<\/div>\n                        <\/div>\n                        \n                        <div class=\"heatmap-header\">\u5e73\u9759<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u5988\u5988 (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u7238\u7238 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5c0f\u7ea2 (1\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u5168\u5bb6 (4\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u5c0f\u660e (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u5988\u5988 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>5<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u5168\u5bb6 (5\u6b21)<\/div>\n                        <\/div>\n                        \n                        <div class=\"heatmap-header\">\u60ca\u559c<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #a18cd1, #fbc2eb);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u5c0f\u7ea2 (1\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #a18cd1, #fbc2eb);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5c0f\u660e (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #a18cd1, #fbc2eb);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u5168\u5bb6 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\">\n                            <span>0<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u65e0\u8bb0\u5f55<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #a18cd1, #fbc2eb);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u5168\u5bb6 (4\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #a18cd1, #fbc2eb);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u5988\u5988 (2\u6b21)<\/div>\n                        <\/div>\n                        \n                        <div class=\"heatmap-header\">\u611f\u6069<\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e00: \u7238\u7238 (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>2<\/span>\n                            <div class=\"tooltip\">\u5468\u4e8c: \u5988\u5988 (2\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u4e09: \u5168\u5bb6 (4\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>1<\/span>\n                            <div class=\"tooltip\">\u5468\u56db: \u5c0f\u7ea2 (1\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>3<\/span>\n                            <div class=\"tooltip\">\u5468\u4e94: \u5c0f\u660e (3\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>5<\/span>\n                            <div class=\"tooltip\">\u5468\u516d: \u5168\u5bb6 (5\u6b21)<\/div>\n                        <\/div>\n                        <div class=\"heatmap-cell\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\">\n                            <span>4<\/span>\n                            <div class=\"tooltip\">\u5468\u65e5: \u5168\u5bb6 (4\u6b21)<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"emotion-key\">\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #ff416c, #ff4b2b);\"><\/div>\n                        <span class=\"key-label\">\u6124\u6012<\/span>\n                    <\/div>\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #ff9966, #ff5e62);\"><\/div>\n                        <span class=\"key-label\">\u7126\u8651<\/span>\n                    <\/div>\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #ffd86f, #ffbc56);\"><\/div>\n                        <span class=\"key-label\">\u7d27\u5f20<\/span>\n                    <\/div>\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #7bed9f, #2ed573);\"><\/div>\n                        <span class=\"key-label\">\u5feb\u4e50<\/span>\n                    <\/div>\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #74ebd5, #9face6);\"><\/div>\n                        <span class=\"key-label\">\u5e73\u9759<\/span>\n                    <\/div>\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #a18cd1, #fbc2eb);\"><\/div>\n                        <span class=\"key-label\">\u60ca\u559c<\/span>\n                    <\/div>\n                    <div class=\"key-item\">\n                        <div class=\"key-color\" style=\"background: linear-gradient(135deg, #65c7f7, #0052d4);\"><\/div>\n                        <span class=\"key-label\">\u611f\u6069<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- \u60c5\u611f\u6d1e\u5bdf -->\n            <div class=\"insight-card\">\n                <div class=\"insight-title\">\n                    <i class=\"fas fa-lightbulb\"><\/i> AI\u60c5\u611f\u6d1e\u5bdf\n                <\/div>\n                <div class=\"insight-content\">\n                    <p>\u672c\u5468\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u6307\u6570\u4e3a<span style=\"color: #2ed573; font-weight: 600;\">86\/100<\/span>\uff0c\u6574\u4f53\u60c5\u611f\u72b6\u6001\u79ef\u6781\u7a33\u5b9a\u3002\u5468\u672b\u5bb6\u5ead\u6210\u5458\u4e92\u52a8\u9891\u7387\u63d0\u9ad8\uff0c\u60c5\u611f\u8fde\u63a5\u589e\u5f3a\u3002<\/p>\n                    <p>\u5468\u4e94\u662f\u672c\u5468\u60c5\u611f\u5cf0\u503c\u65e5\uff0c\u5168\u5bb6\u8bb0\u5f55\u4e86<span style=\"color: #2ed573; font-weight: 600;\">7\u6b21\u5feb\u4e50\u65f6\u523b<\/span>\uff0c\u4e3b\u8981\u6e90\u4e8e\u5bb6\u5ead\u805a\u9910\u548c\u6e38\u620f\u4e4b\u591c\u3002<\/p>\n                    <p>\u5468\u4e09\u51fa\u73b0\u77ed\u6682\u60c5\u611f\u4f4e\u8c37\uff0c\u4e3b\u8981\u539f\u56e0\u662f\u5c0f\u660e\u9762\u4e34\u8003\u8bd5\u538b\u529b\uff0c\u5efa\u8bae\u589e\u52a0\u9f13\u52b1\u548c\u652f\u6301\u3002<\/p>\n                    <div class=\"recommendation\">\n                        <strong>\u60c5\u611f\u4f18\u5316\u5efa\u8bae\uff1a<\/strong> \u5b89\u6392\u5468\u672b\u6237\u5916\u6d3b\u52a8\uff0c\u589e\u5f3a\u5bb6\u5ead\u60c5\u611f\u8fde\u63a5\uff1b\u4e3a\u5c0f\u660e\u521b\u9020\u8f7b\u677e\u7684\u5b66\u4e60\u73af\u5883\u3002\n                    <\/div>\n                    \n                    <div class=\"member-highlight\">\n                        <div class=\"member-avatar\">\n                            <i class=\"fas fa-users\"><\/i>\n                        <\/div>\n                        <div class=\"member-info\">\n                            <h4>\u672c\u5468\u60c5\u611f\u5065\u5eb7\u4e4b\u661f<\/h4>\n                            <p>\u5c0f\u7ea2 &#8211; \u79ef\u6781\u60c5\u7eea\u5360\u6bd475%<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <footer class=\"app-footer\">\n            \u00a9 2025 \u5fc3\u94fe\u6570\u79d1\u60c5\u611f\u667a\u80fd\u5bb6\u5ead\u5206\u6790\u7cfb\u7edf | \u6570\u636e\u66f4\u65b0\u65f6\u95f4: <span id=\"updateTime\">2025-06-11 16:30<\/span> | HCAI Tech AI\u60c5\u611f\u5206\u6790\u5f15\u64ce v2.3\n        <\/footer>\n    <\/div>\n\n    <script>\n        \/\/ \u521d\u59cb\u5316\u56fe\u8868\n        let emotionChart, trendChart;\n        \n        function initCharts() {\n            \/\/ \u60c5\u7eea\u5206\u5e03\u997c\u56fe\n            const emotionCtx = document.getElementById('emotionChart').getContext('2d');\n            emotionChart = new Chart(emotionCtx, {\n                type: 'doughnut',\n                data: {\n                    labels: ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'],\n                    datasets: [{\n                        data: [28, 22, 18, 12, 10, 8, 2],\n                        backgroundColor: [\n                            '#2ed573', '#ff9f43', '#00d4ff', '#ff6b6b', '#6e44ff', '#1a1a2e', '#ff6b8b'\n                        ],\n                        borderWidth: 0,\n                        hoverOffset: 10\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    plugins: {\n                        legend: {\n                            position: 'right',\n                            labels: {\n                                font: {\n                                    size: 12\n                                },\n                                padding: 15,\n                                usePointStyle: true,\n                                pointStyle: 'circle'\n                            }\n                        },\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    return `${context.label}: ${context.raw}%`;\n                                }\n                            }\n                        }\n                },\n                    cutout: '60%',\n                    animation: {\n                        animateRotate: true,\n                        animateScale: true\n                    }\n                }\n            });\n            \n            \/\/ \u8d8b\u52bf\u56fe\n            const trendCtx = document.getElementById('trendChart').getContext('2d');\n            trendChart = new Chart(trendCtx, {\n                type: 'line',\n                data: {\n                    labels: ['\u5468\u4e00', '\u5468\u4e8c', '\u5468\u4e09', '\u5468\u56db', '\u5468\u4e94', '\u5468\u516d', '\u5468\u65e5'],\n                    datasets: [{\n                        label: '\u79ef\u6781\u60c5\u7eea',\n                        data: [4, 5, 3, 7, 9, 8, 6],\n                        borderColor: '#2ed573',\n                        backgroundColor: 'rgba(46, 213, 115, 0.1)',\n                        tension: 0.3,\n                        fill: true,\n                        borderWidth: 3,\n                        pointRadius: 6,\n                        pointBackgroundColor: '#2ed573'\n                    }, {\n                        label: '\u4e2d\u6027\u60c5\u7eea',\n                        data: [3, 2, 4, 2, 1, 2, 3],\n                        borderColor: '#ff9f43',\n                        backgroundColor: 'rgba(255, 159, 67, 0.1)',\n                        tension: 0.3,\n                        fill: true,\n                        borderWidth: 3,\n                        pointRadius: 6,\n                        pointBackgroundColor: '#ff9f43'\n                    }, {\n                        label: '\u8d1f\u9762\u60c5\u7eea',\n                        data: [5, 3, 6, 2, 1, 1, 2],\n                        borderColor: '#ff6b6b',\n                        backgroundColor: 'rgba(255, 107, 107, 0.1)',\n                        tension: 0.3,\n                        fill: true,\n                        borderWidth: 3,\n                        pointRadius: 6,\n                        pointBackgroundColor: '#ff6b6b'\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    scales: {\n                        y: {\n                            beginAtZero: true,\n                            grid: {\n                                color: 'rgba(163, 168, 195, 0.1)'\n                            },\n                            ticks: {\n                                color: '#a3a8c3'\n                            }\n                        },\n                        x: {\n                            grid: {\n                                color: 'rgba(163, 168, 195, 0.1)'\n                            },\n                            ticks: {\n                                color: '#a3a8c3'\n                            }\n                        }\n                    },\n                    plugins: {\n                        legend: {\n                            position: 'top',\n                            labels: {\n                                color: '#1a1a2e',\n                                usePointStyle: true,\n                                padding: 20\n                            }\n                        }\n                    },\n                    animation: {\n                        duration: 1000\n                    }\n                }\n            });\n        }\n        \n        \/\/ \u65f6\u95f4\u9009\u62e9\u529f\u80fd\n        document.querySelectorAll('.time-card').forEach(card => {\n            card.addEventListener('click', function() {\n                document.querySelectorAll('.time-card').forEach(c => c.classList.remove('active'));\n                this.classList.add('active');\n            });\n        });\n        \n        \/\/ \u6210\u5458\u9009\u62e9\u529f\u80fd\n        document.querySelectorAll('.tab').forEach(tab => {\n            tab.addEventListener('click', function() {\n                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n                this.classList.add('active');\n            });\n        });\n        \n        \/\/ \u6587\u4ef6\u4e0a\u4f20\u529f\u80fd\n        const fileInput = document.getElementById('fileInput');\n        const previewContent = document.getElementById('previewContent');\n        const uploadTextarea = document.querySelector('.upload-textarea');\n        const analyzeBtn = document.getElementById('analyzeBtn');\n        \n        fileInput.addEventListener('change', function(e) {\n            const file = e.target.files[0];\n            if (!file) return;\n            \n            const reader = new FileReader();\n            reader.onload = function(event) {\n                const content = event.target.result;\n                previewContent.textContent = content.length > 500 ? content.substring(0, 500) + '...' : content;\n            };\n            reader.readAsText(file);\n        });\n        \n        uploadTextarea.addEventListener('input', function() {\n            previewContent.textContent = this.value.length > 500 ? this.value.substring(0, 500) + '...' : this.value;\n        });\n        \n        \/\/ \u751f\u6210\u968f\u673a\u6570\u636e\u51fd\u6570\n        function generateRandomData() {\n            const emotions = ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'];\n            const emotionData = [];\n            let total = 0;\n            \n            \/\/ \u751f\u6210\u968f\u673a\u767e\u5206\u6bd4\u6570\u636e\n            for (let i = 0; i < emotions.length; i++) {\n                const value = Math.floor(Math.random() * 15) + 8;\n                emotionData.push(value);\n                total += value;\n            }\n            \n            \/\/ \u6807\u51c6\u5316\u767e\u5206\u6bd4\n            for (let i = 0; i < emotionData.length; i++) {\n                emotionData[i] = Math.round((emotionData[i] \/ total) * 100);\n            }\n            \n            \/\/ \u786e\u4fdd\u603b\u548c\u4e3a100%\n            const diff = 100 - emotionData.reduce((a, b) => a + b, 0);\n            if (diff !== 0) {\n                emotionData[0] += diff;\n            }\n            \n            return emotionData;\n        }\n        \n        \/\/ \u751f\u6210\u968f\u673a\u8d8b\u52bf\u6570\u636e\n        function generateRandomTrend() {\n            const trendData = [];\n            for (let i = 0; i < 7; i++) {\n                trendData.push(Math.floor(Math.random() * 5) + 3);\n            }\n            return trendData;\n        }\n        \n        \/\/ \u66f4\u65b0\u56fe\u8868\u6570\u636e\n        function updateCharts() {\n            const emotionData = generateRandomData();\n            const positiveTrend = generateRandomTrend();\n            const neutralTrend = generateRandomTrend();\n            const negativeTrend = generateRandomTrend();\n            \n            \/\/ \u66f4\u65b0\u60c5\u7eea\u5206\u5e03\u56fe\n            emotionChart.data.datasets[0].data = emotionData;\n            emotionChart.update();\n            \n            \/\/ \u66f4\u65b0\u8d8b\u52bf\u56fe\n            trendChart.data.datasets[0].data = positiveTrend;\n            trendChart.data.datasets[1].data = neutralTrend;\n            trendChart.data.datasets[2].data = negativeTrend;\n            trendChart.update();\n            \n            \/\/ \u66f4\u65b0\u60c5\u611f\u6807\u7b7e\n            const emotionTags = document.querySelector('.emotion-tags');\n            emotionTags.innerHTML = '';\n            \n            const emotions = ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'];\n            const tagClasses = ['tag-happy', 'tag-calm', 'tag-grateful', 'tag-anxious', 'tag-tense', 'tag-angry', 'tag-surprise'];\n            \n            emotions.forEach((emotion, index) => {\n                const tag = document.createElement('span');\n                tag.className = `emotion-tag ${tagClasses[index]}`;\n                tag.textContent = `${emotion} ${emotionData[index]}%`;\n                emotionTags.appendChild(tag);\n            });\n            \n            \/\/ \u66f4\u65b0\u7edf\u8ba1\u6570\u636e\n            const totalRecords = Math.floor(Math.random() * 50) + 30;\n            const positivePercent = Math.floor(Math.random() * 30) + 60;\n            const highDay = Math.floor(Math.random() * 7) + 10;\n            const lowDay = Math.floor(Math.random() * 7) + 1;\n            \n            document.getElementById('totalRecords').textContent = totalRecords;\n            document.getElementById('positivePercent').textContent = positivePercent + '%';\n            document.getElementById('highDay').textContent = highDay;\n            document.getElementById('lowDay').textContent = lowDay;\n            \n            \/\/ \u66f4\u65b0\u65f6\u95f4\n            const now = new Date();\n            const timeStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;\n            document.getElementById('updateTime').textContent = timeStr;\n        }\n        \n        \/\/ \u5206\u6790\u6309\u94ae\u4e8b\u4ef6\n        analyzeBtn.addEventListener('click', function() {\n            if (previewContent.textContent === '\u4e0a\u4f20\u6587\u5b57\u6216\u6587\u4ef6\u540e\uff0c\u9884\u89c8\u5c06\u663e\u793a\u5728\u8fd9\u91cc...') {\n                alert('\u8bf7\u5148\u8f93\u5165\u6587\u5b57\u6216\u4e0a\u4f20\u6587\u4ef6\uff01');\n                return;\n            }\n            \n            \/\/ \u663e\u793a\u52a0\u8f7d\u6548\u679c\n            analyzeBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> \u5206\u6790\u4e2d...';\n            \n            \/\/ \u6a21\u62df\u5206\u6790\u5904\u7406\u65f6\u95f4\n            setTimeout(() => {\n                updateCharts();\n                analyzeBtn.innerHTML = '<i class=\"fas fa-chart-line\"><\/i> \u751f\u6210\u60c5\u611f\u5206\u6790';\n                alert('\u60c5\u611f\u5206\u6790\u5b8c\u6210\uff01\u6570\u636e\u5df2\u66f4\u65b0');\n            }, 1500);\n        });\n        \n        \/\/ \u5237\u65b0\u7edf\u8ba1\u6570\u636e\n        document.getElementById('refreshStats').addEventListener('click', function() {\n            updateCharts();\n        });\n        \n        \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n        window.addEventListener('load', function() {\n            initCharts();\n            \n            \/\/ \u6dfb\u52a0\u70ed\u529b\u56fe\u60ac\u505c\u6548\u679c\n            document.querySelectorAll('.heatmap-cell').forEach(cell => {\n                cell.addEventListener('mouseenter', function() {\n                    this.style.transform = 'scale(1.05)';\n                });\n                \n                cell.addEventListener('mouseleave', function() {\n                    this.style.transform = 'scale(1)';\n                });\n            });\n            \n            \/\/ \u521d\u59cb\u5316\u65f6\u95f4\n            const now = new Date();\n            const timeStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;\n            document.getElementById('updateTime').textContent = timeStr;\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u60c5\u611f\u667a\u80fd\u5bb6\u5ead\u5206\u6790 AI\u9a71\u52a8\u7684\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u76d1\u6d4b\u4e0e\u5173\u7cfb\u4f18\u5316\u5e73\u53f0 \u6216 \u9009\u62e9\u6587\u4ef6\u4e0a\u4f20 \u5185\u5bb9\u9884\u89c8 \u4e0a\u4f20\u6587\u5b57\u6216\u6587\u4ef6\u540e\uff0c\u9884\u89c8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":228,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-672","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=672"}],"version-history":[{"count":7,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/672\/revisions"}],"predecessor-version":[{"id":1264,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/672\/revisions\/1264"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/228"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}