\u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u5206\u6790\u7cfb\u7edf<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #6c5ce7;\n --primary-light: #a29bfe;\n --secondary: #00cec9;\n --accent: #fd79a8;\n --positive: #00b894;\n --neutral: #fdcb6e;\n --negative: #ff7675;\n --light: #f7f7f7;\n --dark: #2d3436;\n --card-bg: #ffffff;\n --shadow: rgba(99, 99, 99, 0.15) 0px 2px 10px 0px;\n --header-gradient: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;\n }\n \n body {\n background: #f8f9ff;\n color: var(--dark);\n line-height: 1.6;\n min-height: 100vh;\n overflow-x: hidden;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .subtitle {\n font-size: 1.1rem;\n opacity: 0.9;\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n \n .dashboard {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 25px;\n margin-bottom: 30px;\n }\n \n .card {\n background: var(--card-bg);\n border-radius: 20px;\n box-shadow: var(--shadow);\n padding: 25px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n \n .card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 5px;\n height: 100%;\n background: var(--primary);\n }\n \n .card:hover {\n transform: translateY(-7px);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px;\n }\n \n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #f0f0f0;\n }\n \n .card-title {\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--primary);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .card-title i {\n font-size: 1.1rem;\n }\n \n .stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 18px;\n }\n \n .stat-card {\n background: #f8f9ff;\n border-radius: 15px;\n padding: 18px;\n text-align: center;\n transition: transform 0.3s ease;\n border: 1px solid #f0f0f0;\n }\n \n .stat-card:hover {\n transform: translateY(-3px);\n background: white;\n box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;\n }\n \n .stat-value {\n font-size: 2rem;\n font-weight: 700;\n margin: 12px 0;\n font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;\n }\n \n .stat-positive { color: var(--positive); }\n .stat-neutral { color: var(--neutral); }\n .stat-negative { color: var(--negative); }\n \n .stat-label {\n font-size: 0.9rem;\n color: #666;\n font-weight: 500;\n }\n \n .chart-container {\n height: 300px;\n position: relative;\n margin: 15px 0;\n }\n \n \/* \u65e5\u5386\u6a21\u5757\u6837\u5f0f *\/\n .time-selector {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 30px;\n }\n \n .time-card {\n flex: 1;\n min-width: 200px;\n background: white;\n border-radius: 15px;\n padding: 20px;\n box-shadow: var(--shadow);\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .time-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n }\n \n .time-card.active {\n border-color: var(--primary);\n background: rgba(108, 92, 231, 0.05);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.2);\n }\n \n .time-title {\n font-size: 1.1rem;\n font-weight: 600;\n color: var(--primary);\n margin-bottom: 10px;\n }\n \n .time-range {\n font-size: 0.9rem;\n color: #666;\n }\n \n .members-tabs {\n display: flex;\n background: #f0f2ff;\n border-radius: 15px;\n padding: 8px;\n margin-bottom: 30px;\n box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 1;\n text-align: center;\n padding: 14px 5px;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.4s ease;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-width: 120px;\n }\n \n .tab:hover {\n background: rgba(108, 92, 231, 0.1);\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 .emotion-tag {\n display: inline-block;\n padding: 7px 15px;\n border-radius: 20px;\n font-size: 0.9rem;\n margin: 5px;\n font-weight: 500;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;\n }\n \n .tag-happy { background: rgba(0, 184, 148, 0.15); color: var(--positive); }\n .tag-calm { background: rgba(253, 203, 110, 0.15); color: #d35400; }\n .tag-grateful { background: rgba(0, 206, 201, 0.15); color: #00a5a0; }\n .tag-anxious { background: rgba(255, 118, 117, 0.15); color: var(--negative); }\n .tag-tense { background: rgba(129, 236, 236, 0.15); color: #00a5a0; }\n .tag-angry { background: rgba(178, 190, 195, 0.15); color: #2d3436; }\n .tag-surprise { background: rgba(108, 92, 231, 0.15); color: var(--primary); }\n \n .insight-card {\n background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);\n color: white;\n border-radius: 20px;\n padding: 30px;\n grid-column: span 2;\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: 600;\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 \/* \u6570\u636e\u4e0a\u4f20\u533a\u57df *\/\n .upload-section {\n background: white;\n border-radius: 20px;\n box-shadow: var(--shadow);\n padding: 30px;\n margin-top: 40px;\n border-top: 4px solid var(--primary);\n }\n \n .upload-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n padding-bottom: 15px;\n border-bottom: 1px solid #f0f0f0;\n }\n \n .upload-header h2 {\n font-size: 1.5rem;\n color: var(--primary);\n }\n \n .upload-header i {\n font-size: 1.8rem;\n color: var(--primary);\n }\n \n .upload-form {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n }\n \n .form-group {\n margin-bottom: 20px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: var(--dark);\n }\n \n .form-control {\n width: 100%;\n padding: 14px;\n border: 1px solid #ddd;\n border-radius: 10px;\n font-size: 1rem;\n background: #f8f9ff;\n }\n \n .form-control:focus {\n border-color: var(--primary);\n outline: none;\n box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);\n }\n \n .submit-btn {\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 10px;\n padding: 15px 30px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n grid-column: span 2;\n max-width: 300px;\n margin: 20px auto 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n \n .submit-btn:hover {\n background: #5a4bd4;\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);\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 \n \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n @media (max-width: 1200px) {\n .dashboard {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .insight-card {\n grid-column: span 2;\n }\n }\n \n @media (max-width: 900px) {\n .time-selector {\n flex-direction: column;\n }\n \n .time-card {\n min-width: 100%;\n }\n \n .upload-form {\n grid-template-columns: 1fr;\n }\n \n .submit-btn {\n grid-column: span 1;\n }\n }\n \n @media (max-width: 768px) {\n header {\n padding: 20px 15px;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .dashboard {\n grid-template-columns: 1fr;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n \n .insight-card {\n grid-column: span 1;\n }\n \n .members-tabs {\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 0 0 calc(50% - 10px);\n margin-bottom: 8px;\n font-size: 0.9rem;\n padding: 12px 5px;\n }\n \n .chart-container {\n height: 250px;\n }\n }\n \n @media (max-width: 480px) {\n .container {\n padding: 10px;\n }\n \n header {\n padding: 15px 10px;\n }\n \n h1 {\n font-size: 1.6rem;\n }\n \n .subtitle {\n font-size: 0.95rem;\n }\n \n .card {\n padding: 20px 15px;\n }\n \n .card-title {\n font-size: 1.1rem;\n }\n \n .stat-value {\n font-size: 1.8rem;\n }\n \n .tab {\n flex: 0 0 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n \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\" id=\"currentWeekRange\"><\/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\" id=\"lastWeekRange\"><\/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\" id=\"currentMonthRange\"><\/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\" id=\"lastMonthRange\"><\/div>\n <\/div>\n <\/div>\n \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 <div class=\"dashboard\">\n \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 <\/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\">28%<\/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 \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 <\/div>\n <div class=\"chart-container\">\n <canvas id=\"emotionChart\"><\/canvas>\n <\/div>\n <div id=\"emotionTags\">\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 \n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-title\">\n <i class=\"fas fa-calendar-alt\"><\/i> \u5bb6\u5ead\u60c5\u7eea\u70ed\u529b\u56fe\n <\/div>\n <div class=\"stat-label\">\u672c\u5468\u6570\u636e<\/div>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"heatmapChart\"><\/canvas>\n <\/div>\n <\/div>\n \n \n <div class=\"insight-card\">\n <div class=\"insight-title\">\n <i class=\"fas fa-lightbulb\"><\/i> \u672c\u5468\u60c5\u611f\u8d8b\u52bf\u5206\u6790\n <\/div>\n <div class=\"insight-content\" id=\"insightText\">\n <p>\u672c\u5468\u5bb6\u5ead\u6210\u5458\u6574\u4f53\u60c5\u7eea\u4ee5\u79ef\u6781\u4e3a\u4e3b\uff0c\u5feb\u4e50\u548c\u5e73\u9759\u60c5\u7eea\u5360\u6bd4\u6700\u9ad8\u3002<\/p>\n <p>\u5468\u4e94\u662f\u60c5\u7eea\u5cf0\u503c\u65e5\uff0c\u5168\u5bb6\u5171\u8bb0\u5f55\u4e867\u6b21\u5feb\u4e50\u60c5\u7eea\u3002<\/p>\n <p>\u5468\u4e00\u548c\u5468\u4e09\u6709\u5c11\u91cf\u8d1f\u9762\u60c5\u7eea\u8bb0\u5f55\uff0c\u4e3b\u8981\u96c6\u4e2d\u5728\u7126\u8651\u548c\u7d27\u5f20\u3002<\/p>\n <div class=\"recommendation\">\n <strong>\u5efa\u8bae\uff1a<\/strong> \u5468\u672b\u589e\u52a0\u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\uff0c\u5de9\u56fa\u79ef\u6781\u60c5\u7eea\u3002\n <\/div>\n \n <div class=\"member-highlight\" id=\"memberHighlight\">\n <div class=\"member-avatar\">\n <i class=\"fas fa-users\"><\/i>\n <\/div>\n <div class=\"member-info\">\n <h4>\u5168\u5bb6\u60c5\u611f\u72b6\u6001<\/h4>\n <p>\u6574\u4f53\u5065\u5eb7\uff0c\u79ef\u6781\u60c5\u7eea\u5360\u4e3b\u5bfc<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"card\" style=\"grid-column: span 2;\">\n <div class=\"card-header\">\n <div class=\"card-title\">\n <i class=\"fas fa-chart-area\"><\/i> \u672c\u5468\u60c5\u611f\u8d8b\u52bf\n <\/div>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"trendChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"upload-section\">\n <div class=\"upload-header\">\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\n <h2>\u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55<\/h2>\n <\/div>\n <div class=\"upload-form\">\n <div class=\"form-group\">\n <label for=\"memberSelect\">\u9009\u62e9\u5bb6\u5ead\u6210\u5458<\/label>\n <select class=\"form-control\" id=\"memberSelect\">\n <option value=\"all\">\u5168\u90e8\u6210\u5458<\/option>\n <option value=\"dad\">\u7238\u7238<\/option>\n <option value=\"mom\">\u5988\u5988<\/option>\n <option value=\"ming\">\u5c0f\u660e<\/option>\n <option value=\"hong\">\u5c0f\u7ea2<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"emotionSelect\">\u9009\u62e9\u60c5\u7eea\u7c7b\u578b<\/label>\n <select class=\"form-control\" id=\"emotionSelect\">\n <option value=\"happy\">\u5feb\u4e50<\/option>\n <option value=\"calm\">\u5e73\u9759<\/option>\n <option value=\"grateful\">\u611f\u6069<\/option>\n <option value=\"anxious\">\u7126\u8651<\/option>\n <option value=\"tense\">\u7d27\u5f20<\/option>\n <option value=\"angry\">\u6124\u6012<\/option>\n <option value=\"surprise\">\u60ca\u559c<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"dateInput\">\u9009\u62e9\u65e5\u671f<\/label>\n <input type=\"date\" class=\"form-control\" id=\"dateInput\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"intensity\">\u60c5\u7eea\u5f3a\u5ea6<\/label>\n <input type=\"range\" class=\"form-control\" id=\"intensity\" min=\"1\" max=\"10\" value=\"5\">\n <div class=\"stat-label\" style=\"text-align: center; margin-top: 8px;\">\n <span id=\"intensityValue\">5<\/span> \/ 10\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"notes\">\u8bb0\u5f55\u5907\u6ce8<\/label>\n <textarea class=\"form-control\" id=\"notes\" rows=\"3\" placeholder=\"\u8bb0\u5f55\u5177\u4f53\u4e8b\u4ef6\u6216\u611f\u53d7...\"><\/textarea>\n <\/div>\n \n <button type=\"button\" class=\"submit-btn\" id=\"addDataBtn\">\n <i class=\"fas fa-plus-circle\"><\/i> \u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55\n <\/button>\n <\/div>\n <\/div>\n \n <footer>\n \u00a9 2025 \u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u5206\u6790\u7cfb\u7edf | \u6570\u636e\u66f4\u65b0\u65f6\u95f4: <span id=\"updateTime\"><\/span>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ \u83b7\u53d6\u5f53\u524d\u65e5\u671f\u5e76\u683c\u5f0f\u5316\n function getCurrentDate() {\n const now = new Date();\n return now.toISOString().split('T')[0];\n }\n \n \/\/ \u8bbe\u7f6e\u66f4\u65b0\u65f6\u95f4\n document.getElementById('updateTime').textContent = getCurrentDate();\n \n \/\/ \u8bbe\u7f6e\u65e5\u671f\u8303\u56f4\n function setDateRanges() {\n const now = new Date();\n \n \/\/ \u672c\u5468\u8303\u56f4\n const monday = new Date(now);\n monday.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1));\n const sunday = new Date(monday);\n sunday.setDate(monday.getDate() + 6);\n \n document.getElementById('currentWeekRange').textContent = \n `${formatDate(monday)} \u81f3 ${formatDate(sunday)}`;\n \n \/\/ \u4e0a\u5468\u8303\u56f4\n const lastMonday = new Date(monday);\n lastMonday.setDate(monday.getDate() - 7);\n const lastSunday = new Date(sunday);\n lastSunday.setDate(sunday.getDate() - 7);\n \n document.getElementById('lastWeekRange').textContent = \n `${formatDate(lastMonday)} \u81f3 ${formatDate(lastSunday)}`;\n \n \/\/ \u672c\u6708\u8303\u56f4\n const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);\n const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);\n \n document.getElementById('currentMonthRange').textContent = \n `${formatDate(firstDay)} \u81f3 ${formatDate(lastDay)}`;\n \n \/\/ \u4e0a\u6708\u8303\u56f4\n const lastMonthFirst = new Date(now.getFullYear(), now.getMonth() - 1, 1);\n const lastMonthLast = new Date(now.getFullYear(), now.getMonth(), 0);\n \n document.getElementById('lastMonthRange').textContent = \n `${formatDate(lastMonthFirst)} \u81f3 ${formatDate(lastMonthLast)}`;\n }\n \n \/\/ \u683c\u5f0f\u5316\u65e5\u671f\u4e3a YYYY-MM-DD\n function formatDate(date) {\n return date.toISOString().split('T')[0];\n }\n \n \/\/ \u8bbe\u7f6e\u65e5\u671f\u8f93\u5165\u9ed8\u8ba4\u503c\n document.getElementById('dateInput').value = getCurrentDate();\n \n \/\/ \u66f4\u65b0\u60c5\u7eea\u5f3a\u5ea6\u663e\u793a\n document.getElementById('intensity').addEventListener('input', function() {\n document.getElementById('intensityValue').textContent = this.value;\n });\n \n \/\/ \u5bb6\u5ead\u6210\u5458\u6570\u636e\uff08\u6309\u65f6\u95f4\u6bb5\u7ec4\u7ec7\uff09\n const familyData = {\n week: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 42,\n positivePercent: 28,\n highDay: \"15 (\u5468\u4e94)\",\n lowDay: \"3 (\u5468\u4e00)\",\n emotions: [28, 22, 18, 12, 10, 8, 2],\n heatmap: {\n positive: [2, 4, 3, 5, 7, 6, 5],\n neutral: [1, 2, 1, 2, 3, 2, 2],\n negative: [3, 1, 4, 1, 2, 1, 1]\n },\n trend: {\n happy: [3, 4, 2, 5, 7, 6, 4],\n calm: [2, 3, 3, 4, 5, 5, 4],\n anxious: [4, 2, 5, 1, 2, 1, 1]\n },\n insight: \"\u672c\u5468\u5bb6\u5ead\u6210\u5458\u6574\u4f53\u60c5\u7eea\u4ee5\u79ef\u6781\u4e3a\u4e3b\uff0c\u5feb\u4e50\u548c\u5e73\u9759\u60c5\u7eea\u5360\u6bd4\u6700\u9ad8\u3002\u5468\u4e94\u662f\u60c5\u7eea\u5cf0\u503c\u65e5\uff0c\u5168\u5bb6\u5171\u8bb0\u5f55\u4e867\u6b21\u5feb\u4e50\u60c5\u7eea\u3002\u5468\u4e00\u548c\u5468\u4e09\u6709\u5c11\u91cf\u8d1f\u9762\u60c5\u7eea\u8bb0\u5f55\uff0c\u4e3b\u8981\u96c6\u4e2d\u5728\u7126\u8651\u548c\u7d27\u5f20\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u6574\u4f53\u5065\u5eb7\uff0c\u79ef\u6781\u60c5\u7eea\u5360\u4e3b\u5bfc\"\n }\n },\n dad: {\n name: \"\u7238\u7238\",\n totalRecords: 10,\n positivePercent: 40,\n highDay: \"4 (\u5468\u4e94)\",\n lowDay: \"1 (\u5468\u4e09)\",\n emotions: [40, 20, 15, 10, 8, 5, 2],\n heatmap: {\n positive: [1, 1, 0, 2, 4, 2, 1],\n neutral: [0, 1, 1, 0, 1, 0, 1],\n negative: [2, 0, 1, 1, 0, 0, 0]\n },\n trend: {\n happy: [1, 2, 0, 3, 4, 3, 2],\n calm: [2, 1, 1, 2, 3, 2, 2],\n anxious: [1, 0, 2, 0, 0, 0, 0]\n },\n insight: \"\u7238\u7238\u672c\u5468\u60c5\u7eea\u8f83\u4e3a\u7a33\u5b9a\uff0c\u5468\u4e94\u60c5\u7eea\u8fbe\u5230\u9ad8\u5cf0\u3002\u5de5\u4f5c\u538b\u529b\u5728\u5468\u4e09\u6709\u6240\u4f53\u73b0\uff0c\u4f46\u6574\u4f53\u79ef\u6781\u60c5\u7eea\u5360\u6bd4\u9ad8\u3002\u5efa\u8bae\u5173\u6ce8\u5468\u4e09\u7684\u5de5\u4f5c\u538b\u529b\u6765\u6e90\u3002\",\n highlight: {\n name: \"\u7238\u7238\",\n status: \"\u5de5\u4f5c\u538b\u529b\u5f71\u54cd\u60c5\u7eea\uff0c\u4f46\u6574\u4f53\u79ef\u6781\"\n }\n },\n mom: {\n name: \"\u5988\u5988\",\n totalRecords: 12,\n positivePercent: 35,\n highDay: \"5 (\u5468\u4e94)\",\n lowDay: \"1 (\u5468\u4e00)\",\n emotions: [35, 25, 15, 8, 10, 5, 2],\n heatmap: {\n positive: [0, 2, 1, 2, 5, 3, 2],\n neutral: [1, 0, 1, 1, 1, 1, 0],\n negative: [2, 0, 1, 0, 0, 0, 0]\n },\n trend: {\n happy: [0, 3, 1, 3, 5, 4, 3],\n calm: [2, 1, 2, 2, 3, 2, 2],\n anxious: [1, 0, 1, 0, 0, 0, 0]\n },\n insight: \"\u5988\u5988\u672c\u5468\u60c5\u7eea\u5728\u5468\u521d\u8f83\u4f4e\uff0c\u4f46\u968f\u540e\u9010\u6e10\u63d0\u5347\u3002\u5468\u4e94\u8fbe\u5230\u60c5\u7eea\u9ad8\u5cf0\u3002\u5bb6\u52a1\u538b\u529b\u5728\u5468\u521d\u8f83\u4e3a\u660e\u663e\uff0c\u5efa\u8bae\u5bb6\u5ead\u6210\u5458\u5206\u62c5\u5468\u4e00\u5bb6\u52a1\u3002\",\n highlight: {\n name: \"\u5988\u5988\",\n status: \"\u60c5\u7eea\u9010\u6e10\u63d0\u5347\uff0c\u5bb6\u52a1\u538b\u529b\u9700\u5173\u6ce8\"\n }\n },\n ming: {\n name: \"\u5c0f\u660e\",\n totalRecords: 8,\n positivePercent: 45,\n highDay: \"3 (\u5468\u516d)\",\n lowDay: \"1 (\u5468\u4e09)\",\n emotions: [45, 15, 10, 15, 8, 5, 2],\n heatmap: {\n positive: [1, 1, 0, 1, 2, 3, 2],\n neutral: [0, 1, 1, 0, 0, 1, 0],\n negative: [1, 0, 2, 1, 0, 0, 0]\n },\n trend: {\n happy: [1, 2, 0, 2, 3, 3, 2],\n calm: [1, 0, 1, 1, 2, 1, 1],\n anxious: [0, 0, 2, 0, 0, 0, 0]\n },\n insight: \"\u5c0f\u660e\u672c\u5468\u60c5\u7eea\u6ce2\u52a8\u8f83\u5927\uff0c\u5468\u4e09\u56e0\u5b66\u4e60\u538b\u529b\u51fa\u73b0\u7126\u8651\u60c5\u7eea\u3002\u4f46\u5468\u672b\u60c5\u7eea\u660e\u663e\u597d\u8f6c\uff0c\u5efa\u8bae\u5173\u6ce8\u5b66\u4e60\u538b\u529b\u6765\u6e90\uff0c\u9002\u5f53\u589e\u52a0\u6237\u5916\u6d3b\u52a8\u65f6\u95f4\u3002\",\n highlight: {\n name: \"\u5c0f\u660e\",\n status: \"\u5b66\u4e60\u538b\u529b\u9700\u5173\u6ce8\uff0c\u5468\u672b\u60c5\u7eea\u4f73\"\n }\n },\n hong: {\n name: \"\u5c0f\u7ea2\",\n totalRecords: 12,\n positivePercent: 50,\n highDay: \"4 (\u5468\u4e94)\",\n lowDay: \"1 (\u5468\u4e00)\",\n emotions: [50, 15, 10, 10, 8, 5, 2],\n heatmap: {\n positive: [1, 2, 1, 2, 4, 3, 2],\n neutral: [0, 1, 0, 1, 1, 0, 1],\n negative: [1, 0, 1, 0, 0, 0, 0]\n },\n trend: {\n happy: [1, 3, 1, 3, 4, 3, 3],\n calm: [1, 0, 1, 1, 2, 1, 2],\n anxious: [1, 0, 1, 0, 0, 0, 0]\n },\n insight: \"\u5c0f\u7ea2\u672c\u5468\u60c5\u7eea\u6574\u4f53\u79ef\u6781\uff0c\u793e\u4ea4\u6d3b\u52a8\u5e26\u6765\u5927\u91cf\u5feb\u4e50\u60c5\u7eea\u3002\u5468\u521d\u6709\u8f7b\u5fae\u7126\u8651\uff0c\u53ef\u80fd\u4e0e\u8fd4\u6821\u6709\u5173\u3002\u5efa\u8bae\u4fdd\u6301\u793e\u4ea4\u6d3b\u52a8\u9891\u7387\uff0c\u6ce8\u610f\u5468\u521d\u60c5\u7eea\u8c03\u8282\u3002\",\n highlight: {\n name: \"\u5c0f\u7ea2\",\n status: \"\u793e\u4ea4\u6d3b\u52a8\u4fc3\u8fdb\u79ef\u6781\u60c5\u7eea\"\n }\n }\n },\n last_week: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 38,\n positivePercent: 24,\n highDay: \"12 (\u5468\u516d)\",\n lowDay: \"2 (\u5468\u4e8c)\",\n emotions: [24, 20, 16, 15, 12, 10, 3],\n heatmap: {\n positive: [1, 3, 2, 4, 6, 5, 4],\n neutral: [2, 1, 2, 1, 2, 3, 1],\n negative: [3, 2, 3, 1, 1, 1, 2]\n },\n insight: \"\u4e0a\u5468\u5bb6\u5ead\u60c5\u7eea\u76f8\u5bf9\u5e73\u7a33\uff0c\u5468\u672b\u60c5\u7eea\u8f83\u9ad8\u3002\u5468\u4e8c\u56e0\u5de5\u4f5c\/\u5b66\u4e60\u538b\u529b\u51fa\u73b0\u8f83\u591a\u8d1f\u9762\u60c5\u7eea\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u603b\u4f53\u5e73\u7a33\uff0c\u5468\u672b\u60c5\u7eea\u826f\u597d\"\n }\n },\n \/\/ \u5176\u4ed6\u6210\u5458\u7684\u4e0a\u5468\u6570\u636e\u7c7b\u4f3c...\n },\n month: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 165,\n positivePercent: 32,\n highDay: \"15 (\u5468\u4e94)\",\n lowDay: \"7 (\u5468\u4e00)\",\n emotions: [32, 25, 15, 12, 8, 6, 2],\n insight: \"\u672c\u6708\u5bb6\u5ead\u60c5\u7eea\u6574\u4f53\u79ef\u6781\uff0c\u4e2d\u65ec\u8fbe\u5230\u9ad8\u5cf0\u3002\u6708\u521d\u548c\u6708\u672b\u6709\u8f7b\u5fae\u6ce2\u52a8\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u6574\u4f53\u79ef\u6781\uff0c\u4e2d\u65ec\u4e3a\u6700\u4f73\u72b6\u6001\"\n }\n },\n \/\/ \u5176\u4ed6\u6210\u5458\u7684\u6708\u6570\u636e\u7c7b\u4f3c...\n },\n last_month: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 152,\n positivePercent: 28,\n highDay: \"20 (\u5468\u4e8c)\",\n lowDay: \"5 (\u5468\u56db)\",\n emotions: [28, 22, 18, 14, 10, 6, 2],\n insight: \"\u4e0a\u6708\u5bb6\u5ead\u60c5\u7eea\u6ce2\u52a8\u8f83\u5927\uff0c\u4e2d\u65ec\u6709\u8f83\u591a\u79ef\u6781\u60c5\u7eea\u8bb0\u5f55\u3002\u6708\u672b\u56e0\u5b66\u6821\u8003\u8bd5\u5468\u6709\u538b\u529b\u589e\u52a0\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u6ce2\u52a8\u8f83\u5927\uff0c\u8003\u8bd5\u5468\u5f71\u54cd\u660e\u663e\"\n }\n },\n \/\/ \u5176\u4ed6\u6210\u5458\u7684\u4e0a\u6708\u6570\u636e\u7c7b\u4f3c...\n }\n };\n\n \/\/ \u56fe\u8868\u5b9e\u4f8b\n let emotionChart, heatmapChart, trendChart;\n let currentPeriod = 'week';\n let currentMember = 'all';\n\n \/\/ \u521d\u59cb\u5316\u56fe\u8868\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: getEmotionData(currentPeriod, currentMember),\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 }\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 \/\/ \u70ed\u529b\u56fe\n const heatmapCtx = document.getElementById('heatmapChart').getContext('2d');\n heatmapChart = new Chart(heatmapCtx, {\n type: 'bar',\n data: getHeatmapData(currentPeriod, currentMember),\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n stacked: true,\n grid: {\n display: false\n }\n },\n y: {\n stacked: true,\n beginAtZero: true,\n ticks: {\n precision: 0\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n }\n },\n animation: {\n duration: 1000\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: getTrendData(currentPeriod, currentMember),\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n },\n plugins: {\n legend: {\n position: 'top',\n }\n },\n animation: {\n duration: 1000\n }\n }\n });\n }\n \n \/\/ \u83b7\u53d6\u60c5\u7eea\u6570\u636e\n function getEmotionData(period, member) {\n const data = familyData[period][member];\n return {\n labels: ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'],\n datasets: [{\n data: data.emotions,\n backgroundColor: [\n '#00b894', '#fdcb6e', '#00cec9', '#ff7675', '#81ecec', '#636e72', '#6c5ce7'\n ],\n borderWidth: 0\n }]\n };\n }\n \n \/\/ \u83b7\u53d6\u70ed\u529b\u56fe\u6570\u636e\n function getHeatmapData(period, member) {\n const data = familyData[period][member];\n return {\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: data.heatmap.positive,\n backgroundColor: '#00b894',\n borderRadius: 8\n }, {\n label: '\u4e2d\u6027\u60c5\u7eea',\n data: data.heatmap.neutral,\n backgroundColor: '#fdcb6e',\n borderRadius: 8\n }, {\n label: '\u6d88\u6781\u60c5\u7eea',\n data: data.heatmap.negative,\n backgroundColor: '#ff7675',\n borderRadius: 8\n }]\n };\n }\n \n \/\/ \u83b7\u53d6\u8d8b\u52bf\u6570\u636e\n function getTrendData(period, member) {\n const data = familyData[period][member];\n return {\n labels: ['\u5468\u4e00', '\u5468\u4e8c', '\u5468\u4e09', '\u5468\u56db', '\u5468\u4e94', '\u5468\u516d', '\u5468\u65e5'],\n datasets: [{\n label: '\u5feb\u4e50',\n data: data.trend.happy,\n borderColor: '#00b894',\n backgroundColor: 'rgba(0, 184, 148, 0.1)',\n tension: 0.3,\n fill: true,\n borderWidth: 3\n }, {\n label: '\u5e73\u9759',\n data: data.trend.calm,\n borderColor: '#fdcb6e',\n backgroundColor: 'rgba(253, 203, 110, 0.1)',\n tension: 0.3,\n fill: true,\n borderWidth: 3\n }, {\n label: '\u7126\u8651',\n data: data.trend.anxious,\n borderColor: '#ff7675',\n backgroundColor: 'rgba(255, 118, 117, 0.1)',\n tension: 0.3,\n fill: true,\n borderWidth: 3\n }]\n };\n }\n \n \/\/ \u66f4\u65b0UI\n function updateUI(period, member) {\n const data = familyData[period][member];\n \n \/\/ \u66f4\u65b0\u7edf\u8ba1\u5361\u7247\n document.getElementById('totalRecords').textContent = data.totalRecords;\n document.getElementById('positivePercent').textContent = data.positivePercent + '%';\n document.getElementById('highDay').textContent = data.highDay;\n document.getElementById('lowDay').textContent = data.lowDay;\n \n \/\/ \u66f4\u65b0\u60c5\u611f\u6807\u7b7e\n const tagsContainer = document.getElementById('emotionTags');\n tagsContainer.innerHTML = '';\n \n const emotions = ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'];\n emotions.forEach((emotion, index) => {\n const percent = data.emotions[index];\n let tagClass = '';\n \n switch(emotion) {\n case '\u5feb\u4e50': tagClass = 'tag-happy'; break;\n case '\u5e73\u9759': tagClass = 'tag-calm'; break;\n case '\u611f\u6069': tagClass = 'tag-grateful'; break;\n case '\u7126\u8651': tagClass = 'tag-anxious'; break;\n case '\u7d27\u5f20': tagClass = 'tag-tense'; break;\n case '\u6124\u6012': tagClass = 'tag-angry'; break;\n case '\u60ca\u559c': tagClass = 'tag-surprise'; break;\n }\n \n const tag = document.createElement('span');\n tag.className = `emotion-tag ${tagClass}`;\n tag.textContent = `${emotion} ${percent}%`;\n tagsContainer.appendChild(tag);\n });\n \n \/\/ \u66f4\u65b0\u5206\u6790\u6587\u672c\n document.getElementById('insightText').innerHTML = `\n <p>${data.insight}<\/p>\n <div class=\"recommendation\">\n <strong>\u5efa\u8bae\uff1a<\/strong> \u5468\u672b\u589e\u52a0\u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\uff0c\u5de9\u56fa\u79ef\u6781\u60c5\u7eea\u3002\n <\/div>\n \n <div class=\"member-highlight\">\n <div class=\"member-avatar\">\n ${member === 'all' ? '<i class=\"fas fa-users\"><\/i>' : \n member === 'dad' ? '<i class=\"fas fa-user\"><\/i>' : \n member === 'mom' ? '<i class=\"fas fa-user\"><\/i>' : \n '<i class=\"fas fa-user\"><\/i>'}\n <\/div>\n <div class=\"member-info\">\n <h4>${data.highlight.name}<\/h4>\n <p>${data.highlight.status}<\/p>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u66f4\u65b0\u56fe\u8868\u6570\u636e\n emotionChart.data = getEmotionData(period, member);\n heatmapChart.data = getHeatmapData(period, member);\n trendChart.data = getTrendData(period, member);\n \n \/\/ \u66f4\u65b0\u56fe\u8868\n emotionChart.update();\n heatmapChart.update();\n trendChart.update();\n }\n \n \/\/ \u6210\u5458\u6807\u7b7e\u5207\u6362\u529f\u80fd\n document.querySelectorAll('.tab').forEach(tab => {\n tab.addEventListener('click', function() {\n const member = this.getAttribute('data-member');\n \n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n \n currentMember = member;\n updateUI(currentPeriod, currentMember);\n });\n });\n \n \/\/ \u65f6\u95f4\u9009\u62e9\u529f\u80fd\n document.querySelectorAll('.time-card').forEach(card => {\n card.addEventListener('click', function() {\n const period = this.getAttribute('data-period');\n \n document.querySelectorAll('.time-card').forEach(c => c.classList.remove('active'));\n this.classList.add('active');\n \n currentPeriod = period;\n updateUI(currentPeriod, currentMember);\n });\n });\n \n \/\/ \u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55\n document.getElementById('addDataBtn').addEventListener('click', function() {\n const member = document.getElementById('memberSelect').value;\n const emotion = document.getElementById('emotionSelect').value;\n const date = document.getElementById('dateInput').value;\n const intensity = document.getElementById('intensity').value;\n const notes = document.getElementById('notes').value;\n \n if (!date || !intensity) {\n alert('\u8bf7\u586b\u5199\u5b8c\u6574\u4fe1\u606f\uff01');\n return;\n }\n \n \/\/ \u6a21\u62df\u6570\u636e\u6dfb\u52a0\u6548\u679c\n const emotionNames = {\n 'happy': '\u5feb\u4e50',\n 'calm': '\u5e73\u9759',\n 'grateful': '\u611f\u6069',\n 'anxious': '\u7126\u8651',\n 'tense': '\u7d27\u5f20',\n 'angry': '\u6124\u6012',\n 'surprise': '\u60ca\u559c'\n };\n \n \/\/ \u66f4\u65b0\u6570\u636e\n familyData.week[member].totalRecords++;\n \n \/\/ \u6839\u636e\u60c5\u7eea\u7c7b\u578b\u66f4\u65b0\u767e\u5206\u6bd4\n const emotions = familyData.week[member].emotions;\n switch(emotion) {\n case 'happy': emotions[0] += 1; break;\n case 'calm': emotions[1] += 1; break;\n case 'grateful': emotions[2] += 1; break;\n case 'anxious': emotions[3] += 1; break;\n case 'tense': emotions[4] += 1; break;\n case 'angry': emotions[5] += 1; break;\n case 'surprise': emotions[6] += 1; break;\n }\n \n \/\/ \u91cd\u65b0\u8ba1\u7b97\u767e\u5206\u6bd4\n const total = emotions.reduce((sum, val) => sum + val, 0);\n for (let i = 0; i < emotions.length; i++) {\n emotions[i] = Math.round((emotions[i] \/ total) * 100);\n }\n \n \/\/ \u66f4\u65b0\u79ef\u6781\u60c5\u7eea\u767e\u5206\u6bd4\n const positiveEmotions = emotions[0] + emotions[1] + emotions[2];\n familyData.week[member].positivePercent = Math.round((positiveEmotions \/ total) * 100);\n \n \/\/ \u663e\u793a\u6210\u529f\u6d88\u606f\n alert(`\u5df2\u6210\u529f\u4e3a${familyData.week[member].name}\u6dfb\u52a0${emotionNames[emotion]}\u60c5\u7eea\u8bb0\u5f55\uff01`);\n \n \/\/ \u66f4\u65b0UI\n updateUI(currentPeriod, currentMember);\n \n \/\/ \u66f4\u65b0\u66f4\u65b0\u65f6\u95f4\n const now = new Date();\n document.getElementById('updateTime').textContent = \n `${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 \n \/\/ \u91cd\u7f6e\u8868\u5355\n document.getElementById('notes').value = '';\n });\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n window.addEventListener('load', function() {\n setDateRanges();\n initCharts();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u5206\u6790\u7cfb\u7edf \u672c\u5468 \u4e0a\u5468 \u672c\u6708 \u4e0a\u6708 \u5168\u90e8\u6210\u5458 \u7238\u7238 \u5988\u5988 \u5c0f\u660e \u5c0f\u7ea2 \u603b\u4f53\u7edf\u8ba1 \u60c5\u7eea\u8bb0\u5f55\u603b\u6570 42 […]<\/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-666","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/666","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=666"}],"version-history":[{"count":23,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/666\/revisions"}],"predecessor-version":[{"id":1266,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/666\/revisions\/1266"}],"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=666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":666,"date":"2025-06-11T15:43:17","date_gmt":"2025-06-11T07:43:17","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=666"},"modified":"2025-07-23T11:09:26","modified_gmt":"2025-07-23T03:09:26","slug":"datafamily","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/heartsync\/datafamily\/","title":{"rendered":"\u5173\u7cfb\u5206\u6790\u6a21\u62df\u7cfb\u7edf"},"content":{"rendered":"\n\n\n\n \n \n \u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u5206\u6790\u7cfb\u7edf<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #6c5ce7;\n --primary-light: #a29bfe;\n --secondary: #00cec9;\n --accent: #fd79a8;\n --positive: #00b894;\n --neutral: #fdcb6e;\n --negative: #ff7675;\n --light: #f7f7f7;\n --dark: #2d3436;\n --card-bg: #ffffff;\n --shadow: rgba(99, 99, 99, 0.15) 0px 2px 10px 0px;\n --header-gradient: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;\n }\n \n body {\n background: #f8f9ff;\n color: var(--dark);\n line-height: 1.6;\n min-height: 100vh;\n overflow-x: hidden;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .subtitle {\n font-size: 1.1rem;\n opacity: 0.9;\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n \n .dashboard {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 25px;\n margin-bottom: 30px;\n }\n \n .card {\n background: var(--card-bg);\n border-radius: 20px;\n box-shadow: var(--shadow);\n padding: 25px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n \n .card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 5px;\n height: 100%;\n background: var(--primary);\n }\n \n .card:hover {\n transform: translateY(-7px);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px;\n }\n \n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #f0f0f0;\n }\n \n .card-title {\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--primary);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .card-title i {\n font-size: 1.1rem;\n }\n \n .stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 18px;\n }\n \n .stat-card {\n background: #f8f9ff;\n border-radius: 15px;\n padding: 18px;\n text-align: center;\n transition: transform 0.3s ease;\n border: 1px solid #f0f0f0;\n }\n \n .stat-card:hover {\n transform: translateY(-3px);\n background: white;\n box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;\n }\n \n .stat-value {\n font-size: 2rem;\n font-weight: 700;\n margin: 12px 0;\n font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;\n }\n \n .stat-positive { color: var(--positive); }\n .stat-neutral { color: var(--neutral); }\n .stat-negative { color: var(--negative); }\n \n .stat-label {\n font-size: 0.9rem;\n color: #666;\n font-weight: 500;\n }\n \n .chart-container {\n height: 300px;\n position: relative;\n margin: 15px 0;\n }\n \n \/* \u65e5\u5386\u6a21\u5757\u6837\u5f0f *\/\n .time-selector {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 30px;\n }\n \n .time-card {\n flex: 1;\n min-width: 200px;\n background: white;\n border-radius: 15px;\n padding: 20px;\n box-shadow: var(--shadow);\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .time-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n }\n \n .time-card.active {\n border-color: var(--primary);\n background: rgba(108, 92, 231, 0.05);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.2);\n }\n \n .time-title {\n font-size: 1.1rem;\n font-weight: 600;\n color: var(--primary);\n margin-bottom: 10px;\n }\n \n .time-range {\n font-size: 0.9rem;\n color: #666;\n }\n \n .members-tabs {\n display: flex;\n background: #f0f2ff;\n border-radius: 15px;\n padding: 8px;\n margin-bottom: 30px;\n box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 1;\n text-align: center;\n padding: 14px 5px;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.4s ease;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-width: 120px;\n }\n \n .tab:hover {\n background: rgba(108, 92, 231, 0.1);\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 .emotion-tag {\n display: inline-block;\n padding: 7px 15px;\n border-radius: 20px;\n font-size: 0.9rem;\n margin: 5px;\n font-weight: 500;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;\n }\n \n .tag-happy { background: rgba(0, 184, 148, 0.15); color: var(--positive); }\n .tag-calm { background: rgba(253, 203, 110, 0.15); color: #d35400; }\n .tag-grateful { background: rgba(0, 206, 201, 0.15); color: #00a5a0; }\n .tag-anxious { background: rgba(255, 118, 117, 0.15); color: var(--negative); }\n .tag-tense { background: rgba(129, 236, 236, 0.15); color: #00a5a0; }\n .tag-angry { background: rgba(178, 190, 195, 0.15); color: #2d3436; }\n .tag-surprise { background: rgba(108, 92, 231, 0.15); color: var(--primary); }\n \n .insight-card {\n background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);\n color: white;\n border-radius: 20px;\n padding: 30px;\n grid-column: span 2;\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: 600;\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 \/* \u6570\u636e\u4e0a\u4f20\u533a\u57df *\/\n .upload-section {\n background: white;\n border-radius: 20px;\n box-shadow: var(--shadow);\n padding: 30px;\n margin-top: 40px;\n border-top: 4px solid var(--primary);\n }\n \n .upload-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n padding-bottom: 15px;\n border-bottom: 1px solid #f0f0f0;\n }\n \n .upload-header h2 {\n font-size: 1.5rem;\n color: var(--primary);\n }\n \n .upload-header i {\n font-size: 1.8rem;\n color: var(--primary);\n }\n \n .upload-form {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n }\n \n .form-group {\n margin-bottom: 20px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: var(--dark);\n }\n \n .form-control {\n width: 100%;\n padding: 14px;\n border: 1px solid #ddd;\n border-radius: 10px;\n font-size: 1rem;\n background: #f8f9ff;\n }\n \n .form-control:focus {\n border-color: var(--primary);\n outline: none;\n box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);\n }\n \n .submit-btn {\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 10px;\n padding: 15px 30px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n grid-column: span 2;\n max-width: 300px;\n margin: 20px auto 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n \n .submit-btn:hover {\n background: #5a4bd4;\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);\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 \n \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n @media (max-width: 1200px) {\n .dashboard {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .insight-card {\n grid-column: span 2;\n }\n }\n \n @media (max-width: 900px) {\n .time-selector {\n flex-direction: column;\n }\n \n .time-card {\n min-width: 100%;\n }\n \n .upload-form {\n grid-template-columns: 1fr;\n }\n \n .submit-btn {\n grid-column: span 1;\n }\n }\n \n @media (max-width: 768px) {\n header {\n padding: 20px 15px;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .dashboard {\n grid-template-columns: 1fr;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n \n .insight-card {\n grid-column: span 1;\n }\n \n .members-tabs {\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 0 0 calc(50% - 10px);\n margin-bottom: 8px;\n font-size: 0.9rem;\n padding: 12px 5px;\n }\n \n .chart-container {\n height: 250px;\n }\n }\n \n @media (max-width: 480px) {\n .container {\n padding: 10px;\n }\n \n header {\n padding: 15px 10px;\n }\n \n h1 {\n font-size: 1.6rem;\n }\n \n .subtitle {\n font-size: 0.95rem;\n }\n \n .card {\n padding: 20px 15px;\n }\n \n .card-title {\n font-size: 1.1rem;\n }\n \n .stat-value {\n font-size: 1.8rem;\n }\n \n .tab {\n flex: 0 0 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n \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\" id=\"currentWeekRange\"><\/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\" id=\"lastWeekRange\"><\/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\" id=\"currentMonthRange\"><\/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\" id=\"lastMonthRange\"><\/div>\n <\/div>\n <\/div>\n \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 <div class=\"dashboard\">\n \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 <\/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\">28%<\/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 \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 <\/div>\n <div class=\"chart-container\">\n <canvas id=\"emotionChart\"><\/canvas>\n <\/div>\n <div id=\"emotionTags\">\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 \n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-title\">\n <i class=\"fas fa-calendar-alt\"><\/i> \u5bb6\u5ead\u60c5\u7eea\u70ed\u529b\u56fe\n <\/div>\n <div class=\"stat-label\">\u672c\u5468\u6570\u636e<\/div>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"heatmapChart\"><\/canvas>\n <\/div>\n <\/div>\n \n \n <div class=\"insight-card\">\n <div class=\"insight-title\">\n <i class=\"fas fa-lightbulb\"><\/i> \u672c\u5468\u60c5\u611f\u8d8b\u52bf\u5206\u6790\n <\/div>\n <div class=\"insight-content\" id=\"insightText\">\n <p>\u672c\u5468\u5bb6\u5ead\u6210\u5458\u6574\u4f53\u60c5\u7eea\u4ee5\u79ef\u6781\u4e3a\u4e3b\uff0c\u5feb\u4e50\u548c\u5e73\u9759\u60c5\u7eea\u5360\u6bd4\u6700\u9ad8\u3002<\/p>\n <p>\u5468\u4e94\u662f\u60c5\u7eea\u5cf0\u503c\u65e5\uff0c\u5168\u5bb6\u5171\u8bb0\u5f55\u4e867\u6b21\u5feb\u4e50\u60c5\u7eea\u3002<\/p>\n <p>\u5468\u4e00\u548c\u5468\u4e09\u6709\u5c11\u91cf\u8d1f\u9762\u60c5\u7eea\u8bb0\u5f55\uff0c\u4e3b\u8981\u96c6\u4e2d\u5728\u7126\u8651\u548c\u7d27\u5f20\u3002<\/p>\n <div class=\"recommendation\">\n <strong>\u5efa\u8bae\uff1a<\/strong> \u5468\u672b\u589e\u52a0\u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\uff0c\u5de9\u56fa\u79ef\u6781\u60c5\u7eea\u3002\n <\/div>\n \n <div class=\"member-highlight\" id=\"memberHighlight\">\n <div class=\"member-avatar\">\n <i class=\"fas fa-users\"><\/i>\n <\/div>\n <div class=\"member-info\">\n <h4>\u5168\u5bb6\u60c5\u611f\u72b6\u6001<\/h4>\n <p>\u6574\u4f53\u5065\u5eb7\uff0c\u79ef\u6781\u60c5\u7eea\u5360\u4e3b\u5bfc<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"card\" style=\"grid-column: span 2;\">\n <div class=\"card-header\">\n <div class=\"card-title\">\n <i class=\"fas fa-chart-area\"><\/i> \u672c\u5468\u60c5\u611f\u8d8b\u52bf\n <\/div>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"trendChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"upload-section\">\n <div class=\"upload-header\">\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\n <h2>\u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55<\/h2>\n <\/div>\n <div class=\"upload-form\">\n <div class=\"form-group\">\n <label for=\"memberSelect\">\u9009\u62e9\u5bb6\u5ead\u6210\u5458<\/label>\n <select class=\"form-control\" id=\"memberSelect\">\n <option value=\"all\">\u5168\u90e8\u6210\u5458<\/option>\n <option value=\"dad\">\u7238\u7238<\/option>\n <option value=\"mom\">\u5988\u5988<\/option>\n <option value=\"ming\">\u5c0f\u660e<\/option>\n <option value=\"hong\">\u5c0f\u7ea2<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"emotionSelect\">\u9009\u62e9\u60c5\u7eea\u7c7b\u578b<\/label>\n <select class=\"form-control\" id=\"emotionSelect\">\n <option value=\"happy\">\u5feb\u4e50<\/option>\n <option value=\"calm\">\u5e73\u9759<\/option>\n <option value=\"grateful\">\u611f\u6069<\/option>\n <option value=\"anxious\">\u7126\u8651<\/option>\n <option value=\"tense\">\u7d27\u5f20<\/option>\n <option value=\"angry\">\u6124\u6012<\/option>\n <option value=\"surprise\">\u60ca\u559c<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"dateInput\">\u9009\u62e9\u65e5\u671f<\/label>\n <input type=\"date\" class=\"form-control\" id=\"dateInput\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"intensity\">\u60c5\u7eea\u5f3a\u5ea6<\/label>\n <input type=\"range\" class=\"form-control\" id=\"intensity\" min=\"1\" max=\"10\" value=\"5\">\n <div class=\"stat-label\" style=\"text-align: center; margin-top: 8px;\">\n <span id=\"intensityValue\">5<\/span> \/ 10\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"notes\">\u8bb0\u5f55\u5907\u6ce8<\/label>\n <textarea class=\"form-control\" id=\"notes\" rows=\"3\" placeholder=\"\u8bb0\u5f55\u5177\u4f53\u4e8b\u4ef6\u6216\u611f\u53d7...\"><\/textarea>\n <\/div>\n \n <button type=\"button\" class=\"submit-btn\" id=\"addDataBtn\">\n <i class=\"fas fa-plus-circle\"><\/i> \u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55\n <\/button>\n <\/div>\n <\/div>\n \n <footer>\n \u00a9 2025 \u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u5206\u6790\u7cfb\u7edf | \u6570\u636e\u66f4\u65b0\u65f6\u95f4: <span id=\"updateTime\"><\/span>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ \u83b7\u53d6\u5f53\u524d\u65e5\u671f\u5e76\u683c\u5f0f\u5316\n function getCurrentDate() {\n const now = new Date();\n return now.toISOString().split('T')[0];\n }\n \n \/\/ \u8bbe\u7f6e\u66f4\u65b0\u65f6\u95f4\n document.getElementById('updateTime').textContent = getCurrentDate();\n \n \/\/ \u8bbe\u7f6e\u65e5\u671f\u8303\u56f4\n function setDateRanges() {\n const now = new Date();\n \n \/\/ \u672c\u5468\u8303\u56f4\n const monday = new Date(now);\n monday.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1));\n const sunday = new Date(monday);\n sunday.setDate(monday.getDate() + 6);\n \n document.getElementById('currentWeekRange').textContent = \n `${formatDate(monday)} \u81f3 ${formatDate(sunday)}`;\n \n \/\/ \u4e0a\u5468\u8303\u56f4\n const lastMonday = new Date(monday);\n lastMonday.setDate(monday.getDate() - 7);\n const lastSunday = new Date(sunday);\n lastSunday.setDate(sunday.getDate() - 7);\n \n document.getElementById('lastWeekRange').textContent = \n `${formatDate(lastMonday)} \u81f3 ${formatDate(lastSunday)}`;\n \n \/\/ \u672c\u6708\u8303\u56f4\n const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);\n const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);\n \n document.getElementById('currentMonthRange').textContent = \n `${formatDate(firstDay)} \u81f3 ${formatDate(lastDay)}`;\n \n \/\/ \u4e0a\u6708\u8303\u56f4\n const lastMonthFirst = new Date(now.getFullYear(), now.getMonth() - 1, 1);\n const lastMonthLast = new Date(now.getFullYear(), now.getMonth(), 0);\n \n document.getElementById('lastMonthRange').textContent = \n `${formatDate(lastMonthFirst)} \u81f3 ${formatDate(lastMonthLast)}`;\n }\n \n \/\/ \u683c\u5f0f\u5316\u65e5\u671f\u4e3a YYYY-MM-DD\n function formatDate(date) {\n return date.toISOString().split('T')[0];\n }\n \n \/\/ \u8bbe\u7f6e\u65e5\u671f\u8f93\u5165\u9ed8\u8ba4\u503c\n document.getElementById('dateInput').value = getCurrentDate();\n \n \/\/ \u66f4\u65b0\u60c5\u7eea\u5f3a\u5ea6\u663e\u793a\n document.getElementById('intensity').addEventListener('input', function() {\n document.getElementById('intensityValue').textContent = this.value;\n });\n \n \/\/ \u5bb6\u5ead\u6210\u5458\u6570\u636e\uff08\u6309\u65f6\u95f4\u6bb5\u7ec4\u7ec7\uff09\n const familyData = {\n week: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 42,\n positivePercent: 28,\n highDay: \"15 (\u5468\u4e94)\",\n lowDay: \"3 (\u5468\u4e00)\",\n emotions: [28, 22, 18, 12, 10, 8, 2],\n heatmap: {\n positive: [2, 4, 3, 5, 7, 6, 5],\n neutral: [1, 2, 1, 2, 3, 2, 2],\n negative: [3, 1, 4, 1, 2, 1, 1]\n },\n trend: {\n happy: [3, 4, 2, 5, 7, 6, 4],\n calm: [2, 3, 3, 4, 5, 5, 4],\n anxious: [4, 2, 5, 1, 2, 1, 1]\n },\n insight: \"\u672c\u5468\u5bb6\u5ead\u6210\u5458\u6574\u4f53\u60c5\u7eea\u4ee5\u79ef\u6781\u4e3a\u4e3b\uff0c\u5feb\u4e50\u548c\u5e73\u9759\u60c5\u7eea\u5360\u6bd4\u6700\u9ad8\u3002\u5468\u4e94\u662f\u60c5\u7eea\u5cf0\u503c\u65e5\uff0c\u5168\u5bb6\u5171\u8bb0\u5f55\u4e867\u6b21\u5feb\u4e50\u60c5\u7eea\u3002\u5468\u4e00\u548c\u5468\u4e09\u6709\u5c11\u91cf\u8d1f\u9762\u60c5\u7eea\u8bb0\u5f55\uff0c\u4e3b\u8981\u96c6\u4e2d\u5728\u7126\u8651\u548c\u7d27\u5f20\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u6574\u4f53\u5065\u5eb7\uff0c\u79ef\u6781\u60c5\u7eea\u5360\u4e3b\u5bfc\"\n }\n },\n dad: {\n name: \"\u7238\u7238\",\n totalRecords: 10,\n positivePercent: 40,\n highDay: \"4 (\u5468\u4e94)\",\n lowDay: \"1 (\u5468\u4e09)\",\n emotions: [40, 20, 15, 10, 8, 5, 2],\n heatmap: {\n positive: [1, 1, 0, 2, 4, 2, 1],\n neutral: [0, 1, 1, 0, 1, 0, 1],\n negative: [2, 0, 1, 1, 0, 0, 0]\n },\n trend: {\n happy: [1, 2, 0, 3, 4, 3, 2],\n calm: [2, 1, 1, 2, 3, 2, 2],\n anxious: [1, 0, 2, 0, 0, 0, 0]\n },\n insight: \"\u7238\u7238\u672c\u5468\u60c5\u7eea\u8f83\u4e3a\u7a33\u5b9a\uff0c\u5468\u4e94\u60c5\u7eea\u8fbe\u5230\u9ad8\u5cf0\u3002\u5de5\u4f5c\u538b\u529b\u5728\u5468\u4e09\u6709\u6240\u4f53\u73b0\uff0c\u4f46\u6574\u4f53\u79ef\u6781\u60c5\u7eea\u5360\u6bd4\u9ad8\u3002\u5efa\u8bae\u5173\u6ce8\u5468\u4e09\u7684\u5de5\u4f5c\u538b\u529b\u6765\u6e90\u3002\",\n highlight: {\n name: \"\u7238\u7238\",\n status: \"\u5de5\u4f5c\u538b\u529b\u5f71\u54cd\u60c5\u7eea\uff0c\u4f46\u6574\u4f53\u79ef\u6781\"\n }\n },\n mom: {\n name: \"\u5988\u5988\",\n totalRecords: 12,\n positivePercent: 35,\n highDay: \"5 (\u5468\u4e94)\",\n lowDay: \"1 (\u5468\u4e00)\",\n emotions: [35, 25, 15, 8, 10, 5, 2],\n heatmap: {\n positive: [0, 2, 1, 2, 5, 3, 2],\n neutral: [1, 0, 1, 1, 1, 1, 0],\n negative: [2, 0, 1, 0, 0, 0, 0]\n },\n trend: {\n happy: [0, 3, 1, 3, 5, 4, 3],\n calm: [2, 1, 2, 2, 3, 2, 2],\n anxious: [1, 0, 1, 0, 0, 0, 0]\n },\n insight: \"\u5988\u5988\u672c\u5468\u60c5\u7eea\u5728\u5468\u521d\u8f83\u4f4e\uff0c\u4f46\u968f\u540e\u9010\u6e10\u63d0\u5347\u3002\u5468\u4e94\u8fbe\u5230\u60c5\u7eea\u9ad8\u5cf0\u3002\u5bb6\u52a1\u538b\u529b\u5728\u5468\u521d\u8f83\u4e3a\u660e\u663e\uff0c\u5efa\u8bae\u5bb6\u5ead\u6210\u5458\u5206\u62c5\u5468\u4e00\u5bb6\u52a1\u3002\",\n highlight: {\n name: \"\u5988\u5988\",\n status: \"\u60c5\u7eea\u9010\u6e10\u63d0\u5347\uff0c\u5bb6\u52a1\u538b\u529b\u9700\u5173\u6ce8\"\n }\n },\n ming: {\n name: \"\u5c0f\u660e\",\n totalRecords: 8,\n positivePercent: 45,\n highDay: \"3 (\u5468\u516d)\",\n lowDay: \"1 (\u5468\u4e09)\",\n emotions: [45, 15, 10, 15, 8, 5, 2],\n heatmap: {\n positive: [1, 1, 0, 1, 2, 3, 2],\n neutral: [0, 1, 1, 0, 0, 1, 0],\n negative: [1, 0, 2, 1, 0, 0, 0]\n },\n trend: {\n happy: [1, 2, 0, 2, 3, 3, 2],\n calm: [1, 0, 1, 1, 2, 1, 1],\n anxious: [0, 0, 2, 0, 0, 0, 0]\n },\n insight: \"\u5c0f\u660e\u672c\u5468\u60c5\u7eea\u6ce2\u52a8\u8f83\u5927\uff0c\u5468\u4e09\u56e0\u5b66\u4e60\u538b\u529b\u51fa\u73b0\u7126\u8651\u60c5\u7eea\u3002\u4f46\u5468\u672b\u60c5\u7eea\u660e\u663e\u597d\u8f6c\uff0c\u5efa\u8bae\u5173\u6ce8\u5b66\u4e60\u538b\u529b\u6765\u6e90\uff0c\u9002\u5f53\u589e\u52a0\u6237\u5916\u6d3b\u52a8\u65f6\u95f4\u3002\",\n highlight: {\n name: \"\u5c0f\u660e\",\n status: \"\u5b66\u4e60\u538b\u529b\u9700\u5173\u6ce8\uff0c\u5468\u672b\u60c5\u7eea\u4f73\"\n }\n },\n hong: {\n name: \"\u5c0f\u7ea2\",\n totalRecords: 12,\n positivePercent: 50,\n highDay: \"4 (\u5468\u4e94)\",\n lowDay: \"1 (\u5468\u4e00)\",\n emotions: [50, 15, 10, 10, 8, 5, 2],\n heatmap: {\n positive: [1, 2, 1, 2, 4, 3, 2],\n neutral: [0, 1, 0, 1, 1, 0, 1],\n negative: [1, 0, 1, 0, 0, 0, 0]\n },\n trend: {\n happy: [1, 3, 1, 3, 4, 3, 3],\n calm: [1, 0, 1, 1, 2, 1, 2],\n anxious: [1, 0, 1, 0, 0, 0, 0]\n },\n insight: \"\u5c0f\u7ea2\u672c\u5468\u60c5\u7eea\u6574\u4f53\u79ef\u6781\uff0c\u793e\u4ea4\u6d3b\u52a8\u5e26\u6765\u5927\u91cf\u5feb\u4e50\u60c5\u7eea\u3002\u5468\u521d\u6709\u8f7b\u5fae\u7126\u8651\uff0c\u53ef\u80fd\u4e0e\u8fd4\u6821\u6709\u5173\u3002\u5efa\u8bae\u4fdd\u6301\u793e\u4ea4\u6d3b\u52a8\u9891\u7387\uff0c\u6ce8\u610f\u5468\u521d\u60c5\u7eea\u8c03\u8282\u3002\",\n highlight: {\n name: \"\u5c0f\u7ea2\",\n status: \"\u793e\u4ea4\u6d3b\u52a8\u4fc3\u8fdb\u79ef\u6781\u60c5\u7eea\"\n }\n }\n },\n last_week: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 38,\n positivePercent: 24,\n highDay: \"12 (\u5468\u516d)\",\n lowDay: \"2 (\u5468\u4e8c)\",\n emotions: [24, 20, 16, 15, 12, 10, 3],\n heatmap: {\n positive: [1, 3, 2, 4, 6, 5, 4],\n neutral: [2, 1, 2, 1, 2, 3, 1],\n negative: [3, 2, 3, 1, 1, 1, 2]\n },\n insight: \"\u4e0a\u5468\u5bb6\u5ead\u60c5\u7eea\u76f8\u5bf9\u5e73\u7a33\uff0c\u5468\u672b\u60c5\u7eea\u8f83\u9ad8\u3002\u5468\u4e8c\u56e0\u5de5\u4f5c\/\u5b66\u4e60\u538b\u529b\u51fa\u73b0\u8f83\u591a\u8d1f\u9762\u60c5\u7eea\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u603b\u4f53\u5e73\u7a33\uff0c\u5468\u672b\u60c5\u7eea\u826f\u597d\"\n }\n },\n \/\/ \u5176\u4ed6\u6210\u5458\u7684\u4e0a\u5468\u6570\u636e\u7c7b\u4f3c...\n },\n month: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 165,\n positivePercent: 32,\n highDay: \"15 (\u5468\u4e94)\",\n lowDay: \"7 (\u5468\u4e00)\",\n emotions: [32, 25, 15, 12, 8, 6, 2],\n insight: \"\u672c\u6708\u5bb6\u5ead\u60c5\u7eea\u6574\u4f53\u79ef\u6781\uff0c\u4e2d\u65ec\u8fbe\u5230\u9ad8\u5cf0\u3002\u6708\u521d\u548c\u6708\u672b\u6709\u8f7b\u5fae\u6ce2\u52a8\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u6574\u4f53\u79ef\u6781\uff0c\u4e2d\u65ec\u4e3a\u6700\u4f73\u72b6\u6001\"\n }\n },\n \/\/ \u5176\u4ed6\u6210\u5458\u7684\u6708\u6570\u636e\u7c7b\u4f3c...\n },\n last_month: {\n all: {\n name: \"\u5168\u90e8\u6210\u5458\",\n totalRecords: 152,\n positivePercent: 28,\n highDay: \"20 (\u5468\u4e8c)\",\n lowDay: \"5 (\u5468\u56db)\",\n emotions: [28, 22, 18, 14, 10, 6, 2],\n insight: \"\u4e0a\u6708\u5bb6\u5ead\u60c5\u7eea\u6ce2\u52a8\u8f83\u5927\uff0c\u4e2d\u65ec\u6709\u8f83\u591a\u79ef\u6781\u60c5\u7eea\u8bb0\u5f55\u3002\u6708\u672b\u56e0\u5b66\u6821\u8003\u8bd5\u5468\u6709\u538b\u529b\u589e\u52a0\u3002\",\n highlight: {\n name: \"\u5168\u5bb6\u60c5\u611f\u72b6\u6001\",\n status: \"\u6ce2\u52a8\u8f83\u5927\uff0c\u8003\u8bd5\u5468\u5f71\u54cd\u660e\u663e\"\n }\n },\n \/\/ \u5176\u4ed6\u6210\u5458\u7684\u4e0a\u6708\u6570\u636e\u7c7b\u4f3c...\n }\n };\n\n \/\/ \u56fe\u8868\u5b9e\u4f8b\n let emotionChart, heatmapChart, trendChart;\n let currentPeriod = 'week';\n let currentMember = 'all';\n\n \/\/ \u521d\u59cb\u5316\u56fe\u8868\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: getEmotionData(currentPeriod, currentMember),\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 }\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 \/\/ \u70ed\u529b\u56fe\n const heatmapCtx = document.getElementById('heatmapChart').getContext('2d');\n heatmapChart = new Chart(heatmapCtx, {\n type: 'bar',\n data: getHeatmapData(currentPeriod, currentMember),\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n stacked: true,\n grid: {\n display: false\n }\n },\n y: {\n stacked: true,\n beginAtZero: true,\n ticks: {\n precision: 0\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n }\n },\n animation: {\n duration: 1000\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: getTrendData(currentPeriod, currentMember),\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n },\n plugins: {\n legend: {\n position: 'top',\n }\n },\n animation: {\n duration: 1000\n }\n }\n });\n }\n \n \/\/ \u83b7\u53d6\u60c5\u7eea\u6570\u636e\n function getEmotionData(period, member) {\n const data = familyData[period][member];\n return {\n labels: ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'],\n datasets: [{\n data: data.emotions,\n backgroundColor: [\n '#00b894', '#fdcb6e', '#00cec9', '#ff7675', '#81ecec', '#636e72', '#6c5ce7'\n ],\n borderWidth: 0\n }]\n };\n }\n \n \/\/ \u83b7\u53d6\u70ed\u529b\u56fe\u6570\u636e\n function getHeatmapData(period, member) {\n const data = familyData[period][member];\n return {\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: data.heatmap.positive,\n backgroundColor: '#00b894',\n borderRadius: 8\n }, {\n label: '\u4e2d\u6027\u60c5\u7eea',\n data: data.heatmap.neutral,\n backgroundColor: '#fdcb6e',\n borderRadius: 8\n }, {\n label: '\u6d88\u6781\u60c5\u7eea',\n data: data.heatmap.negative,\n backgroundColor: '#ff7675',\n borderRadius: 8\n }]\n };\n }\n \n \/\/ \u83b7\u53d6\u8d8b\u52bf\u6570\u636e\n function getTrendData(period, member) {\n const data = familyData[period][member];\n return {\n labels: ['\u5468\u4e00', '\u5468\u4e8c', '\u5468\u4e09', '\u5468\u56db', '\u5468\u4e94', '\u5468\u516d', '\u5468\u65e5'],\n datasets: [{\n label: '\u5feb\u4e50',\n data: data.trend.happy,\n borderColor: '#00b894',\n backgroundColor: 'rgba(0, 184, 148, 0.1)',\n tension: 0.3,\n fill: true,\n borderWidth: 3\n }, {\n label: '\u5e73\u9759',\n data: data.trend.calm,\n borderColor: '#fdcb6e',\n backgroundColor: 'rgba(253, 203, 110, 0.1)',\n tension: 0.3,\n fill: true,\n borderWidth: 3\n }, {\n label: '\u7126\u8651',\n data: data.trend.anxious,\n borderColor: '#ff7675',\n backgroundColor: 'rgba(255, 118, 117, 0.1)',\n tension: 0.3,\n fill: true,\n borderWidth: 3\n }]\n };\n }\n \n \/\/ \u66f4\u65b0UI\n function updateUI(period, member) {\n const data = familyData[period][member];\n \n \/\/ \u66f4\u65b0\u7edf\u8ba1\u5361\u7247\n document.getElementById('totalRecords').textContent = data.totalRecords;\n document.getElementById('positivePercent').textContent = data.positivePercent + '%';\n document.getElementById('highDay').textContent = data.highDay;\n document.getElementById('lowDay').textContent = data.lowDay;\n \n \/\/ \u66f4\u65b0\u60c5\u611f\u6807\u7b7e\n const tagsContainer = document.getElementById('emotionTags');\n tagsContainer.innerHTML = '';\n \n const emotions = ['\u5feb\u4e50', '\u5e73\u9759', '\u611f\u6069', '\u7126\u8651', '\u7d27\u5f20', '\u6124\u6012', '\u60ca\u559c'];\n emotions.forEach((emotion, index) => {\n const percent = data.emotions[index];\n let tagClass = '';\n \n switch(emotion) {\n case '\u5feb\u4e50': tagClass = 'tag-happy'; break;\n case '\u5e73\u9759': tagClass = 'tag-calm'; break;\n case '\u611f\u6069': tagClass = 'tag-grateful'; break;\n case '\u7126\u8651': tagClass = 'tag-anxious'; break;\n case '\u7d27\u5f20': tagClass = 'tag-tense'; break;\n case '\u6124\u6012': tagClass = 'tag-angry'; break;\n case '\u60ca\u559c': tagClass = 'tag-surprise'; break;\n }\n \n const tag = document.createElement('span');\n tag.className = `emotion-tag ${tagClass}`;\n tag.textContent = `${emotion} ${percent}%`;\n tagsContainer.appendChild(tag);\n });\n \n \/\/ \u66f4\u65b0\u5206\u6790\u6587\u672c\n document.getElementById('insightText').innerHTML = `\n <p>${data.insight}<\/p>\n <div class=\"recommendation\">\n <strong>\u5efa\u8bae\uff1a<\/strong> \u5468\u672b\u589e\u52a0\u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\uff0c\u5de9\u56fa\u79ef\u6781\u60c5\u7eea\u3002\n <\/div>\n \n <div class=\"member-highlight\">\n <div class=\"member-avatar\">\n ${member === 'all' ? '<i class=\"fas fa-users\"><\/i>' : \n member === 'dad' ? '<i class=\"fas fa-user\"><\/i>' : \n member === 'mom' ? '<i class=\"fas fa-user\"><\/i>' : \n '<i class=\"fas fa-user\"><\/i>'}\n <\/div>\n <div class=\"member-info\">\n <h4>${data.highlight.name}<\/h4>\n <p>${data.highlight.status}<\/p>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u66f4\u65b0\u56fe\u8868\u6570\u636e\n emotionChart.data = getEmotionData(period, member);\n heatmapChart.data = getHeatmapData(period, member);\n trendChart.data = getTrendData(period, member);\n \n \/\/ \u66f4\u65b0\u56fe\u8868\n emotionChart.update();\n heatmapChart.update();\n trendChart.update();\n }\n \n \/\/ \u6210\u5458\u6807\u7b7e\u5207\u6362\u529f\u80fd\n document.querySelectorAll('.tab').forEach(tab => {\n tab.addEventListener('click', function() {\n const member = this.getAttribute('data-member');\n \n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n \n currentMember = member;\n updateUI(currentPeriod, currentMember);\n });\n });\n \n \/\/ \u65f6\u95f4\u9009\u62e9\u529f\u80fd\n document.querySelectorAll('.time-card').forEach(card => {\n card.addEventListener('click', function() {\n const period = this.getAttribute('data-period');\n \n document.querySelectorAll('.time-card').forEach(c => c.classList.remove('active'));\n this.classList.add('active');\n \n currentPeriod = period;\n updateUI(currentPeriod, currentMember);\n });\n });\n \n \/\/ \u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55\n document.getElementById('addDataBtn').addEventListener('click', function() {\n const member = document.getElementById('memberSelect').value;\n const emotion = document.getElementById('emotionSelect').value;\n const date = document.getElementById('dateInput').value;\n const intensity = document.getElementById('intensity').value;\n const notes = document.getElementById('notes').value;\n \n if (!date || !intensity) {\n alert('\u8bf7\u586b\u5199\u5b8c\u6574\u4fe1\u606f\uff01');\n return;\n }\n \n \/\/ \u6a21\u62df\u6570\u636e\u6dfb\u52a0\u6548\u679c\n const emotionNames = {\n 'happy': '\u5feb\u4e50',\n 'calm': '\u5e73\u9759',\n 'grateful': '\u611f\u6069',\n 'anxious': '\u7126\u8651',\n 'tense': '\u7d27\u5f20',\n 'angry': '\u6124\u6012',\n 'surprise': '\u60ca\u559c'\n };\n \n \/\/ \u66f4\u65b0\u6570\u636e\n familyData.week[member].totalRecords++;\n \n \/\/ \u6839\u636e\u60c5\u7eea\u7c7b\u578b\u66f4\u65b0\u767e\u5206\u6bd4\n const emotions = familyData.week[member].emotions;\n switch(emotion) {\n case 'happy': emotions[0] += 1; break;\n case 'calm': emotions[1] += 1; break;\n case 'grateful': emotions[2] += 1; break;\n case 'anxious': emotions[3] += 1; break;\n case 'tense': emotions[4] += 1; break;\n case 'angry': emotions[5] += 1; break;\n case 'surprise': emotions[6] += 1; break;\n }\n \n \/\/ \u91cd\u65b0\u8ba1\u7b97\u767e\u5206\u6bd4\n const total = emotions.reduce((sum, val) => sum + val, 0);\n for (let i = 0; i < emotions.length; i++) {\n emotions[i] = Math.round((emotions[i] \/ total) * 100);\n }\n \n \/\/ \u66f4\u65b0\u79ef\u6781\u60c5\u7eea\u767e\u5206\u6bd4\n const positiveEmotions = emotions[0] + emotions[1] + emotions[2];\n familyData.week[member].positivePercent = Math.round((positiveEmotions \/ total) * 100);\n \n \/\/ \u663e\u793a\u6210\u529f\u6d88\u606f\n alert(`\u5df2\u6210\u529f\u4e3a${familyData.week[member].name}\u6dfb\u52a0${emotionNames[emotion]}\u60c5\u7eea\u8bb0\u5f55\uff01`);\n \n \/\/ \u66f4\u65b0UI\n updateUI(currentPeriod, currentMember);\n \n \/\/ \u66f4\u65b0\u66f4\u65b0\u65f6\u95f4\n const now = new Date();\n document.getElementById('updateTime').textContent = \n `${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 \n \/\/ \u91cd\u7f6e\u8868\u5355\n document.getElementById('notes').value = '';\n });\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n window.addEventListener('load', function() {\n setDateRanges();\n initCharts();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u5206\u6790\u7cfb\u7edf \u672c\u5468 \u4e0a\u5468 \u672c\u6708 \u4e0a\u6708 \u5168\u90e8\u6210\u5458 \u7238\u7238 \u5988\u5988 \u5c0f\u660e \u5c0f\u7ea2 \u603b\u4f53\u7edf\u8ba1 \u60c5\u7eea\u8bb0\u5f55\u603b\u6570 42 […]<\/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-666","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/666","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=666"}],"version-history":[{"count":23,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/666\/revisions"}],"predecessor-version":[{"id":1266,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/666\/revisions\/1266"}],"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=666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}