{"id":3166,"date":"2026-07-11T23:28:55","date_gmt":"2026-07-11T15:28:55","guid":{"rendered":"https:\/\/www.shanmu.wang\/?page_id=3166"},"modified":"2026-07-11T23:36:02","modified_gmt":"2026-07-11T15:36:02","slug":"10%e5%a4%a9%e8%87%aa%e6%88%91%e7%ae%a1%e7%90%86%e6%88%90%e9%95%bf%e6%8a%a5%e5%91%8a","status":"publish","type":"page","link":"https:\/\/www.shanmu.wang\/en\/10%e5%a4%a9%e8%87%aa%e6%88%91%e7%ae%a1%e7%90%86%e6%88%90%e9%95%bf%e6%8a%a5%e5%91%8a\/","title":{"rendered":"10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n 10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a<\/title>\r\n <style>\r\n \/* ===== \u914d\u8272 ===== *\/\r\n :root {\r\n --bg: #FFF9F5;\r\n --card-bg: #FFFFFF;\r\n --text: #3D3D3D;\r\n --text-light: #6B6B6B;\r\n --text-muted: #9A8F87;\r\n --accent-green: #81B29A;\r\n --accent-green-dark: #6A9A82;\r\n --accent-blue: #7EA3B6;\r\n --accent-orange: #E0A87C;\r\n --accent-purple: #B09AB4;\r\n --border: #E8E0D8;\r\n --border-light: #F0EAE4;\r\n --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n --radius: 12px;\r\n --radius-sm: 8px;\r\n --font: \"PingFang SC\", \"Noto Sans SC\", \"Microsoft YaHei\", \"\u601d\u6e90\u9ed1\u4f53\", system-ui, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background: var(--bg);\r\n font-family: var(--font);\r\n color: var(--text);\r\n line-height: 1.7;\r\n padding: 32px 20px 60px;\r\n display: flex;\r\n justify-content: center;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 900px;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n }\r\n\r\n \/* ===== \u5361\u7247 ===== *\/\r\n .card {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 28px 30px;\r\n box-shadow: var(--shadow);\r\n border: 1px solid var(--border-light);\r\n transition: box-shadow 0.2s;\r\n }\r\n .card:hover {\r\n box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n .card-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 20px;\r\n padding-bottom: 14px;\r\n border-bottom: 2px solid var(--border-light);\r\n }\r\n .card-header .icon {\r\n font-size: 26px;\r\n line-height: 1;\r\n }\r\n .card-header h2 {\r\n font-size: 19px;\r\n font-weight: 700;\r\n letter-spacing: 0.5px;\r\n color: var(--text);\r\n }\r\n .card-header .badge {\r\n margin-left: auto;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--text-muted);\r\n background: var(--border-light);\r\n padding: 2px 12px;\r\n border-radius: 20px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* ===== \u5c01\u9762 ===== *\/\r\n .cover {\r\n text-align: center;\r\n padding: 48px 32px 40px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .cover::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-orange), var(--accent-purple));\r\n border-radius: 0 0 var(--radius) var(--radius);\r\n }\r\n .cover h1 {\r\n font-size: 30px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n color: var(--text);\r\n margin: 0 0 4px;\r\n }\r\n .cover .subtitle {\r\n font-size: 15px;\r\n color: var(--text-muted);\r\n letter-spacing: 4px;\r\n margin-bottom: 18px;\r\n }\r\n .cover .divider {\r\n width: 56px;\r\n height: 3px;\r\n background: var(--accent-green);\r\n margin: 0 auto 24px;\r\n border-radius: 2px;\r\n }\r\n .cover .meta-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 12px 28px;\r\n font-size: 14px;\r\n color: var(--text-light);\r\n }\r\n .cover .meta-grid .field {\r\n display: inline-flex;\r\n align-items: baseline;\r\n gap: 4px;\r\n }\r\n .cover .meta-grid input {\r\n width: auto;\r\n min-width: 70px;\r\n padding: 4px 10px;\r\n border: none;\r\n border-bottom: 1.5px dashed var(--border);\r\n background: transparent;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--text);\r\n text-align: center;\r\n transition: border-color 0.2s;\r\n }\r\n .cover .meta-grid input:focus {\r\n outline: none;\r\n border-bottom-color: var(--accent-green);\r\n border-bottom-style: solid;\r\n }\r\n .cover .meta-grid input[type=\"date\"] {\r\n min-width: 130px;\r\n }\r\n\r\n \/* ===== \u8868\u5355 ===== *\/\r\n label {\r\n display: block;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--text);\r\n margin: 16px 0 5px;\r\n }\r\n label:first-of-type {\r\n margin-top: 0;\r\n }\r\n label .hint {\r\n font-weight: 400;\r\n color: var(--text-muted);\r\n font-size: 12px;\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"number\"],\r\n input[type=\"date\"],\r\n textarea,\r\n select {\r\n width: 100%;\r\n padding: 10px 14px;\r\n border: 1.5px solid var(--border);\r\n border-radius: var(--radius-sm);\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--text);\r\n background: #FAFAF8;\r\n transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;\r\n resize: vertical;\r\n }\r\n input:focus,\r\n textarea:focus,\r\n select:focus {\r\n outline: none;\r\n border-color: var(--accent-green);\r\n background: #FFFFFF;\r\n box-shadow: 0 0 0 3px rgba(129, 178, 154, 0.15);\r\n }\r\n textarea {\r\n min-height: 68px;\r\n }\r\n input[type=\"number\"] {\r\n width: auto;\r\n min-width: 60px;\r\n text-align: center;\r\n }\r\n input[type=\"date\"] {\r\n min-width: 140px;\r\n }\r\n\r\n \/* ===== \u8868\u683c ===== *\/\r\n .table-wrap {\r\n overflow-x: auto;\r\n margin: 8px 0 4px;\r\n }\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 14px;\r\n border-radius: var(--radius-sm);\r\n overflow: hidden;\r\n }\r\n table th {\r\n background: #F9F6F2;\r\n font-weight: 600;\r\n padding: 10px 12px;\r\n text-align: left;\r\n color: var(--text);\r\n border-bottom: 2px solid var(--border);\r\n }\r\n table td {\r\n padding: 10px 12px;\r\n border-bottom: 1px solid var(--border-light);\r\n vertical-align: middle;\r\n }\r\n table tr:last-child td {\r\n border-bottom: none;\r\n }\r\n table input[type=\"number\"],\r\n table input[type=\"text\"] {\r\n width: 100%;\r\n min-width: 50px;\r\n padding: 6px 8px;\r\n font-size: 13px;\r\n text-align: center;\r\n background: #FAFAF8;\r\n }\r\n table textarea {\r\n min-height: 44px;\r\n padding: 6px 10px;\r\n font-size: 13px;\r\n background: #FAFAF8;\r\n }\r\n\r\n \/* ===== \u76ee\u6807\u5757 ===== *\/\r\n .goal-block {\r\n border: 1.5px solid var(--border-light);\r\n border-radius: var(--radius-sm);\r\n padding: 18px 20px;\r\n margin-bottom: 16px;\r\n background: #FCFAF8;\r\n position: relative;\r\n transition: border-color 0.2s;\r\n }\r\n .goal-block:hover {\r\n border-color: var(--border);\r\n }\r\n .goal-block .remove-goal {\r\n position: absolute;\r\n top: 10px;\r\n right: 12px;\r\n background: none;\r\n border: none;\r\n color: #c0392b;\r\n font-size: 18px;\r\n cursor: pointer;\r\n opacity: 0.5;\r\n transition: opacity 0.2s;\r\n line-height: 1;\r\n }\r\n .goal-block .remove-goal:hover {\r\n opacity: 1;\r\n }\r\n .goal-block .goal-label {\r\n font-weight: 600;\r\n font-size: 14px;\r\n color: var(--text);\r\n margin-bottom: 4px;\r\n }\r\n .goal-block .goal-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px 24px;\r\n margin: 6px 0 8px;\r\n align-items: center;\r\n }\r\n .goal-block .goal-row .item {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n font-size: 14px;\r\n color: var(--text-light);\r\n }\r\n .goal-block .goal-row input[type=\"number\"] {\r\n width: 56px;\r\n min-width: 56px;\r\n padding: 4px 6px;\r\n font-size: 14px;\r\n text-align: center;\r\n }\r\n .goal-block .goal-row input[type=\"text\"] {\r\n flex: 1;\r\n min-width: 140px;\r\n }\r\n\r\n \/* ===== \u8bc4\u5206\u5355\u9009 ===== *\/\r\n .rating-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n margin: 6px 0 10px;\r\n }\r\n .rating-group label {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n font-weight: 400;\r\n cursor: pointer;\r\n margin: 0;\r\n padding: 6px 12px;\r\n border-radius: var(--radius-sm);\r\n transition: background 0.15s;\r\n font-size: 14px;\r\n }\r\n .rating-group label:hover {\r\n background: #F5F0EB;\r\n }\r\n .rating-group input[type=\"radio\"] {\r\n width: 16px;\r\n height: 16px;\r\n accent-color: var(--accent-green);\r\n cursor: pointer;\r\n margin-top: 3px;\r\n flex-shrink: 0;\r\n }\r\n .rating-group .rating-desc {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n display: block;\r\n font-weight: 400;\r\n }\r\n\r\n \/* ===== \u590d\u9009\u6846\u7ec4 ===== *\/\r\n .check-group {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px 24px;\r\n margin: 8px 0 4px;\r\n }\r\n .check-group label {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-weight: 400;\r\n font-size: 14px;\r\n margin: 0;\r\n cursor: pointer;\r\n }\r\n .check-group input[type=\"checkbox\"] {\r\n width: 17px;\r\n height: 17px;\r\n accent-color: var(--accent-green);\r\n cursor: pointer;\r\n }\r\n\r\n \/* ===== \u4e0a\u4f20\u533a ===== *\/\r\n .upload-area {\r\n border: 2px dashed var(--border);\r\n border-radius: var(--radius-sm);\r\n padding: 28px 20px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: border-color 0.25s, background 0.25s;\r\n background: #FAFAF8;\r\n margin: 8px 0 4px;\r\n }\r\n .upload-area:hover {\r\n border-color: var(--accent-green);\r\n background: #F5F9F6;\r\n }\r\n .upload-area .upload-icon {\r\n font-size: 34px;\r\n margin-bottom: 4px;\r\n }\r\n .upload-area p {\r\n font-size: 14px;\r\n color: var(--text-light);\r\n margin: 0;\r\n }\r\n .upload-area .sub {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n }\r\n\r\n .preview-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));\r\n gap: 10px;\r\n margin-top: 12px;\r\n }\r\n .preview-item {\r\n position: relative;\r\n border-radius: var(--radius-sm);\r\n overflow: hidden;\r\n border: 1px solid var(--border-light);\r\n aspect-ratio: 1;\r\n background: #FAFAF8;\r\n }\r\n .preview-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n .preview-item .file-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n font-size: 32px;\r\n color: var(--text-muted);\r\n }\r\n .preview-item .remove-btn {\r\n position: absolute;\r\n top: 4px;\r\n right: 4px;\r\n background: rgba(0, 0, 0, 0.55);\r\n color: #fff;\r\n border: none;\r\n border-radius: 50%;\r\n width: 22px;\r\n height: 22px;\r\n cursor: pointer;\r\n font-size: 13px;\r\n line-height: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.2s;\r\n }\r\n .preview-item .remove-btn:hover {\r\n background: rgba(192, 57, 43, 0.8);\r\n }\r\n\r\n \/* ===== \u6309\u94ae ===== *\/\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 10px 26px;\r\n border: none;\r\n border-radius: var(--radius-sm);\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;\r\n font-family: inherit;\r\n text-decoration: none;\r\n }\r\n .btn:active {\r\n transform: scale(0.97);\r\n }\r\n .btn-primary {\r\n background: var(--accent-green);\r\n color: #fff;\r\n box-shadow: 0 2px 8px rgba(129, 178, 154, 0.3);\r\n }\r\n .btn-primary:hover {\r\n opacity: 0.88;\r\n box-shadow: 0 4px 14px rgba(129, 178, 154, 0.35);\r\n }\r\n .btn-secondary {\r\n background: #fff;\r\n color: var(--accent-green);\r\n border: 1.5px solid var(--accent-green);\r\n }\r\n .btn-secondary:hover {\r\n background: #F5F9F6;\r\n }\r\n .btn-outline {\r\n background: transparent;\r\n color: var(--text-light);\r\n border: 1.5px solid var(--border);\r\n }\r\n .btn-outline:hover {\r\n border-color: var(--text-muted);\r\n background: #FAFAF8;\r\n }\r\n .btn-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-top: 16px;\r\n justify-content: center;\r\n }\r\n\r\n \/* ===== \u5e95\u90e8\u63d0\u793a ===== *\/\r\n .footer-note {\r\n text-align: center;\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n padding: 8px 0 0;\r\n border-top: 1px solid var(--border-light);\r\n margin-top: 12px;\r\n }\r\n\r\n \/* ===== \u54cd\u5e94\u5f0f ===== *\/\r\n @media (max-width: 600px) {\r\n body {\r\n padding: 16px 10px 40px;\r\n }\r\n .card {\r\n padding: 18px 16px;\r\n }\r\n .cover {\r\n padding: 28px 16px 24px;\r\n }\r\n .cover h1 {\r\n font-size: 24px;\r\n }\r\n .cover .meta-grid {\r\n gap: 8px 16px;\r\n font-size: 13px;\r\n }\r\n .cover .meta-grid input {\r\n min-width: 50px;\r\n font-size: 13px;\r\n }\r\n .cover .meta-grid input[type=\"date\"] {\r\n min-width: 100px;\r\n }\r\n .card-header h2 {\r\n font-size: 17px;\r\n }\r\n .card-header .icon {\r\n font-size: 22px;\r\n }\r\n .goal-block {\r\n padding: 14px 14px;\r\n }\r\n .goal-block .goal-row {\r\n gap: 8px 12px;\r\n }\r\n .goal-block .goal-row .item {\r\n font-size: 13px;\r\n }\r\n .rating-group label {\r\n font-size: 13px;\r\n padding: 4px 8px;\r\n }\r\n .btn {\r\n padding: 8px 18px;\r\n font-size: 13px;\r\n }\r\n table {\r\n font-size: 13px;\r\n }\r\n table th,\r\n table td {\r\n padding: 6px 8px;\r\n }\r\n .preview-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .cover .meta-grid {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .goal-block .goal-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n .goal-block .goal-row input[type=\"text\"] {\r\n min-width: auto;\r\n }\r\n .btn-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n .btn-row .btn {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n \/* ===== \u4e0b\u8f7d\u6309\u94ae\u4e13\u7528\u6837\u5f0f ===== *\/\r\n .download-section {\r\n text-align: center;\r\n padding: 12px 0 4px;\r\n }\r\n .download-section .btn-download {\r\n background: var(--accent-green);\r\n color: #fff;\r\n padding: 14px 48px;\r\n font-size: 17px;\r\n border-radius: var(--radius);\r\n box-shadow: 0 4px 20px rgba(129, 178, 154, 0.35);\r\n transition: all 0.25s;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n font-family: inherit;\r\n }\r\n .download-section .btn-download:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 32px rgba(129, 178, 154, 0.45);\r\n opacity: 0.92;\r\n }\r\n .download-section .btn-download:active {\r\n transform: scale(0.97);\r\n }\r\n .download-section .hint-text {\r\n font-size: 13px;\r\n color: var(--text-muted);\r\n margin-top: 8px;\r\n }\r\n\r\n \/* ===== \u5bc6\u7801\u9a8c\u8bc1\u906e\u7f69 ===== *\/\r\n #password-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.6);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n font-family: var(--font);\r\n }\r\n #password-box {\r\n background: #fff;\r\n padding: 40px 48px;\r\n border-radius: var(--radius);\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n text-align: center;\r\n max-width: 400px;\r\n width: 90%;\r\n }\r\n #password-box h2 {\r\n font-size: 22px;\r\n color: var(--text);\r\n margin-bottom: 8px;\r\n }\r\n #password-box p {\r\n color: var(--text-light);\r\n font-size: 14px;\r\n margin-bottom: 20px;\r\n }\r\n #password-box input {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 1.5px solid var(--border);\r\n border-radius: var(--radius-sm);\r\n font-size: 16px;\r\n font-family: inherit;\r\n text-align: center;\r\n margin-bottom: 16px;\r\n outline: none;\r\n transition: border-color 0.2s;\r\n }\r\n #password-box input:focus {\r\n border-color: var(--accent-green);\r\n }\r\n #password-box .btn-pw {\r\n background: var(--accent-green);\r\n color: #fff;\r\n border: none;\r\n padding: 12px 32px;\r\n border-radius: var(--radius-sm);\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: opacity 0.2s;\r\n font-family: inherit;\r\n }\r\n #password-box .btn-pw:hover {\r\n opacity: 0.85;\r\n }\r\n #password-box .error-msg {\r\n color: #c0392b;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n min-height: 20px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- ===== \u5bc6\u7801\u9a8c\u8bc1\u906e\u7f69 ===== -->\r\n <div id=\"password-overlay\">\r\n <div id=\"password-box\">\r\n <h2>\ud83d\udd10 \u8bf7\u8f93\u5165\u5bc6\u7801<\/h2>\r\n <p>\u672c\u62a5\u544a\u53d7\u5bc6\u7801\u4fdd\u62a4<\/p>\r\n <input type=\"password\" id=\"password-input\" placeholder=\"\u8bf7\u8f93\u5165\u5bc6\u7801\" autofocus \/>\r\n <button class=\"btn-pw\" id=\"password-submit\">\u786e\u8ba4<\/button>\r\n <div class=\"error-msg\" id=\"password-error\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u4e3b\u5185\u5bb9\uff08\u9ed8\u8ba4\u9690\u85cf\uff09 ===== -->\r\n <div class=\"container\" id=\"report-container\" style=\"display:none;\">\r\n\r\n <!-- ===== \u5c01\u9762 ===== -->\r\n <div class=\"card cover\">\r\n <h1>10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a<\/h1>\r\n <div class=\"subtitle\">\u676d\u5dde\u5584\u7267\u5168\u4eba\u5065\u5eb7\u7ba1\u7406\u6709\u9650\u516c\u53f8<\/div>\r\n <div class=\"divider\"><\/div>\r\n <div class=\"meta-grid\">\r\n <span class=\"field\">\u5b66\u5458\u59d3\u540d\uff1a<input type=\"text\" id=\"cover-name\" placeholder=\"\u59d3\u540d\" \/><\/span>\r\n <span class=\"field\">\u5e74\u9f84\uff1a<input type=\"text\" id=\"cover-age\" placeholder=\"\u5e74\u9f84\" style=\"min-width:50px;\" \/><\/span>\r\n <span class=\"field\">\u5165\u8425\u65e5\u671f\uff1a<input type=\"date\" id=\"cover-start\" \/><\/span>\r\n <span class=\"field\">\u81f3 <input type=\"date\" id=\"cover-end\" \/><\/span>\r\n <span class=\"field\">\u4e3b\u5e26\u54a8\u8be2\u5e08\uff1a<input type=\"text\" id=\"cover-counselor\" placeholder=\"\u59d3\u540d\" \/><\/span>\r\n <span class=\"field\">\u4e3b\u8981\u534f\u52a9\u54a8\u8be2\u5e08\uff1a<input type=\"text\" id=\"cover-assist\" placeholder=\"\u59d3\u540d\" \/><\/span>\r\n <span class=\"field\">\u62a5\u544a\u65e5\u671f\uff1a<input type=\"date\" id=\"cover-report-date\" \/><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u4e00\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83d\udccb<\/span>\r\n <h2>\u7b2c\u4e00\u90e8\u5206\uff1a\u521d\u59cb\u8bc4\u4f30\u6982\u89c8<\/h2>\r\n <span class=\"badge\">1 \/ 8<\/span>\r\n <\/div>\r\n <label>1. \u5bb6\u957f\u7b5b\u67e5\u7ed3\u679c\uff08\u524d\u6d4b\uff09 <span class=\"hint\">\uff08\u5747\u52061\u20135\uff0c\u5206\u6570\u8d8a\u9ad8\u56f0\u96be\u8d8a\u7a81\u51fa\uff09<\/span><\/label>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead>\r\n <tr><th>\u9886\u57df<\/th><th style=\"text-align:center;width:90px;\">\u524d\u6d4b\u5747\u5206<\/th><th>\u91cd\u70b9\u5173\u6ce8\u6761\u76ee\uff08\u5f97\u5206\u6700\u9ad81\u20133\u9879\uff09<\/th><\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td>\u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef<\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" min=\"1\" max=\"5\" placeholder=\"0.0\" class=\"p1-score\" \/><\/td><td><textarea rows=\"2\" class=\"p1-focus\" placeholder=\"\u4f8b\u5982\uff1a\u9700\u8981\u53cd\u590d\u50ac\u4fc3\u624d\u80fd\u5f00\u59cb\u505a\u4f5c\u4e1a\uff1b\u5bb9\u6613\u88ab\u5468\u56f4\u58f0\u97f3\u5e72\u6270\"><\/textarea><\/td><\/tr>\r\n <tr><td>\u60c5\u7eea\u7ba1\u7406<\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" min=\"1\" max=\"5\" placeholder=\"0.0\" class=\"p1-score\" \/><\/td><td><textarea rows=\"2\" class=\"p1-focus\" placeholder=\"\u4f8b\u5982\uff1a\u751f\u6c14\u65f6\u4f1a\u6454\u4e1c\u897f\u6216\u5927\u558a\u5927\u53eb\"><\/textarea><\/td><\/tr>\r\n <tr><td>\u793e\u4ea4\u6280\u80fd<\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" min=\"1\" max=\"5\" placeholder=\"0.0\" class=\"p1-score\" \/><\/td><td><textarea rows=\"2\" class=\"p1-focus\" placeholder=\"\u4f8b\u5982\uff1a\u60f3\u52a0\u5165\u522b\u4eba\u4f46\u4e0d\u77e5\u9053\u5982\u4f55\u5f00\u53e3\uff1b\u5f88\u96be\u7ad9\u5728\u522b\u4eba\u7684\u89d2\u5ea6\u770b\u95ee\u9898\"><\/textarea><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <label>2. \u513f\u7ae5\u81ea\u8bc4\uff08Day1\uff09\u2014\u2014\u5b69\u5b50\u81ea\u8ff0\u6700\u56f0\u96be\u76843\u9879\uff1a<\/label>\r\n <textarea rows=\"2\" id=\"child-self-report\" placeholder=\"\u4f8b\u5982\uff1a\u2460 \u6211\u5f00\u59cb\u505a\u4f5c\u4e1a\u524d\u603b\u662f\u9700\u8981\u522b\u4eba\u53eb\u6211\u597d\u591a\u6b21\uff1b\u2461 \u6211\u4e0d\u9ad8\u5174\u7684\u65f6\u5019\u4f1a\u6454\u4e1c\u897f\uff1b\u2462 \u505a\u4e8b\u60c5\u65f6\u65c1\u8fb9\u6709\u58f0\u97f3\u6211\u5f88\u5bb9\u6613\u5206\u5fc3\"><\/textarea>\r\n <label>3. \u5b69\u5b50\u81ea\u5df1\u9009\u5b9a\u768410\u5929\u76ee\u6807\uff08Day1\u4e00\u5bf9\u4e00\u8bbf\u8c08\u539f\u8bdd\uff09\uff1a<\/label>\r\n <textarea rows=\"2\" id=\"child-goal-quote\" placeholder=\"\u4f8b\u5982\uff1a'\u751f\u6c14\u7684\u65f6\u5019\u4e0d\u63a8\u4eba\uff0c\u627e\u5230\u522b\u7684\u65b9\u6cd5\u3002'\"><\/textarea>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u4e8c\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83c\udfaf<\/span>\r\n <h2>\u7b2c\u4e8c\u90e8\u5206\uff1a\u4e2a\u6027\u5316\u76ee\u6807\u4e0e\u8fbe\u6210\u60c5\u51b5<\/h2>\r\n <span class=\"badge\">2 \/ 8<\/span>\r\n <\/div>\r\n <div id=\"goals-container\"><\/div>\r\n <button class=\"btn btn-secondary\" onclick=\"addGoal()\" style=\"margin-top:6px;\">\uff0b \u6dfb\u52a0\u76ee\u6807\u884c\u4e3a<\/button>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u4e09\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83d\udd0d<\/span>\r\n <h2>\u7b2c\u4e09\u90e8\u5206\uff1a\u54a8\u8be2\u5e08\u8d28\u6027\u89c2\u5bdf\u62a5\u544a<\/h2>\r\n <span class=\"badge\">3 \/ 8<\/span>\r\n <\/div>\r\n <label>\ud83c\udff7\ufe0f \u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef\u9886\u57df<\/label>\r\n <textarea rows=\"3\" id=\"obs-study\" placeholder=\"\u5173\u952e\u8fdb\u6b65\u65f6\u523b\u2026 NET\u5e72\u9884\u7b56\u7565\u2026 \u4e0b\u4e00\u6b65\u6210\u957f\u7a7a\u95f4\u2026\"><\/textarea>\r\n <label>\ud83c\udfa8 \u60c5\u7eea\u7ba1\u7406\u9886\u57df<\/label>\r\n <textarea rows=\"3\" id=\"obs-emotion\" placeholder=\"\u5173\u952e\u8fdb\u6b65\u65f6\u523b\u2026 NET\u5e72\u9884\u7b56\u7565\u2026 \u4e0b\u4e00\u6b65\u6210\u957f\u7a7a\u95f4\u2026\"><\/textarea>\r\n <label>\ud83e\udd1d \u793e\u4ea4\u6280\u80fd\u9886\u57df<\/label>\r\n <textarea rows=\"3\" id=\"obs-social\" placeholder=\"\u5173\u952e\u8fdb\u6b65\u65f6\u523b\u2026 NET\u5e72\u9884\u7b56\u7565\u2026 \u4e0b\u4e00\u6b65\u6210\u957f\u7a7a\u95f4\u2026\"><\/textarea>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u56db\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83d\udcac<\/span>\r\n <h2>\u7b2c\u56db\u90e8\u5206\uff1a\u5b69\u5b50\u7684\u58f0\u97f3<\/h2>\r\n <span class=\"badge\">4 \/ 8<\/span>\r\n <\/div>\r\n <label>\u513f\u7ae5\u81ea\u8bc4\u5bf9\u6bd4\uff08Day1 \/ Day5 \/ Day10\uff09\uff1a<\/label>\r\n <div style=\"display:flex;flex-wrap:wrap;gap:12px 20px;margin:6px 0 10px;\">\r\n <span>\u5b66\u4e60\u4e60\u60ef Day1\uff1a<input type=\"number\" step=\"0.1\" class=\"self-study-d1\" style=\"width:60px;\" \/><\/span>\r\n <span>Day5\uff1a<input type=\"number\" step=\"0.1\" class=\"self-study-d5\" style=\"width:60px;\" \/><\/span>\r\n <span>Day10\uff1a<input type=\"number\" step=\"0.1\" class=\"self-study-d10\" style=\"width:60px;\" \/><\/span>\r\n <\/div>\r\n <div style=\"display:flex;flex-wrap:wrap;gap:12px 20px;margin:6px 0 10px;\">\r\n <span>\u60c5\u7eea\u7ba1\u7406 Day1\uff1a<input type=\"number\" step=\"0.1\" class=\"self-emotion-d1\" style=\"width:60px;\" \/><\/span>\r\n <span>Day5\uff1a<input type=\"number\" step=\"0.1\" class=\"self-emotion-d5\" style=\"width:60px;\" \/><\/span>\r\n <span>Day10\uff1a<input type=\"number\" step=\"0.1\" class=\"self-emotion-d10\" style=\"width:60px;\" \/><\/span>\r\n <\/div>\r\n <div style=\"display:flex;flex-wrap:wrap;gap:12px 20px;margin:6px 0 10px;\">\r\n <span>\u793e\u4ea4\u6280\u80fd Day1\uff1a<input type=\"number\" step=\"0.1\" class=\"self-social-d1\" style=\"width:60px;\" \/><\/span>\r\n <span>Day5\uff1a<input type=\"number\" step=\"0.1\" class=\"self-social-d5\" style=\"width:60px;\" \/><\/span>\r\n <span>Day10\uff1a<input type=\"number\" step=\"0.1\" class=\"self-social-d10\" style=\"width:60px;\" \/><\/span>\r\n <\/div>\r\n <label>\u5b69\u5b50\u773c\u4e2d\u7684\u201c\u6211\u7684\u8d85\u80fd\u529b\u201d\uff08\u539f\u8bdd\u5f15\u7528\uff09\uff1a<\/label>\r\n <textarea rows=\"2\" id=\"child-power\" placeholder=\"\u4f8b\u5982\uff1a'\u6211\u5b66\u4f1a\u4e86\u751f\u6c14\u7684\u65f6\u5019\u5148\u8bf4\uff0c\u4e0d\u662f\u5148\u63a8\u3002'\"><\/textarea>\r\n <label>\u5b69\u5b50\u60f3\u5bf9\u7238\u7238\u5988\u5988\u8bf4\u7684\u8bdd\uff08\u539f\u8bdd\u5f15\u7528\uff09\uff1a<\/label>\r\n <textarea rows=\"2\" id=\"child-to-parents\" placeholder=\"\u4f8b\u5982\uff1a'\u6211\u6709\u65f6\u5019\u8fd8\u662f\u4f1a\u751f\u6c14\u3002\u4f46\u662f\u6211\u6bd4\u4ee5\u524d\u5feb\u4e86\u2014\u2014\u751f\u6c14\u5b8c\u5f88\u5feb\u5c31\u4e0d\u6c14\u4e86\u3002'\"><\/textarea>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u4e94\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83c\udf31<\/span>\r\n <h2>\u7b2c\u4e94\u90e8\u5206\uff1a\u6210\u957f\u5b58\u6298<\/h2>\r\n <span class=\"badge\">5 \/ 8<\/span>\r\n <\/div>\r\n <p style=\"font-size:14px;color:var(--text-light);margin-bottom:10px;\">\u4e0a\u4f20\u5b69\u5b5010\u5929\u7684\u6210\u957f\u5b58\u6298\u7167\u7247\uff08\u652f\u6301\u591a\u6b21\u4e0a\u4f20\uff0c\u4e0d\u9650\u5f20\u6570\uff09\u3002<\/p>\r\n <div class=\"upload-area\" id=\"upload-area-passbook\">\r\n <div class=\"upload-icon\">\ud83d\udcf8<\/div>\r\n <p>\u70b9\u51fb\u6216\u62d6\u62fd\u4e0a\u4f20\u6210\u957f\u5b58\u6298\u56fe\u7247<\/p>\r\n <p class=\"sub\">\u652f\u6301 JPG \/ PNG\uff0c\u53ef\u591a\u6b21\u4e0a\u4f20<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"file-input-passbook\" accept=\"image\/*\" multiple hidden \/>\r\n <div class=\"preview-grid\" id=\"preview-passbook\"><\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u516d\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83d\udc8c<\/span>\r\n <h2>\u7b2c\u516d\u90e8\u5206\uff1a\u540c\u4f34\u773c\u4e2d\u7684TA<\/h2>\r\n <span class=\"badge\">6 \/ 8<\/span>\r\n <\/div>\r\n <p style=\"font-size:14px;color:var(--text-light);margin-bottom:10px;\">\u4e0a\u4f20\u540c\u4f34\u6b23\u8d4f\u5361\u7167\u7247\uff08\u652f\u6301\u591a\u6b21\u4e0a\u4f20\uff09\u3002<\/p>\r\n <div class=\"upload-area\" id=\"upload-area-peer\">\r\n <div class=\"upload-icon\">\ud83d\uddbc\ufe0f<\/div>\r\n <p>\u70b9\u51fb\u6216\u62d6\u62fd\u4e0a\u4f20\u540c\u4f34\u6b23\u8d4f\u5361\u56fe\u7247<\/p>\r\n <p class=\"sub\">\u652f\u6301 JPG \/ PNG\uff0c\u53ef\u591a\u6b21\u4e0a\u4f20<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"file-input-peer\" accept=\"image\/*\" multiple hidden \/>\r\n <div class=\"preview-grid\" id=\"preview-peer\"><\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u4e03\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83d\udcca<\/span>\r\n <h2>\u7b2c\u4e03\u90e8\u5206\uff1a24\u9879\u6280\u80fd\u81ea\u8bc4\u8fbe\u6210\u60c5\u51b5<\/h2>\r\n <span class=\"badge\">7 \/ 8<\/span>\r\n <\/div>\r\n <p style=\"font-size:14px;color:var(--text-light);margin-bottom:10px;\">\u5b69\u5b50\u572810\u5929\u4e2d\u81ea\u52a8\u8bad\u7ec3\u7684\u5404\u9879\u6280\u80fd\u81ea\u8bc4\uff08Day1 \/ Day5 \/ Day10\uff09\uff0c10\u5206\u5236\u3002\u62ec\u53f7\u5185\u4e3a\u6280\u80fd\u7b80\u6d01\u5b9a\u4e49\u3002<\/p>\r\n <div class=\"table-wrap\">\r\n <table id=\"skills-table\">\r\n <thead>\r\n <tr><th style=\"min-width:80px;\">\u9886\u57df<\/th><th>\u5b50\u6280\u80fd<\/th><th style=\"width:70px;text-align:center;\">Day1<\/th><th style=\"width:70px;text-align:center;\">Day5<\/th><th style=\"width:70px;text-align:center;\">Day10<\/th><\/tr>\r\n <\/thead>\r\n <tbody><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u7b2c\u516b\u90e8\u5206 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83c\udfe0<\/span>\r\n <h2>\u7b2c\u516b\u90e8\u5206\uff1a\u5bb6\u957f\u540e\u6d4b\u4e0e\u5bb6\u5ead\u8854\u63a5\u5efa\u8bae<\/h2>\r\n <span class=\"badge\">8 \/ 8<\/span>\r\n <\/div>\r\n <label>\u5bb6\u957f\u7b5b\u67e5\u8868\u524d\u540e\u5bf9\u6bd4\uff1a<\/label>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead>\r\n <tr><th>\u9886\u57df<\/th><th style=\"text-align:center;width:70px;\">\u524d\u6d4b<\/th><th style=\"text-align:center;width:70px;\">\u540e\u6d4b<\/th><th style=\"text-align:center;width:70px;\">\u53d8\u5316<\/th><\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td>\u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef<\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" class=\"post-pre-study\" style=\"width:60px;\" \/><\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" class=\"post-post-study\" style=\"width:60px;\" \/><\/td><td style=\"text-align:center;\"><input type=\"text\" class=\"post-change-study\" style=\"width:60px;text-align:center;\" placeholder=\"\u2193\/\u2192\" \/><\/td><\/tr>\r\n <tr><td>\u60c5\u7eea\u7ba1\u7406<\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" class=\"post-pre-emotion\" style=\"width:60px;\" \/><\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" class=\"post-post-emotion\" style=\"width:60px;\" \/><\/td><td style=\"text-align:center;\"><input type=\"text\" class=\"post-change-emotion\" style=\"width:60px;text-align:center;\" placeholder=\"\u2193\/\u2192\" \/><\/td><\/tr>\r\n <tr><td>\u793e\u4ea4\u6280\u80fd<\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" class=\"post-pre-social\" style=\"width:60px;\" \/><\/td><td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" class=\"post-post-social\" style=\"width:60px;\" \/><\/td><td style=\"text-align:center;\"><input type=\"text\" class=\"post-change-social\" style=\"width:60px;text-align:center;\" placeholder=\"\u2193\/\u2192\" \/><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <label>\u5bb6\u5ead\u8854\u63a5\u5efa\u8bae\uff1a<\/label>\r\n <textarea rows=\"4\" id=\"family-advice\" placeholder=\"\u5173\u4e8e\u60c5\u7eea\u8868\u8fbe\u2026 \u5173\u4e8e\u4efb\u52a1\u542f\u52a8\u2026 \u5173\u4e8e\u793e\u4ea4\u6280\u80fd\u2026\"><\/textarea>\r\n <div class=\"check-group\">\r\n <label><input type=\"checkbox\" class=\"toolkit-check\" \/> \u5df2\u968f\u62a5\u544a\u9644\u8d60\u300a\u5bb6\u5ead\u8854\u63a5\u5de5\u5177\u5305\u300b<\/label>\r\n <label><input type=\"checkbox\" class=\"followup-check\" \/> \u4e0e\u5bb6\u957f\u7ea6\u5b9a\u7ed3\u8425\u540e1\u4e2a\u6708\u7ebf\u4e0a\u968f\u8bbf\uff08\u226430\u5206\u949f\uff09<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u9644\uff1a\u5de5\u5177\u5305 ===== -->\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <span class=\"icon\">\ud83d\udce6<\/span>\r\n <h2>\u9644\uff1a\u5bb6\u5ead\u8854\u63a5\u5de5\u5177\u5305\uff08\u6587\u4ef6\u4e0a\u4f20\uff09<\/h2>\r\n <\/div>\r\n <p style=\"font-size:14px;color:var(--text-light);margin-bottom:10px;\">\u4e0a\u4f20\u5de5\u5177\u5305\u76f8\u5173\u56fe\u7247\u6216\u6587\u6863\uff08\u53ef\u591a\u6b21\u4e0a\u4f20\uff0c\u652f\u6301\u56fe\u7247\u548cPDF\uff09\u3002<\/p>\r\n <div class=\"upload-area\" id=\"upload-area-toolkit\">\r\n <div class=\"upload-icon\">\ud83d\udcc1<\/div>\r\n <p>\u70b9\u51fb\u6216\u62d6\u62fd\u4e0a\u4f20\u6587\u4ef6<\/p>\r\n <p class=\"sub\">\u652f\u6301 JPG \/ PNG \/ PDF\uff0c\u53ef\u591a\u6b21\u4e0a\u4f20<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"file-input-toolkit\" accept=\"image\/*,.pdf\" multiple hidden \/>\r\n <div class=\"preview-grid\" id=\"preview-toolkit\"><\/div>\r\n <\/div>\r\n\r\n <!-- ===== \u5e95\u90e8 ===== -->\r\n <div class=\"card\" style=\"border: none; box-shadow: none; background: transparent; padding: 0;\">\r\n <div class=\"download-section\">\r\n <button class=\"btn-download\" onclick=\"downloadReport()\">\ud83d\udcc4 \u4e0b\u8f7d\u62a5\u544a HTML<\/button>\r\n <div class=\"hint-text\">\u70b9\u51fb\u540e\u751f\u6210\u4e00\u4efd\u5b8c\u6574\u7684\u62a5\u544a HTML\uff0c\u5305\u542b\u6240\u6709\u586b\u5199\u5185\u5bb9\u4e0e\u4e0a\u4f20\u56fe\u7247\uff08\u56fe\u7247\u5c06\u4e00\u884c\u4e00\u5f20\u663e\u793a\uff09\u3002<\/div>\r\n <\/div>\r\n <div class=\"footer-note\" style=\"border-top: none; margin-top: 10px;\">\r\n \u62a5\u544a\u5185\u5bb9\u4ec5\u4f9b\u5185\u90e8\u4f7f\u7528\uff0c\u8bf7\u59a5\u5584\u4fdd\u7ba1\u3002\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ============================================================\r\n \/\/ 0. \u5bc6\u7801\u9a8c\u8bc1\r\n \/\/ ============================================================\r\n (function() {\r\n const overlay = document.getElementById('password-overlay');\r\n const input = document.getElementById('password-input');\r\n const submitBtn = document.getElementById('password-submit');\r\n const errorEl = document.getElementById('password-error');\r\n const container = document.getElementById('report-container');\r\n const CORRECT_PW = 'shanmu2025';\r\n\r\n function tryUnlock() {\r\n const pw = input.value.trim();\r\n if (pw === CORRECT_PW) {\r\n overlay.style.display = 'none';\r\n container.style.display = 'flex';\r\n \/\/ \u805a\u7126\u5230\u7b2c\u4e00\u4e2a\u8f93\u5165\u6846\r\n const firstInput = container.querySelector('input');\r\n if (firstInput) firstInput.focus();\r\n } else {\r\n errorEl.textContent = '\u274c \u5bc6\u7801\u9519\u8bef\uff0c\u8bf7\u91cd\u8bd5';\r\n input.value = '';\r\n input.focus();\r\n }\r\n }\r\n\r\n submitBtn.addEventListener('click', tryUnlock);\r\n input.addEventListener('keydown', function(e) {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n tryUnlock();\r\n }\r\n });\r\n \/\/ \u521d\u59cb\u805a\u7126\r\n input.focus();\r\n })();\r\n\r\n \/\/ ============================================================\r\n \/\/ 1. \u6280\u80fd\u8868\u5b9a\u4e49\r\n \/\/ ============================================================\r\n const skills = [{\r\n area: '\u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef',\r\n items: [\r\n { name: '\u4efb\u52a1\u542f\u52a8', def: '\u4ece\u6307\u4ee4\u5230\u5f00\u59cb\u6267\u884c\u7684\u5ef6\u8fdf' },\r\n { name: '\u65f6\u95f4\u7ba1\u7406', def: '\u9884\u4f30\u548c\u5206\u914d\u65f6\u95f4\u7684\u80fd\u529b' },\r\n { name: '\u7269\u54c1\u6574\u7406', def: '\u4f7f\u7528\u540e\u5f52\u4f4d\uff0c\u7ef4\u6301\u7a7a\u95f4\u79e9\u5e8f' },\r\n { name: '\u65e5\u5e38\u5e38\u89c4', def: '\u65e0\u9700\u63d0\u9192\u5b8c\u6210\u81ea\u6211\u7167\u987e\u6d41\u7a0b' },\r\n { name: '\u6301\u7eed\u4e13\u6ce8', def: '\u5728\u4efb\u52a1\u4e0a\u4fdd\u6301\u6ce8\u610f\u529b\uff0c\u62b5\u6297\u5e72\u6270' },\r\n { name: '\u5de5\u4f5c\u8bb0\u5fc6', def: '\u5728\u6267\u884c\u4efb\u52a1\u65f6\u6682\u65f6\u4fdd\u5b58\u548c\u64cd\u4f5c\u4fe1\u606f' },\r\n { name: '\u8ba4\u77e5\u7075\u6d3b\u6027', def: '\u5728\u53d8\u5316\u4e2d\u8c03\u6574\u7b56\u7565\u3001\u5207\u6362\u89c6\u89d2' },\r\n { name: '\u76ee\u6807\u5bfc\u5411\u575a\u6301', def: '\u9762\u5bf9\u56f0\u96be\u65f6\u6301\u7eed\u52aa\u529b\u76f4\u5230\u5b8c\u6210' }\r\n ]\r\n }, {\r\n area: '\u60c5\u7eea\u7ba1\u7406',\r\n items: [\r\n { name: '\u60c5\u7eea\u8bc6\u522b', def: '\u8bc6\u522b\u5e76\u547d\u540d\u81ea\u5df1\u548c\u4ed6\u4eba\u60c5\u7eea' },\r\n { name: '\u60c5\u7eea\u8868\u8fbe', def: '\u7528\u8bed\u8a00\u800c\u975e\u884c\u52a8\u8868\u8fbe\u60c5\u7eea\u9700\u6c42' },\r\n { name: '\u51b2\u52a8\u63a7\u5236', def: '\u6291\u5236\u5373\u523b\u53cd\u5e94\uff0c\u5728\u884c\u52a8\u524d\u601d\u8003' },\r\n { name: '\u60c5\u7eea\u8c03\u8282', def: '\u4ece\u5f3a\u70c8\u60c5\u7eea\u4e2d\u81ea\u4e3b\u6062\u590d\u5e73\u9759' },\r\n { name: '\u632b\u6298\u8010\u53d7', def: '\u9762\u5bf9\u56f0\u96be\/\u5931\u8d25\u65f6\u7ef4\u6301\u60c5\u7eea\u7a33\u5b9a' },\r\n { name: '\u81ea\u6211\u5b89\u629a', def: '\u72ec\u5904\u65f6\u7167\u987e\u81ea\u5df1\u60c5\u7eea\u7684\u80fd\u529b' },\r\n { name: '\u8ba4\u77e5\u91cd\u8bc4', def: '\u91cd\u65b0\u89e3\u91ca\u60c5\u5883\u4ee5\u6539\u53d8\u60c5\u7eea\u5f71\u54cd' },\r\n { name: '\u81ea\u6211\u6fc0\u52b1', def: '\u5728\u4f4e\u843d\u65f6\u81ea\u6211\u9f13\u52b1\u3001\u7ef4\u6301\u52aa\u529b' }\r\n ]\r\n }, {\r\n area: '\u793e\u4ea4\u6280\u80fd',\r\n items: [\r\n { name: '\u793e\u4ea4\u53d1\u8d77', def: '\u4e3b\u52a8\u4e0e\u4ed6\u4eba\u5efa\u7acb\u793e\u4ea4\u8054\u7cfb' },\r\n { name: '\u89c2\u70b9\u91c7\u62e9', def: '\u7406\u89e3\u4ed6\u4eba\u53ef\u80fd\u6709\u4e0d\u540c\u60f3\u6cd5\u548c\u611f\u53d7' },\r\n { name: '\u51b2\u7a81\u89e3\u51b3', def: '\u4f7f\u7528\u534f\u5546\u3001\u59a5\u534f\u7b49\u7b56\u7565\u89e3\u51b3\u5206\u6b67' },\r\n { name: '\u793c\u8c8c\u4e0e\u89c4\u8303', def: '\u9075\u5b88\u793e\u4f1a\u57fa\u672c\u793c\u4eea' },\r\n { name: '\u5171\u60c5\u56de\u5e94', def: '\u6070\u5f53\u56de\u5e94\u4ed6\u4eba\u60c5\u7eea' },\r\n { name: '\u975e\u8bed\u8a00\u6c9f\u901a\u89e3\u8bfb', def: '\u7406\u89e3\u8868\u60c5\u3001\u80a2\u4f53\u3001\u8bed\u6c14\u7b49\u975e\u8bed\u8a00\u4fe1\u606f' },\r\n { name: '\u62d2\u7edd\u4e0e\u63a5\u53d7\u62d2\u7edd', def: '\u5efa\u8bbe\u6027\u5730\u62d2\u7edd\u4ed6\u4eba\u4ee5\u53ca\u63a5\u53d7\u88ab\u62d2\u7edd' },\r\n { name: '\u5408\u4f5c\u4e0e\u9886\u5bfc\u529b', def: '\u5728\u56e2\u961f\u4e2d\u8d21\u732e\u4e0e\u534f\u8c03' }\r\n ]\r\n }];\r\n\r\n function buildSkillsTable() {\r\n const tbody = document.querySelector('#skills-table tbody');\r\n tbody.innerHTML = '';\r\n skills.forEach(area => {\r\n area.items.forEach((item, idx) => {\r\n const tr = document.createElement('tr');\r\n tr.innerHTML = `\r\n <td style=\"padding:6px;font-weight:500;\">${idx === 0 ? area.area : ''}<\/td>\r\n <td style=\"padding:6px;\">${item.name} <span style=\"color:var(--text-muted);font-size:11px;\">\uff08${item.def}\uff09<\/span><\/td>\r\n <td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" min=\"0\" max=\"10\" style=\"width:52px;text-align:center;\" class=\"skill-d1\" \/><\/td>\r\n <td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" min=\"0\" max=\"10\" style=\"width:52px;text-align:center;\" class=\"skill-d5\" \/><\/td>\r\n <td style=\"text-align:center;\"><input type=\"number\" step=\"0.1\" min=\"0\" max=\"10\" style=\"width:52px;text-align:center;\" class=\"skill-d10\" \/><\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n });\r\n }\r\n buildSkillsTable();\r\n\r\n \/\/ ============================================================\r\n \/\/ 2. \u76ee\u6807\u52a8\u6001\u7ba1\u7406\r\n \/\/ ============================================================\r\n let goalCount = 0;\r\n\r\n function ratingHTML(num) {\r\n const levels = [\r\n { value: '+2', label: '+2 \u8fdc\u8d85\u51fa\u9884\u671f', desc: '\u8fdb\u6b65\u8fdc\u8d85\u9884\u671f\uff0c\u884c\u4e3a\u5df2\u6cdb\u5316\u6216\u81ea\u53d1\u51fa\u73b0' },\r\n { value: '+1', label: '+1 \u8d85\u51fa\u9884\u671f', desc: '\u6bd4\u9884\u671f\u8fdb\u6b65\u66f4\u591a\uff0c\u63d0\u793a\u8f85\u52a9\u7b49\u7ea7\u5df2\u4e0b\u964d' },\r\n { value: '0', label: '0 \u9884\u671f\u8fbe\u6210', desc: '\u521a\u597d\u8fbe\u523010\u5929\u5e72\u9884\u7684\u5408\u7406\u76ee\u6807' },\r\n { value: '-1', label: '-1 \u90e8\u5206\u8fbe\u6210', desc: '\u6709\u8fdb\u6b65\uff0c\u4f46\u672a\u5b8c\u5168\u8fbe\u5230\u9884\u671f' },\r\n { value: '-2', label: '-2 \u57fa\u7ebf\/\u65e0\u53d8\u5316', desc: '\u4e0eDay1\u57fa\u7ebf\u6301\u5e73\uff0c\u65e0\u660e\u663e\u8fdb\u6b65' }\r\n ];\r\n return levels.map(l =>\r\n `<label><input type=\"radio\" name=\"goal-rating-${num}\" value=\"${l.value}\" \/><span><strong>${l.label}<\/strong><span class=\"rating-desc\">${l.desc}<\/span><\/span><\/label>`\r\n ).join('');\r\n }\r\n\r\n function createGoalBlock(num) {\r\n const div = document.createElement('div');\r\n div.className = 'goal-block';\r\n div.dataset.goalId = num;\r\n div.innerHTML = `\r\n <button class=\"remove-goal\" onclick=\"this.parentElement.remove()\" title=\"\u5220\u9664\u6b64\u76ee\u6807\">\u2715<\/button>\r\n <div class=\"goal-label\">\u76ee\u6807\u884c\u4e3a ${num}<\/div>\r\n <input type=\"text\" class=\"goal-desc\" placeholder=\"\u4f8b\u5982\uff1a\u751f\u6c14\u65f6\u7528'\u6211\u89c9\u5f97'\u8868\u8fbe\uff0c\u800c\u975e\u63a8\u4eba\" style=\"margin-bottom:6px;\" \/>\r\n <div class=\"goal-row\">\r\n <span class=\"item\">Day1 \u57fa\u7ebf\uff1a<input type=\"number\" min=\"0\" max=\"10\" class=\"goal-d1\" \/> \/10<\/span>\r\n <span class=\"item\">Day5\uff1a<input type=\"number\" min=\"0\" max=\"10\" class=\"goal-d5\" \/> \/10<\/span>\r\n <span class=\"item\">Day10\uff1a<input type=\"number\" min=\"0\" max=\"10\" class=\"goal-d10\" \/> \/10<\/span>\r\n <\/div>\r\n <label style=\"margin-top:8px;font-size:13px;\">\u8fbe\u6210\u5ea6\uff1a<\/label>\r\n <div class=\"rating-group\">${ratingHTML(num)}<\/div>\r\n <label style=\"margin-top:6px;font-size:13px;\">\u54a8\u8be2\u5e08\u89c2\u5bdf\u603b\u7ed3\uff1a<\/label>\r\n <textarea rows=\"2\" class=\"goal-obs\" placeholder=\"\u8f85\u52a9\u7b49\u7ea7\u53d8\u5316 \/ \u9891\u6b21\u53d8\u5316\u2026\"><\/textarea>\r\n `;\r\n return div;\r\n }\r\n\r\n function addGoal() {\r\n goalCount++;\r\n document.getElementById('goals-container').appendChild(createGoalBlock(goalCount));\r\n }\r\n\r\n \/\/ \u9ed8\u8ba4 3 \u4e2a\u76ee\u6807\r\n for (let i = 1; i <= 3; i++) {\r\n goalCount++;\r\n document.getElementById('goals-container').appendChild(createGoalBlock(i));\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ 3. \u4e0a\u4f20\u529f\u80fd\uff08\u901a\u7528\uff09\r\n \/\/ ============================================================\r\n const uploadState = {};\r\n\r\n function setupUpload(uploadId, inputId, previewId, accept) {\r\n const area = document.getElementById(uploadId);\r\n const input = document.getElementById(inputId);\r\n const grid = document.getElementById(previewId);\r\n input.setAttribute('accept', accept);\r\n if (!uploadState[previewId]) uploadState[previewId] = [];\r\n\r\n area.addEventListener('click', () => input.click());\r\n input.addEventListener('change', () => {\r\n handleFiles(input.files, previewId);\r\n input.value = '';\r\n });\r\n area.addEventListener('dragover', e => { e.preventDefault();\r\n area.style.borderColor = 'var(--accent-green)'; });\r\n area.addEventListener('dragleave', () => { area.style.borderColor = 'var(--border)'; });\r\n area.addEventListener('drop', e => {\r\n e.preventDefault();\r\n area.style.borderColor = 'var(--border)';\r\n handleFiles(e.dataTransfer.files, previewId);\r\n });\r\n\r\n function handleFiles(files, gridId) {\r\n const g = document.getElementById(gridId);\r\n for (const file of files) {\r\n if (!file.type.match(\/(image.*|application\\\/pdf)\/)) continue;\r\n const reader = new FileReader();\r\n reader.onload = function(ev) {\r\n const dataUrl = ev.target.result;\r\n uploadState[gridId].push({ dataUrl, type: file.type });\r\n addPreviewItem(g, dataUrl, gridId, uploadState[gridId].length - 1, file.type);\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n function addPreviewItem(grid, dataUrl, gridId, idx, type) {\r\n const item = document.createElement('div');\r\n item.className = 'preview-item';\r\n item.dataset.index = idx;\r\n if (type && type.includes('pdf')) {\r\n const icon = document.createElement('div');\r\n icon.className = 'file-icon';\r\n icon.textContent = '\ud83d\udcc4';\r\n item.appendChild(icon);\r\n } else {\r\n const img = document.createElement('img');\r\n img.src = dataUrl;\r\n item.appendChild(img);\r\n }\r\n const rm = document.createElement('button');\r\n rm.className = 'remove-btn';\r\n rm.textContent = '\u2715';\r\n rm.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n uploadState[gridId].splice(idx, 1);\r\n item.remove();\r\n Array.from(grid.querySelectorAll('.preview-item')).forEach((el, i) => el.dataset.index = i);\r\n });\r\n item.appendChild(rm);\r\n grid.appendChild(item);\r\n }\r\n }\r\n\r\n setupUpload('upload-area-passbook', 'file-input-passbook', 'preview-passbook', 'image\/*');\r\n setupUpload('upload-area-peer', 'file-input-peer', 'preview-peer', 'image\/*');\r\n setupUpload('upload-area-toolkit', 'file-input-toolkit', 'preview-toolkit', 'image\/*,.pdf');\r\n\r\n \/\/ ============================================================\r\n \/\/ 4. \u6536\u96c6\u6570\u636e\uff08\u4f9b\u62a5\u544a\u751f\u6210\u4f7f\u7528\uff09\r\n \/\/ ============================================================\r\n function collectAllData() {\r\n const data = {};\r\n\r\n \/\/ \u5c01\u9762\r\n data.cover = {\r\n name: document.getElementById('cover-name').value || '',\r\n age: document.getElementById('cover-age').value || '',\r\n start: document.getElementById('cover-start').value || '',\r\n end: document.getElementById('cover-end').value || '',\r\n counselor: document.getElementById('cover-counselor').value || '',\r\n assist: document.getElementById('cover-assist').value || '',\r\n reportDate: document.getElementById('cover-report-date').value || ''\r\n };\r\n\r\n \/\/ \u7b2c\u4e00\u90e8\u5206\r\n const p1Scores = document.querySelectorAll('.p1-score');\r\n const p1Focus = document.querySelectorAll('.p1-focus');\r\n data.part1 = {\r\n scores: Array.from(p1Scores).map(el => el.value || ''),\r\n focus: Array.from(p1Focus).map(el => el.value || ''),\r\n selfReport: document.getElementById('child-self-report').value || '',\r\n goalQuote: document.getElementById('child-goal-quote').value || ''\r\n };\r\n\r\n \/\/ \u7b2c\u4e8c\u90e8\u5206\uff1a\u76ee\u6807\r\n const goals = [];\r\n document.querySelectorAll('.goal-block').forEach((block, idx) => {\r\n const id = block.dataset.goalId || idx;\r\n const desc = block.querySelector('.goal-desc')?.value || '';\r\n const d1 = block.querySelector('.goal-d1')?.value || '';\r\n const d5 = block.querySelector('.goal-d5')?.value || '';\r\n const d10 = block.querySelector('.goal-d10')?.value || '';\r\n const obs = block.querySelector('.goal-obs')?.value || '';\r\n const ratingEl = block.querySelector(`input[name=\"goal-rating-${id}\"]:checked`);\r\n const rating = ratingEl ? ratingEl.value : '';\r\n goals.push({ desc, d1, d5, d10, obs, rating });\r\n });\r\n data.goals = goals;\r\n\r\n \/\/ \u7b2c\u4e09\u90e8\u5206\r\n data.part3 = {\r\n study: document.getElementById('obs-study').value || '',\r\n emotion: document.getElementById('obs-emotion').value || '',\r\n social: document.getElementById('obs-social').value || ''\r\n };\r\n\r\n \/\/ \u7b2c\u56db\u90e8\u5206\r\n data.part4 = {\r\n study_d1: document.querySelector('.self-study-d1')?.value || '',\r\n study_d5: document.querySelector('.self-study-d5')?.value || '',\r\n study_d10: document.querySelector('.self-study-d10')?.value || '',\r\n emotion_d1: document.querySelector('.self-emotion-d1')?.value || '',\r\n emotion_d5: document.querySelector('.self-emotion-d5')?.value || '',\r\n emotion_d10: document.querySelector('.self-emotion-d10')?.value || '',\r\n social_d1: document.querySelector('.self-social-d1')?.value || '',\r\n social_d5: document.querySelector('.self-social-d5')?.value || '',\r\n social_d10: document.querySelector('.self-social-d10')?.value || '',\r\n power: document.getElementById('child-power').value || '',\r\n toParents: document.getElementById('child-to-parents').value || ''\r\n };\r\n\r\n \/\/ \u7b2c\u4e94\u3001\u516d\u90e8\u5206 & \u5de5\u5177\u5305\uff1a\u56fe\u7247\u6570\u636e\r\n data.images = {\r\n passbook: uploadState['preview-passbook'] || [],\r\n peer: uploadState['preview-peer'] || [],\r\n toolkit: uploadState['preview-toolkit'] || []\r\n };\r\n\r\n \/\/ \u7b2c\u4e03\u90e8\u5206\uff1a\u6280\u80fd\u8868\r\n const skillRows = document.querySelectorAll('#skills-table tbody tr');\r\n const skillData = [];\r\n skillRows.forEach(row => {\r\n const cells = row.querySelectorAll('td');\r\n if (cells.length < 5) return;\r\n const area = cells[0].textContent.trim();\r\n const name = cells[1].textContent.trim();\r\n const d1 = row.querySelector('.skill-d1')?.value || '';\r\n const d5 = row.querySelector('.skill-d5')?.value || '';\r\n const d10 = row.querySelector('.skill-d10')?.value || '';\r\n skillData.push({ area, name, d1, d5, d10 });\r\n });\r\n data.skills = skillData;\r\n\r\n \/\/ \u7b2c\u516b\u90e8\u5206\r\n data.part8 = {\r\n pre_study: document.querySelector('.post-pre-study')?.value || '',\r\n post_study: document.querySelector('.post-post-study')?.value || '',\r\n change_study: document.querySelector('.post-change-study')?.value || '',\r\n pre_emotion: document.querySelector('.post-pre-emotion')?.value || '',\r\n post_emotion: document.querySelector('.post-post-emotion')?.value || '',\r\n change_emotion: document.querySelector('.post-change-emotion')?.value || '',\r\n pre_social: document.querySelector('.post-pre-social')?.value || '',\r\n post_social: document.querySelector('.post-post-social')?.value || '',\r\n change_social: document.querySelector('.post-change-social')?.value || '',\r\n advice: document.getElementById('family-advice').value || '',\r\n toolkitChecked: document.querySelector('.toolkit-check')?.checked || false,\r\n followupChecked: document.querySelector('.followup-check')?.checked || false\r\n };\r\n\r\n return data;\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ 5. \u751f\u6210\u62a5\u544a HTML \u5e76\u4e0b\u8f7d\r\n \/\/ ============================================================\r\n function downloadReport() {\r\n const data = collectAllData();\r\n\r\n \/\/ \u6784\u5efa\u62a5\u544a HTML\r\n let html = `<!DOCTYPE html>\r\n <html lang=\"zh-CN\">\r\n <head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a<\/title>\r\n <style>\r\n * { margin:0; padding:0; box-sizing:border-box; }\r\n body {\r\n font-family: \"PingFang SC\", \"Noto Sans SC\", \"Microsoft YaHei\", system-ui, sans-serif;\r\n background: #f7f4f0;\r\n color: #2d2d2d;\r\n padding: 40px 24px;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .report {\r\n max-width: 1000px;\r\n width: 100%;\r\n background: #ffffff;\r\n border-radius: 16px;\r\n padding: 48px 56px;\r\n box-shadow: 0 8px 40px rgba(0,0,0,0.08);\r\n }\r\n @media (max-width: 700px) {\r\n .report { padding: 28px 20px; }\r\n }\r\n .report-cover {\r\n text-align: center;\r\n padding: 20px 0 32px;\r\n border-bottom: 3px solid #e8e0d8;\r\n margin-bottom: 32px;\r\n }\r\n .report-cover h1 {\r\n font-size: 32px;\r\n letter-spacing: 3px;\r\n color: #3d3d3d;\r\n }\r\n .report-cover .sub {\r\n font-size: 16px;\r\n color: #9a8f87;\r\n letter-spacing: 5px;\r\n margin-top: 2px;\r\n }\r\n .report-cover .divider {\r\n width: 60px;\r\n height: 3px;\r\n background: #81B29A;\r\n margin: 16px auto 20px;\r\n border-radius: 2px;\r\n }\r\n .report-cover .meta {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px 28px;\r\n font-size: 14px;\r\n color: #6b6b6b;\r\n }\r\n .report-cover .meta span { display: inline-block; }\r\n .report-cover .meta .label { font-weight: 600; color: #3d3d3d; }\r\n\r\n .section {\r\n margin-bottom: 32px;\r\n page-break-inside: avoid;\r\n }\r\n .section-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #3d3d3d;\r\n border-bottom: 2px solid #f0eae4;\r\n padding-bottom: 10px;\r\n margin-bottom: 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .section-title .badge {\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: #9a8f87;\r\n background: #f0eae4;\r\n padding: 0 12px;\r\n border-radius: 20px;\r\n margin-left: auto;\r\n }\r\n .section .label-text {\r\n font-weight: 600;\r\n font-size: 14px;\r\n color: #3d3d3d;\r\n margin: 12px 0 4px;\r\n display: block;\r\n }\r\n .section .content-text {\r\n font-size: 14px;\r\n line-height: 1.8;\r\n color: #3d3d3d;\r\n background: #faf8f6;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n white-space: pre-wrap;\r\n word-break: break-word;\r\n }\r\n .section .content-text-empty {\r\n color: #b0a8a0;\r\n font-style: italic;\r\n }\r\n table.report-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 14px;\r\n margin: 6px 0 10px;\r\n }\r\n table.report-table th {\r\n background: #f5f1ec;\r\n font-weight: 600;\r\n padding: 8px 12px;\r\n text-align: left;\r\n border: 1px solid #e0d8d0;\r\n }\r\n table.report-table td {\r\n padding: 8px 12px;\r\n border: 1px solid #e8e0d8;\r\n vertical-align: top;\r\n }\r\n table.report-table td.center { text-align: center; }\r\n .goal-item {\r\n background: #faf8f6;\r\n border-radius: 8px;\r\n padding: 14px 18px;\r\n margin-bottom: 12px;\r\n border-left: 4px solid #81B29A;\r\n }\r\n .goal-item .g-desc { font-weight: 600; font-size: 15px; margin-bottom: 4px; }\r\n .goal-item .g-row { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; color: #6b6b6b; }\r\n .goal-item .g-row strong { color: #3d3d3d; }\r\n .goal-item .g-rating { font-size: 14px; margin: 4px 0 2px; }\r\n .goal-item .g-obs { font-size: 14px; color: #6b6b6b; background: #fff; padding: 6px 10px; border-radius: 4px; margin-top: 4px; }\r\n\r\n \/* \u56fe\u7247\u6837\u5f0f\uff1a\u4e00\u884c\u4e00\u5f20\uff0c\u5927\u5c3a\u5bf8 *\/\r\n .img-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n margin: 8px 0 4px;\r\n }\r\n .img-item {\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #e8e0d8;\r\n background: #faf8f6;\r\n text-align: center;\r\n }\r\n .img-item img {\r\n width: 100%;\r\n height: auto;\r\n max-height: 600px;\r\n object-fit: contain;\r\n background: #faf8f6;\r\n display: block;\r\n }\r\n .img-item .pdf-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 200px;\r\n font-size: 64px;\r\n color: #9a8f87;\r\n }\r\n\r\n .check-item {\r\n display: inline-block;\r\n font-size: 14px;\r\n margin-right: 24px;\r\n padding: 4px 0;\r\n }\r\n .check-item .mark { color: #81B29A; font-weight: 700; margin-right: 4px; }\r\n\r\n .footer-note {\r\n text-align: center;\r\n font-size: 12px;\r\n color: #b0a8a0;\r\n border-top: 1px solid #f0eae4;\r\n padding-top: 16px;\r\n margin-top: 24px;\r\n }\r\n @media print {\r\n body { background: #fff; padding: 12px; }\r\n .report { box-shadow: none; border: 1px solid #ddd; }\r\n .section { page-break-inside: avoid; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"report\">`;\r\n\r\n \/\/ ---------- \u5c01\u9762 ----------\r\n const c = data.cover;\r\n html += `\r\n <div class=\"report-cover\">\r\n <h1>10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a<\/h1>\r\n <div class=\"sub\">\u676d\u5dde\u5584\u7267\u5168\u4eba\u5065\u5eb7\u7ba1\u7406\u6709\u9650\u516c\u53f8<\/div>\r\n <div class=\"divider\"><\/div>\r\n <div class=\"meta\">\r\n <span><span class=\"label\">\u5b66\u5458\u59d3\u540d\uff1a<\/span>${c.name || '\u2014'}<\/span>\r\n <span><span class=\"label\">\u5e74\u9f84\uff1a<\/span>${c.age || '\u2014'}<\/span>\r\n <span><span class=\"label\">\u5165\u8425\u65e5\u671f\uff1a<\/span>${c.start || '\u2014'} \u81f3 ${c.end || '\u2014'}<\/span>\r\n <span><span class=\"label\">\u4e3b\u5e26\u54a8\u8be2\u5e08\uff1a<\/span>${c.counselor || '\u2014'}<\/span>\r\n <span><span class=\"label\">\u534f\u52a9\u54a8\u8be2\u5e08\uff1a<\/span>${c.assist || '\u2014'}<\/span>\r\n <span><span class=\"label\">\u62a5\u544a\u65e5\u671f\uff1a<\/span>${c.reportDate || '\u2014'}<\/span>\r\n <\/div>\r\n <\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u4e00\u90e8\u5206 ----------\r\n const p1 = data.part1;\r\n const p1Labels = ['\u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef', '\u60c5\u7eea\u7ba1\u7406', '\u793e\u4ea4\u6280\u80fd'];\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83d\udccb \u7b2c\u4e00\u90e8\u5206\uff1a\u521d\u59cb\u8bc4\u4f30\u6982\u89c8 <span class=\"badge\">1 \/ 8<\/span><\/div>\r\n <span class=\"label-text\">1. \u5bb6\u957f\u7b5b\u67e5\u7ed3\u679c\uff08\u524d\u6d4b\uff09<\/span>\r\n <table class=\"report-table\">\r\n <thead><tr><th>\u9886\u57df<\/th><th style=\"text-align:center;\">\u524d\u6d4b\u5747\u5206<\/th><th>\u91cd\u70b9\u5173\u6ce8\u6761\u76ee<\/th><\/tr><\/thead>\r\n <tbody>`;\r\n for (let i = 0; i < 3; i++) {\r\n html += `<tr><td>${p1Labels[i]}<\/td><td class=\"center\">${p1.scores[i] || '\u2014'}<\/td><td>${p1.focus[i] || '\u2014'}<\/td><\/tr>`;\r\n }\r\n html += `<\/tbody><\/table>\r\n <span class=\"label-text\">2. \u513f\u7ae5\u81ea\u8bc4\uff08Day1\uff09\u2014\u2014\u5b69\u5b50\u81ea\u8ff0\u6700\u56f0\u96be\u76843\u9879\uff1a<\/span>\r\n <div class=\"content-text\">${p1.selfReport || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <span class=\"label-text\" style=\"margin-top:12px;\">3. \u5b69\u5b50\u81ea\u5df1\u9009\u5b9a\u768410\u5929\u76ee\u6807\uff08Day1\u4e00\u5bf9\u4e00\u8bbf\u8c08\u539f\u8bdd\uff09\uff1a<\/span>\r\n <div class=\"content-text\">${p1.goalQuote || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u4e8c\u90e8\u5206 ----------\r\n const goals = data.goals;\r\n const ratingMap = {\r\n '+2': '\u2795 \u8fdc\u8d85\u51fa\u9884\u671f',\r\n '+1': '\u2795 \u8d85\u51fa\u9884\u671f',\r\n '0': '\u2796 \u9884\u671f\u8fbe\u6210',\r\n '-1': '\u2796 \u90e8\u5206\u8fbe\u6210',\r\n '-2': '\u2796 \u57fa\u7ebf\/\u65e0\u53d8\u5316'\r\n };\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83c\udfaf \u7b2c\u4e8c\u90e8\u5206\uff1a\u4e2a\u6027\u5316\u76ee\u6807\u4e0e\u8fbe\u6210\u60c5\u51b5 <span class=\"badge\">2 \/ 8<\/span><\/div>`;\r\n if (goals.length === 0) {\r\n html += `<div class=\"content-text content-text-empty\">\u672a\u6dfb\u52a0\u76ee\u6807<\/div>`;\r\n } else {\r\n goals.forEach((g, idx) => {\r\n const label = ratingMap[g.rating] || g.rating || '\u672a\u8bc4\u4f30';\r\n html += `\r\n <div class=\"goal-item\">\r\n <div class=\"g-desc\">\u76ee\u6807 ${idx + 1}\uff1a${g.desc || '\uff08\u672a\u63cf\u8ff0\uff09'}<\/div>\r\n <div class=\"g-row\">\r\n <span><strong>Day1 \u57fa\u7ebf\uff1a<\/strong>${g.d1 || '\u2014'}\/10<\/span>\r\n <span><strong>Day5\uff1a<\/strong>${g.d5 || '\u2014'}\/10<\/span>\r\n <span><strong>Day10\uff1a<\/strong>${g.d10 || '\u2014'}\/10<\/span>\r\n <\/div>\r\n <div class=\"g-rating\"><strong>\u8fbe\u6210\u5ea6\uff1a<\/strong>${label}<\/div>\r\n <div class=\"g-obs\"><strong>\u54a8\u8be2\u5e08\u89c2\u5bdf\uff1a<\/strong>${g.obs || '\u672a\u586b\u5199'}<\/div>\r\n <\/div>`;\r\n });\r\n }\r\n html += `<\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u4e09\u90e8\u5206 ----------\r\n const p3 = data.part3;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83d\udd0d \u7b2c\u4e09\u90e8\u5206\uff1a\u54a8\u8be2\u5e08\u8d28\u6027\u89c2\u5bdf\u62a5\u544a <span class=\"badge\">3 \/ 8<\/span><\/div>\r\n <span class=\"label-text\">\ud83c\udff7\ufe0f \u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef\u9886\u57df<\/span>\r\n <div class=\"content-text\">${p3.study || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <span class=\"label-text\" style=\"margin-top:12px;\">\ud83c\udfa8 \u60c5\u7eea\u7ba1\u7406\u9886\u57df<\/span>\r\n <div class=\"content-text\">${p3.emotion || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <span class=\"label-text\" style=\"margin-top:12px;\">\ud83e\udd1d \u793e\u4ea4\u6280\u80fd\u9886\u57df<\/span>\r\n <div class=\"content-text\">${p3.social || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u56db\u90e8\u5206 ----------\r\n const p4 = data.part4;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83d\udcac \u7b2c\u56db\u90e8\u5206\uff1a\u5b69\u5b50\u7684\u58f0\u97f3 <span class=\"badge\">4 \/ 8<\/span><\/div>\r\n <span class=\"label-text\">\u513f\u7ae5\u81ea\u8bc4\u5bf9\u6bd4<\/span>\r\n <table class=\"report-table\">\r\n <thead><tr><th>\u9886\u57df<\/th><th style=\"text-align:center;\">Day1<\/th><th style=\"text-align:center;\">Day5<\/th><th style=\"text-align:center;\">Day10<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>\u5b66\u4e60\u4e60\u60ef<\/td><td class=\"center\">${p4.study_d1 || '\u2014'}<\/td><td class=\"center\">${p4.study_d5 || '\u2014'}<\/td><td class=\"center\">${p4.study_d10 || '\u2014'}<\/td><\/tr>\r\n <tr><td>\u60c5\u7eea\u7ba1\u7406<\/td><td class=\"center\">${p4.emotion_d1 || '\u2014'}<\/td><td class=\"center\">${p4.emotion_d5 || '\u2014'}<\/td><td class=\"center\">${p4.emotion_d10 || '\u2014'}<\/td><\/tr>\r\n <tr><td>\u793e\u4ea4\u6280\u80fd<\/td><td class=\"center\">${p4.social_d1 || '\u2014'}<\/td><td class=\"center\">${p4.social_d5 || '\u2014'}<\/td><td class=\"center\">${p4.social_d10 || '\u2014'}<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <span class=\"label-text\">\u5b69\u5b50\u773c\u4e2d\u7684\u201c\u6211\u7684\u8d85\u80fd\u529b\u201d\uff08\u539f\u8bdd\u5f15\u7528\uff09\uff1a<\/span>\r\n <div class=\"content-text\">${p4.power || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <span class=\"label-text\" style=\"margin-top:12px;\">\u5b69\u5b50\u60f3\u5bf9\u7238\u7238\u5988\u5988\u8bf4\u7684\u8bdd\uff08\u539f\u8bdd\u5f15\u7528\uff09\uff1a<\/span>\r\n <div class=\"content-text\">${p4.toParents || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u4e94\u90e8\u5206\uff1a\u6210\u957f\u5b58\u6298 ----------\r\n const imgs1 = data.images.passbook;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83c\udf31 \u7b2c\u4e94\u90e8\u5206\uff1a\u6210\u957f\u5b58\u6298 <span class=\"badge\">5 \/ 8<\/span><\/div>`;\r\n if (imgs1.length === 0) {\r\n html += `<div class=\"content-text content-text-empty\">\u672a\u4e0a\u4f20\u56fe\u7247<\/div>`;\r\n } else {\r\n html += `<div class=\"img-grid\">`;\r\n imgs1.forEach(img => {\r\n if (img.type && img.type.includes('pdf')) {\r\n html += `<div class=\"img-item\"><div class=\"pdf-icon\">\ud83d\udcc4<\/div><\/div>`;\r\n } else {\r\n html += `<div class=\"img-item\"><img decoding=\"async\" src=\"${img.dataUrl}\" alt=\"\u6210\u957f\u5b58\u6298\" \/><\/div>`;\r\n }\r\n });\r\n html += `<\/div>`;\r\n }\r\n html += `<\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u516d\u90e8\u5206\uff1a\u540c\u4f34\u6b23\u8d4f\u5361 ----------\r\n const imgs2 = data.images.peer;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83d\udc8c \u7b2c\u516d\u90e8\u5206\uff1a\u540c\u4f34\u773c\u4e2d\u7684TA <span class=\"badge\">6 \/ 8<\/span><\/div>`;\r\n if (imgs2.length === 0) {\r\n html += `<div class=\"content-text content-text-empty\">\u672a\u4e0a\u4f20\u56fe\u7247<\/div>`;\r\n } else {\r\n html += `<div class=\"img-grid\">`;\r\n imgs2.forEach(img => {\r\n if (img.type && img.type.includes('pdf')) {\r\n html += `<div class=\"img-item\"><div class=\"pdf-icon\">\ud83d\udcc4<\/div><\/div>`;\r\n } else {\r\n html += `<div class=\"img-item\"><img decoding=\"async\" src=\"${img.dataUrl}\" alt=\"\u540c\u4f34\u6b23\u8d4f\u5361\" \/><\/div>`;\r\n }\r\n });\r\n html += `<\/div>`;\r\n }\r\n html += `<\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u4e03\u90e8\u5206\uff1a\u6280\u80fd\u8868 ----------\r\n const skillsData = data.skills;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83d\udcca \u7b2c\u4e03\u90e8\u5206\uff1a24\u9879\u6280\u80fd\u81ea\u8bc4\u8fbe\u6210\u60c5\u51b5 <span class=\"badge\">7 \/ 8<\/span><\/div>\r\n <table class=\"report-table\">\r\n <thead><tr><th>\u9886\u57df<\/th><th>\u5b50\u6280\u80fd<\/th><th style=\"text-align:center;\">Day1<\/th><th style=\"text-align:center;\">Day5<\/th><th style=\"text-align:center;\">Day10<\/th><\/tr><\/thead>\r\n <tbody>`;\r\n let lastArea = '';\r\n skillsData.forEach(s => {\r\n const showArea = (s.area !== lastArea) ? s.area : '';\r\n lastArea = s.area;\r\n html += `<tr>\r\n <td>${showArea}<\/td>\r\n <td>${s.name}<\/td>\r\n <td class=\"center\">${s.d1 || '\u2014'}<\/td>\r\n <td class=\"center\">${s.d5 || '\u2014'}<\/td>\r\n <td class=\"center\">${s.d10 || '\u2014'}<\/td>\r\n <\/tr>`;\r\n });\r\n html += `<\/tbody><\/table><\/div>`;\r\n\r\n \/\/ ---------- \u7b2c\u516b\u90e8\u5206 ----------\r\n const p8 = data.part8;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83c\udfe0 \u7b2c\u516b\u90e8\u5206\uff1a\u5bb6\u957f\u540e\u6d4b\u4e0e\u5bb6\u5ead\u8854\u63a5\u5efa\u8bae <span class=\"badge\">8 \/ 8<\/span><\/div>\r\n <span class=\"label-text\">\u5bb6\u957f\u7b5b\u67e5\u8868\u524d\u540e\u5bf9\u6bd4\uff1a<\/span>\r\n <table class=\"report-table\">\r\n <thead><tr><th>\u9886\u57df<\/th><th style=\"text-align:center;\">\u524d\u6d4b<\/th><th style=\"text-align:center;\">\u540e\u6d4b<\/th><th style=\"text-align:center;\">\u53d8\u5316<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>\u5b66\u4e60\u4e0e\u751f\u6d3b\u4e60\u60ef<\/td><td class=\"center\">${p8.pre_study || '\u2014'}<\/td><td class=\"center\">${p8.post_study || '\u2014'}<\/td><td class=\"center\">${p8.change_study || '\u2014'}<\/td><\/tr>\r\n <tr><td>\u60c5\u7eea\u7ba1\u7406<\/td><td class=\"center\">${p8.pre_emotion || '\u2014'}<\/td><td class=\"center\">${p8.post_emotion || '\u2014'}<\/td><td class=\"center\">${p8.change_emotion || '\u2014'}<\/td><\/tr>\r\n <tr><td>\u793e\u4ea4\u6280\u80fd<\/td><td class=\"center\">${p8.pre_social || '\u2014'}<\/td><td class=\"center\">${p8.post_social || '\u2014'}<\/td><td class=\"center\">${p8.change_social || '\u2014'}<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <span class=\"label-text\">\u5bb6\u5ead\u8854\u63a5\u5efa\u8bae\uff1a<\/span>\r\n <div class=\"content-text\">${p8.advice || '<span class=\"content-text-empty\">\u672a\u586b\u5199<\/span>'}<\/div>\r\n <div style=\"margin-top:10px;\">\r\n <span class=\"check-item\">${p8.toolkitChecked ? '\u2705 \u5df2\u968f\u62a5\u544a\u9644\u8d60\u300a\u5bb6\u5ead\u8854\u63a5\u5de5\u5177\u5305\u300b' : '\u2b1c \u672a\u52fe\u9009'}<\/span>\r\n <span class=\"check-item\">${p8.followupChecked ? '\u2705 \u4e0e\u5bb6\u957f\u7ea6\u5b9a\u7ed3\u8425\u540e1\u4e2a\u6708\u7ebf\u4e0a\u968f\u8bbf' : '\u2b1c \u672a\u52fe\u9009'}<\/span>\r\n <\/div>\r\n <\/div>`;\r\n\r\n \/\/ ---------- \u9644\uff1a\u5de5\u5177\u5305 ----------\r\n const imgs3 = data.images.toolkit;\r\n html += `\r\n <div class=\"section\">\r\n <div class=\"section-title\">\ud83d\udce6 \u9644\uff1a\u5bb6\u5ead\u8854\u63a5\u5de5\u5177\u5305 <span class=\"badge\">\u9644\u4ef6<\/span><\/div>`;\r\n if (imgs3.length === 0) {\r\n html += `<div class=\"content-text content-text-empty\">\u672a\u4e0a\u4f20\u6587\u4ef6<\/div>`;\r\n } else {\r\n html += `<div class=\"img-grid\">`;\r\n imgs3.forEach(img => {\r\n if (img.type && img.type.includes('pdf')) {\r\n html += `<div class=\"img-item\"><div class=\"pdf-icon\">\ud83d\udcc4<\/div><\/div>`;\r\n } else {\r\n html += `<div class=\"img-item\"><img decoding=\"async\" src=\"${img.dataUrl}\" alt=\"\u5de5\u5177\u5305\" \/><\/div>`;\r\n }\r\n });\r\n html += `<\/div>`;\r\n }\r\n html += `<\/div>`;\r\n\r\n \/\/ ---------- \u5e95\u90e8 ----------\r\n html += `\r\n <div class=\"footer-note\">\r\n \u62a5\u544a\u751f\u6210\u65e5\u671f\uff1a${new Date().toLocaleDateString('zh-CN')}  \u00b7  \u676d\u5dde\u5584\u7267\u5168\u4eba\u5065\u5eb7\u7ba1\u7406\u6709\u9650\u516c\u53f8\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>`;\r\n\r\n \/\/ \u4e0b\u8f7d\r\n const blob = new Blob([html], { type: 'text\/html; charset=utf-8' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `\u6210\u957f\u62a5\u544a_${c.name || '\u5b66\u5458'}_${new Date().toISOString().slice(0, 10)}.html`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a \ud83d\udd10 \u8bf7\u8f93\u5165\u5bc6\u7801 \u672c\u62a5\u544a\u53d7\u5bc6\u7801\u4fdd\u62a4 \u786e\u8ba4 10\u5929\u81ea\u6211\u7ba1\u7406\u6210\u957f\u62a5\u544a \u676d\u5dde\u5584\u7267\u5168\u4eba\u5065\u5eb7\u7ba1\u7406\u6709 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3166","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/pages\/3166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/comments?post=3166"}],"version-history":[{"count":10,"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/pages\/3166\/revisions"}],"predecessor-version":[{"id":3177,"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/pages\/3166\/revisions\/3177"}],"wp:attachment":[{"href":"https:\/\/www.shanmu.wang\/en\/wp-json\/wp\/v2\/media?parent=3166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}