{"id":2755,"date":"2023-10-27T09:12:28","date_gmt":"2023-10-27T01:12:28","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2755"},"modified":"2025-05-29T20:50:45","modified_gmt":"2025-05-29T12:50:45","slug":"responsibility","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/responsibility","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff1a\u8d23\u4efb\u611f\u6d4b\u9a8c\uff0830\u9898\uff09"},"content":{"rendered":"\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n    <!-- \u5f15\u5c0e\u9801 -->\n    <main id=\"resp-intro-page\" class=\"container-fluid py-5\" data-page=\"intro\">\n        <div class=\"container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-lg-8 col-xl-6\">\n                    <div class=\"text-center mb-5\">\n                        <h1 class=\"display-4 fw-bold text-primary mb-3\">\u8cac\u4efb\u611f\u6e2c\u9a57<\/h1>\n                        <p class=\"lead text-muted fs-5\">\u63a2\u7d22\u60a8\u7684\u8cac\u4efb\u611f\u6307\u6578\uff0c\u4e86\u89e3\u81ea\u5df1\u7684\u4eba\u683c\u7279\u8cea<\/p>\n                    <\/div>\n                    \n                    <div class=\"row g-4 mb-5\">\n                        <div class=\"col-md-6\">\n                            <div class=\"card h-100 border-0 shadow-sm\">\n                                <div class=\"card-body d-flex align-items-center\">\n                                    <div class=\"resp-icon-circle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0\" style=\"width: 60px; height: 60px;\">\n                                        <i class=\"bi bi-person-check fs-4\"><\/i>\n                                    <\/div>\n                                    <div>\n                                        <h5 class=\"card-title fw-bold mb-1\">\u81ea\u6211\u7ba1\u7406<\/h5>\n                                        <p class=\"card-text mb-0 text-muted\">\u8a55\u4f30\u60a8\u7684\u6642\u9593\u7ba1\u7406\u548c\u81ea\u5f8b\u80fd\u529b<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-6\">\n                            <div class=\"card h-100 border-0 shadow-sm\">\n                                <div class=\"card-body d-flex align-items-center\">\n                                    <div class=\"resp-icon-circle bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0\" style=\"width: 60px; height: 60px;\">\n                                        <i class=\"bi bi-hand-thumbs-up fs-4\"><\/i>\n                                    <\/div>\n                                    <div>\n                                        <h5 class=\"card-title fw-bold mb-1\">\u627f\u8afe\u5c65\u884c<\/h5>\n                                        <p class=\"card-text mb-0 text-muted\">\u6e2c\u91cf\u60a8\u5c0d\u627f\u8afe\u7684\u5805\u6301\u7a0b\u5ea6<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-6\">\n                            <div class=\"card h-100 border-0 shadow-sm\">\n                                <div class=\"card-body d-flex align-items-center\">\n                                    <div class=\"resp-icon-circle bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0\" style=\"width: 60px; height: 60px;\">\n                                        <i class=\"bi bi-people fs-4\"><\/i>\n                                    <\/div>\n                                    <div>\n                                        <h5 class=\"card-title fw-bold mb-1\">\u4eba\u969b\u8cac\u4efb<\/h5>\n                                        <p class=\"card-text mb-0 text-muted\">\u4e86\u89e3\u60a8\u5728\u4eba\u969b\u95dc\u4fc2\u4e2d\u7684\u8cac\u4efb\u611f<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-6\">\n                            <div class=\"card h-100 border-0 shadow-sm\">\n                                <div class=\"card-body d-flex align-items-center\">\n                                    <div class=\"resp-icon-circle bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0\" style=\"width: 60px; height: 60px;\">\n                                        <i class=\"bi bi-briefcase fs-4\"><\/i>\n                                    <\/div>\n                                    <div>\n                                        <h5 class=\"card-title fw-bold mb-1\">\u5de5\u4f5c\u8cac\u4efb<\/h5>\n                                        <p class=\"card-text mb-0 text-muted\">\u6aa2\u8996\u60a8\u7684\u8077\u696d\u64cd\u5b88\u548c\u5de5\u4f5c\u614b\u5ea6<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"alert alert-info border-0 shadow-sm mb-4\">\n                        <h5 class=\"alert-heading fw-bold mb-3\">\n                            <i class=\"bi bi-info-circle me-2\"><\/i>\u6e2c\u9a57\u8aaa\u660e\n                        <\/h5>\n                        <ul class=\"mb-0\">\n                            <li class=\"mb-2\">\u672c\u6e2c\u9a57\u517130\u9053\u984c\u76ee\uff0c\u9700\u8981\u7d045-8\u5206\u9418\u5b8c\u6210<\/li>\n                            <li class=\"mb-2\">\u8acb\u6839\u64da\u60a8\u7684\u5be6\u969b\u60c5\u6cc1\u8aa0\u5be6\u4f5c\u7b54<\/li>\n                            <li class=\"mb-0\">\u6bcf\u984c\u90fd\u9700\u8981\u9078\u64c7\uff0c\u6c92\u6709\u6a19\u6e96\u7b54\u6848<\/li>\n                        <\/ul>\n                    <\/div>\n                    \n                    <div class=\"text-center\">\n                        <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow-sm\" data-action=\"start-test\">\n                            <i class=\"bi bi-play-circle me-2\"><\/i>\u958b\u59cb\u6e2c\u9a57\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/main>\n\n    <!-- \u6e2c\u9a57\u9801 -->\n    <main id=\"resp-test-page\" class=\"container-fluid py-4 d-none\" data-page=\"test\">\n        <div class=\"container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-lg-8 col-xl-6\">\n                    <div class=\"text-center mb-4\">\n                        <h2 class=\"h3 fw-bold text-primary\">\u8cac\u4efb\u611f\u6e2c\u9a57<\/h2>\n                    <\/div>\n                    \n                    <!-- \u9032\u5ea6\u689d -->\n                    <div class=\"card border-0 shadow-sm mb-4\">\n                        <div class=\"card-body\">\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                                <span class=\"badge bg-primary fs-6\" id=\"resp-progress-text\">\u554f\u984c 1 \/ 30<\/span>\n                                <span class=\"badge bg-secondary fs-6\" id=\"resp-progress-percent\">3%<\/span>\n                            <\/div>\n                            <div class=\"progress\" style=\"height: 10px;\">\n                                <div class=\"progress-bar progress-bar-striped progress-bar-animated\" id=\"resp-progress-bar\" role=\"progressbar\" style=\"width: 3%\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u984c\u76ee\u5361\u7247 -->\n                    <div class=\"card border-0 shadow-sm mb-4\" id=\"resp-question-card\">\n                        <div class=\"card-header bg-light border-0\">\n                            <h3 class=\"card-title fw-bold mb-0 text-dark\" id=\"resp-question-text\" style=\"font-size: 20px;\"><\/h3>\n                        <\/div>\n                        <div class=\"card-body p-3\">\n                            <div class=\"d-grid gap-2\" id=\"resp-options-container\"><\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u63a7\u5236\u6309\u9215 -->\n                    <div class=\"d-flex justify-content-between\">\n                        <button class=\"btn btn-outline-secondary\" id=\"resp-prev-btn\" data-action=\"prev-question\" disabled>\n                            <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u984c\n                        <\/button>\n                        <div class=\"text-muted small\">\n                            \u9ede\u64ca\u9078\u9805\u81ea\u52d5\u9032\u5165\u4e0b\u4e00\u984c\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/main>\n\n    <!-- \u7d50\u679c\u9801 -->\n    <main id=\"resp-result-page\" class=\"container-fluid py-5 d-none\" data-page=\"result\">\n        <div class=\"container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-lg-10 col-xl-8\">\n                    <div class=\"text-center mb-5\">\n                        <h2 class=\"display-5 fw-bold text-primary mb-3\">\u60a8\u7684\u8cac\u4efb\u611f\u6e2c\u9a57\u7d50\u679c<\/h2>\n                        <div class=\"badge bg-primary fs-3 px-4 py-3 rounded-pill shadow-sm mb-3\">\n                            <i class=\"bi bi-star-fill me-2\"><\/i>\n                            <span class=\"fw-bold\" id=\"resp-total-score\">0<\/span>\n                            <span class=\"ms-1\">\/ 120 \u5206<\/span>\n                        <\/div>\n                        <div class=\"alert alert-success border-0 shadow-sm d-inline-block\">\n                            <h4 class=\"alert-heading mb-0\" id=\"resp-score-level\"><\/h4>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u7d50\u679c\u89e3\u6790 -->\n                    <div class=\"card border-0 shadow-sm mb-5\">\n                        <div class=\"card-header bg-primary text-white\">\n                            <h3 class=\"card-title fw-bold mb-0\">\n                                <i class=\"bi bi-clipboard-data me-2\"><\/i>\u7d50\u679c\u89e3\u6790\n                            <\/h3>\n                        <\/div>\n                        <div class=\"card-body\">\n                            <p class=\"card-text lh-lg mb-0\" id=\"resp-result-description\"><\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u5404\u7dad\u5ea6\u5206\u6790 -->\n                    <div class=\"row g-4 mb-5\">\n                        <div class=\"col-lg-6\">\n                            <div class=\"card border-0 shadow-sm h-100\">\n                                <div class=\"card-header bg-light\">\n                                    <h4 class=\"card-title fw-bold mb-0 text-center\">\n                                        <i class=\"bi bi-bar-chart me-2\"><\/i>\u5404\u7dad\u5ea6\u5206\u6790\n                                    <\/h4>\n                                <\/div>\n                                <div class=\"card-body\">\n                                    <div class=\"resp-dimension-scores\">\n                                        <div class=\"mb-4\">\n                                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                                                <span class=\"fw-semibold\">\n                                                    <i class=\"bi bi-person-check text-primary me-1\"><\/i>\u81ea\u6211\u7ba1\u7406\n                                                <\/span>\n                                                <span class=\"badge bg-primary fs-6\" id=\"resp-self-score\">0%<\/span>\n                                            <\/div>\n                                            <div class=\"progress\" style=\"height: 10px;\">\n                                                <div class=\"progress-bar bg-primary progress-bar-striped\" id=\"resp-self-bar\"><\/div>\n                                            <\/div>\n                                        <\/div>\n                                        <div class=\"mb-4\">\n                                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                                                <span class=\"fw-semibold\">\n                                                    <i class=\"bi bi-handshake text-success me-1\"><\/i>\u627f\u8afe\u5c65\u884c\n                                                <\/span>\n                                                <span class=\"badge bg-success fs-6\" id=\"resp-commitment-score\">0%<\/span>\n                                            <\/div>\n                                            <div class=\"progress\" style=\"height: 10px;\">\n                                                <div class=\"progress-bar bg-success progress-bar-striped\" id=\"resp-commitment-bar\"><\/div>\n                                            <\/div>\n                                        <\/div>\n                                        <div class=\"mb-4\">\n                                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                                                <span class=\"fw-semibold\">\n                                                    <i class=\"bi bi-people text-info me-1\"><\/i>\u4eba\u969b\u8cac\u4efb\n                                                <\/span>\n                                                <span class=\"badge bg-info fs-6\" id=\"resp-social-score\">0%<\/span>\n                                            <\/div>\n                                            <div class=\"progress\" style=\"height: 10px;\">\n                                                <div class=\"progress-bar bg-info progress-bar-striped\" id=\"resp-social-bar\"><\/div>\n                                            <\/div>\n                                        <\/div>\n                                        <div class=\"mb-0\">\n                                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                                                <span class=\"fw-semibold\">\n                                                    <i class=\"bi bi-briefcase text-warning me-1\"><\/i>\u5de5\u4f5c\u8cac\u4efb\n                                                <\/span>\n                                                <span class=\"badge bg-warning fs-6\" id=\"resp-work-score\">0%<\/span>\n                                            <\/div>\n                                            <div class=\"progress\" style=\"height: 10px;\">\n                                                <div class=\"progress-bar bg-warning progress-bar-striped\" id=\"resp-work-bar\"><\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-lg-6\">\n                            <div class=\"card border-0 shadow-sm h-100\">\n                                <div class=\"card-header bg-light\">\n                                    <h4 class=\"card-title fw-bold mb-0 text-center\">\n                                        <i class=\"bi bi-radar me-2\"><\/i>\u8cac\u4efb\u611f\u96f7\u9054\u5716\n                                    <\/h4>\n                                <\/div>\n                                <div class=\"card-body d-flex justify-content-center align-items-center\">\n                                    <canvas id=\"resp-radar-chart\" width=\"300\" height=\"300\"><\/canvas>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"text-center\">\n                        <div class=\"btn-group\" role=\"group\">\n                            <button class=\"btn btn-primary btn-lg px-4 py-3 shadow-sm\" data-action=\"restart-test\">\n                                <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6e2c\u9a57\n                            <\/button>\n                            <button class=\"btn btn-outline-primary btn-lg px-4 py-3\" onclick=\"exportToPDF()\">\n                                <i class=\"bi bi-file-earmark-pdf me-2\"><\/i>\u5c0e\u51faPDF\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/main>\n\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            font-size: 16px;\n            line-height: 1.6;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            min-height: 100vh;\n        }\n        \n        .resp-icon-circle {\n            transition: all 0.3s ease;\n        }\n        \n        .resp-icon-circle:hover {\n            transform: scale(1.1);\n        }\n        \n        .resp-option-item {\n            cursor: pointer;\n            transition: all 0.3s ease;\n            border: 2px solid #e9ecef !important;\n            font-size: 16px;\n            padding: 1rem 1.5rem;\n            margin-bottom: 0.5rem;\n            border-radius: 0.5rem !important;\n            background-color: white;\n        }\n        \n        .resp-option-item:hover {\n            border-color: var(--bs-primary) !important;\n            background-color: rgba(13, 110, 253, 0.1) !important;\n            color: var(--bs-primary) !important;\n            transform: translateX(5px);\n            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);\n        }\n        \n        .resp-option-item.selected {\n            border-color: var(--bs-primary) !important;\n            background-color: var(--bs-primary) !important;\n            color: white !important;\n            font-weight: 600;\n            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);\n        }\n        \n        .progress-bar {\n            transition: width 0.8s ease;\n        }\n        \n        .card {\n            border-radius: 1rem !important;\n            overflow: hidden;\n        }\n        \n        .card-header {\n            border-bottom: 2px solid rgba(0,0,0,0.1) !important;\n        }\n        \n        .btn {\n            transition: all 0.3s ease;\n        }\n        \n        .btn:hover {\n            transform: translateY(-2px);\n        }\n        \n        .shadow-sm {\n            box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.1) !important;\n        }\n        \n        @media (max-width: 768px) {\n            .resp-icon-circle {\n                width: 50px !important;\n                height: 50px !important;\n            }\n            \n            body {\n                font-size: 14px;\n            }\n            \n            .btn-group {\n                flex-direction: column;\n            }\n            \n            .btn-group .btn {\n                border-radius: 0.375rem !important;\n                margin-bottom: 0.5rem;\n            }\n        }\n    <\/style>\n\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/3.0.1\/jspdf.umd.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n    <script>\n        (() => {\n            'use strict';\n            \n            \/\/ \u6e2c\u9a57\u6578\u64da\n            const questions = [\n                \"\u8207\u4eba\u7d04\u6703\uff0c\u80fd\u63d0\u524d\u6216\u6e96\u6642\u8d74\u7d04\u3002\",\n                \"\u6709\u975e\u5e38\u611b\u6574\u6f54\u7684\u7fd2\u6163\u3002\",\n                \"\u5927\u591a\u6578\u4eba\u8a8d\u70ba\u4f60\u662f\u500b\u53ef\u9760\u7684\u4eba\u3002\",\n                \"\u501f\u4e86\u5225\u4eba\u7684\u6771\u897f\u80fd\u4fdd\u8b49\u5b8c\u597d\u7121\u640d\u653e\u56de\u539f\u8655\u3002\",\n                \"\u9023\u4e00\u4ef6\u5c0f\u6771\u897f\u90fd\u975e\u5e38\u73cd\u60dc\uff0c\u4e0d\u8f15\u6613\u4e1f\u68c4\u3002\",\n                \"\u767c\u73fe\u670b\u53cb\u7684\u4e0d\u826f\u884c\u70ba\u6642\uff0c\u6703\u52f8\u5176\u75db\u6539\u524d\u975e\u3002\",\n                \"\u7761\u89ba\u4e4b\u524d\uff0c\u8981\u5c07\u6240\u6709\u9580\u7a97and\u958b\u95dc\u6aa2\u67e5\u4e00\u904d\u3002\",\n                \"\u70ba\u4fdd\u6301\u8eab\u9ad4\u5065\u5eb7\u800c\u505a\u904b\u52d5\u548c\u935b\u934a\u3002\",\n                \"\u670b\u53cb\u805a\u6703\u4e4b\u5f8c\uff0c\u6703\u7559\u5fc3\u6536\u62fe\u6253\u6383\u6b98\u5c40\u3002\",\n                \"\u6703\u70ba\u4e86\u5065\u5eb7\u800c\u6539\u8b8a\u67d0\u4e9b\u55dc\u597d\u6216\u7fd2\u6163\u3002\",\n                \"\u80fd\u8a18\u4f4f\u91cd\u8981\u7684\u7d00\u5ff5\u65e5\u5b50\u3002\",\n                \"\u6703\u5c07\u6b63\u4e8b\u5217\u70ba\u512a\u5148\uff0c\u4e4b\u5f8c\u518d\u8003\u616e\u4f11\u9592\u6d3b\u52d5\u3002\",\n                \"\u5c07\u4e00\u4e9b\u6602\u8cb4\u7269\u4ef6\u7684\u5305\u88dd\u548c\u7968\u64da\u4fdd\u5b58\u5b8c\u597d\u3002\",\n                \"\u6536\u5230\u4ed6\u4eba\u7684\u8a0a\u606f\u6216\u90f5\u4ef6\u6703\u53ca\u6642\u56de\u8986\u3002\",\n                \"\u65e2\u7136\u6c7a\u5b9a\u505a\u4e00\u4ef6\u4e8b\u60c5\uff0c\u5c31\u4e00\u5b9a\u8981\u628a\u5b83\u505a\u5b8c\u505a\u597d\u3002\",\n                \"\u6bcf\u9022\u7d00\u5ff5\u65e5\u6216\u91cd\u8981\u7bc0\u65e5\uff0c\u4f60\u662f\u5426\u9810\u5148\u554f\u5019\u89aa\u53cb\uff1f\",\n                \"\u6709\u7d04\u5728\u5148\u7684\u4e8b\u60c5\u4e0d\u6703\u5931\u7d04\u3002\",\n                \"\u7d93\u5e38\u63d0\u524d\u5230\u9054\u642d\u4e58\u706b\u8eca\u548c\u98db\u6a5f\u3002\",\n                \"\u70ba\u672a\u4f86\u751f\u6d3b\u53ef\u80fd\u7684\u6539\u8b8a\u800c\u505a\u597d\u6e96\u5099\uff08\u5982\u5132\u84c4\u7b49\uff09\u3002\",\n                \"\u7121\u8ad6\u662f\u5c0f\u6642\u5019\u9084\u662f\u73fe\u5728\u90fd\u6703\u7d66\u5bb6\u4eba\u5e6b\u5fd9\u505a\u5bb6\u52d9\u3002\",\n                \"\u540c\u610f\u300c\u4e0d\u4e7e\u4e0d\u6de8\uff0c\u5403\u4e86\u6c92\u75c5\u300d\u9019\u7a2e\u8aaa\u6cd5\u3002\",\n                \"\u8a8d\u70ba\u4e0d\u5fc5\u8981\u592a\u8b1b\u7a76\u898f\u7bc4\uff0c\u8ffd\u6c42\u5b8c\u5584\u3002\",\n                \"\u7576\u5916\u51fa\u65c5\u884c\u6642\uff0c\u4f60\u662f\u5426\u4e1f\u4e09\u843d\u56db\u628a\u8981\u5e36\u7684\u6771\u897f\u5fd8\u5728\u5bb6\u4e2d\uff1f\",\n                \"\u51fa\u9580\u5728\u5916\u627e\u4e0d\u5230\u5783\u573e\u7b52\u6642\uff0c\u6703\u628a\u5783\u573e\u96a8\u624b\u6254\u6389\u3002\",\n                \"\u6703\u70ba\u4e86\u904a\u73a9\u800c\u62d6\u4ea4\u4f5c\u696d\u6216\u5ef6\u8aa4\u5de5\u4f5c\u3002\",\n                \"\u6703\u907a\u5931\u91cd\u8981\u7684\u6587\u4ef6\u3002\",\n                \"\u6703\u653e\u68c4\u53c3\u8207\u9078\u8209\u7684\u6b0a\u5229\u3002\",\n                \"\u6703\u4e1f\u5931\u9470\u5319\u3001\u624b\u9336\u6216\u92fc\u7b46\u4e4b\u985e\u7684\u96a8\u8eab\u7269\u54c1\u3002\",\n                \"\u70ba\u4e86\u4e0d\u640d\u5bb3\u81ea\u5df1\u7684\u5229\u76ca\u800c\u653e\u68c4\u67d0\u7a2e\u8cac\u4efb\u3002\",\n                \"\u6703\u4e0d\u7d93\u610f\u5fd8\u4e86\u8981\u5b8c\u6210\u7684\u4efb\u52d9\u3002\"\n            ];\n            \n            const options = [\"\u5f9e\u4e0d\", \"\u5f88\u5c11\", \"\u6709\u6642\", \"\u7d93\u5e38\", \"\u7e3d\u662f\"];\n            const reverseQuestions = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29]; \/\/ \u53cd\u5411\u984c\u76ee (0-indexed)\n            \n            \/\/ \u7dad\u5ea6\u5206\u914d (0-indexed)\n            const dimensions = {\n                self: [0, 1, 6, 7, 9, 10, 11, 12, 17, 18], \/\/ \u81ea\u6211\u7ba1\u7406\n                commitment: [2, 3, 13, 14, 15, 16, 20, 21], \/\/ \u627f\u8afe\u5c65\u884c\n                social: [5, 8, 19, 23, 26], \/\/ \u4eba\u969b\u8cac\u4efb\n                work: [4, 22, 24, 25, 27, 28, 29] \/\/ \u5de5\u4f5c\u8cac\u4efb\n            };\n            \n            \/\/ \u72c0\u614b\u7ba1\u7406\n            let currentQuestion = 0;\n            let answers = [];\n            let chart = null;\n            \n            \/\/ DOM \u5143\u7d20\n            const introPage = document.getElementById('resp-intro-page');\n            const testPage = document.getElementById('resp-test-page');\n            const resultPage = document.getElementById('resp-result-page');\n            \n            \/\/ \u521d\u59cb\u5316\n            const init = () => {\n                document.addEventListener('click', handleClick);\n                showPage('intro');\n            };\n            \n            \/\/ \u4e8b\u4ef6\u8655\u7406\n            const handleClick = (e) => {\n                const action = e.target.closest('[data-action]')?.dataset.action;\n                \n                switch (action) {\n                    case 'start-test':\n                        startTest();\n                        break;\n                    case 'restart-test':\n                        restartTest();\n                        break;\n                    case 'prev-question':\n                        goToPreviousQuestion();\n                        break;\n                    case 'select-option':\n                        selectOption(e.target);\n                        break;\n                }\n            };\n            \n            \/\/ \u9801\u9762\u5207\u63db\n            const showPage = (page) => {\n                const pages = [introPage, testPage, resultPage];\n                pages.forEach(p => p.classList.add('d-none'));\n                \n                switch (page) {\n                    case 'intro':\n                        introPage.classList.remove('d-none');\n                        break;\n                    case 'test':\n                        testPage.classList.remove('d-none');\n                        break;\n                    case 'result':\n                        resultPage.classList.remove('d-none');\n                        break;\n                }\n                \n                \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            };\n            \n            \/\/ \u958b\u59cb\u6e2c\u9a57\n            const startTest = () => {\n                currentQuestion = 0;\n                answers = [];\n                showPage('test');\n                displayQuestion();\n            };\n            \n            \/\/ \u91cd\u65b0\u6e2c\u9a57\n            const restartTest = () => {\n                if (chart) {\n                    chart.destroy();\n                    chart = null;\n                }\n                startTest();\n            };\n            \n            \/\/ \u986f\u793a\u984c\u76ee\n            const displayQuestion = () => {\n                const questionText = document.getElementById('resp-question-text');\n                const optionsContainer = document.getElementById('resp-options-container');\n                const progressText = document.getElementById('resp-progress-text');\n                const progressPercent = document.getElementById('resp-progress-percent');\n                const progressBar = document.getElementById('resp-progress-bar');\n                const prevBtn = document.getElementById('resp-prev-btn');\n                \n                \/\/ \u66f4\u65b0\u984c\u76ee\n                questionText.textContent = questions[currentQuestion];\n                \n                \/\/ \u66f4\u65b0\u9032\u5ea6\n                const progress = Math.round(((currentQuestion + 1) \/ questions.length) * 100);\n                progressText.textContent = `\u554f\u984c ${currentQuestion + 1} \/ ${questions.length}`;\n                progressPercent.textContent = `${progress}%`;\n                progressBar.style.width = `${progress}%`;\n                \n                \/\/ \u6e05\u7a7a\u9078\u9805\u5bb9\u5668\n                optionsContainer.innerHTML = '';\n                \n                \/\/ \u751f\u6210\u9078\u9805 - \u4f7f\u7528\u81ea\u5b9a\u4e49\u9009\u9879\u6846\n                options.forEach((option, index) => {\n                    const optionDiv = document.createElement('div');\n                    optionDiv.className = 'resp-option-item';\n                    optionDiv.innerHTML = `\n                        <div class=\"d-flex align-items-center\">\n                            <div class=\"form-check me-3\">\n                                <input class=\"form-check-input\" type=\"radio\" name=\"question-${currentQuestion}\" id=\"option-${index}\" ${answers[currentQuestion] === index ? 'checked' : ''}>\n                            <\/div>\n                            <label class=\"form-check-label flex-grow-1\" for=\"option-${index}\">\n                                ${option}\n                            <\/label>\n                        <\/div>\n                    `;\n                    optionDiv.dataset.action = 'select-option';\n                    optionDiv.dataset.value = index;\n                    \n                    \/\/ \u5982\u679c\u5df2\u6709\u7b54\u6848\uff0c\u986f\u793a\u9078\u4e2d\u72c0\u614b\n                    if (answers[currentQuestion] === index) {\n                        optionDiv.classList.add('selected');\n                    }\n                    \n                    optionsContainer.appendChild(optionDiv);\n                });\n                \n                \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u72c0\u614b\n                prevBtn.disabled = currentQuestion === 0;\n                \n                \/\/ \u6efe\u52d5\u5230\u6a19\u984c\n                document.querySelector('#resp-test-page h2').scrollIntoView({ \n                    behavior: 'smooth', \n                    block: 'start' \n                });\n            };\n            \n            \/\/ \u9078\u64c7\u9078\u9805\n            const selectOption = (element) => {\n                const optionDiv = element.closest('.resp-option-item');\n                const value = parseInt(optionDiv.dataset.value);\n                answers[currentQuestion] = value;\n                \n                \/\/ \u66f4\u65b0\u8996\u89ba\u72c0\u614b\n                const allOptions = optionDiv.parentElement.querySelectorAll('.resp-option-item');\n                allOptions.forEach(opt => {\n                    opt.classList.remove('selected');\n                    opt.querySelector('input').checked = false;\n                });\n                optionDiv.classList.add('selected');\n                optionDiv.querySelector('input').checked = true;\n                \n                \/\/ \u5ef6\u9072\u5f8c\u81ea\u52d5\u9032\u5165\u4e0b\u4e00\u984c\n                setTimeout(() => {\n                    if (currentQuestion < questions.length - 1) {\n                        currentQuestion++;\n                        displayQuestion();\n                    } else {\n                        calculateResult();\n                    }\n                }, 500);\n            };\n            \n            \/\/ \u4e0a\u4e00\u984c\n            const goToPreviousQuestion = () => {\n                if (currentQuestion > 0) {\n                    currentQuestion--;\n                    displayQuestion();\n                }\n            };\n            \n            \/\/ \u8a08\u7b97\u7d50\u679c\n            const calculateResult = () => {\n                const scores = {\n                    total: 0,\n                    self: 0,\n                    commitment: 0,\n                    social: 0,\n                    work: 0\n                };\n                \n                \/\/ \u8a08\u7b97\u7e3d\u5206\u548c\u5404\u7dad\u5ea6\u5206\u6578\n                answers.forEach((answer, index) => {\n                    let score;\n                    if (reverseQuestions.includes(index)) {\n                        score = 4 - answer; \/\/ \u53cd\u5411\u984c\u76ee\n                    } else {\n                        score = answer; \/\/ \u6b63\u5411\u984c\u76ee\n                    }\n                    \n                    scores.total += score;\n                    \n                    \/\/ \u8a08\u7b97\u7dad\u5ea6\u5206\u6578\n                    if (dimensions.self.includes(index)) scores.self += score;\n                    if (dimensions.commitment.includes(index)) scores.commitment += score;\n                    if (dimensions.social.includes(index)) scores.social += score;\n                    if (dimensions.work.includes(index)) scores.work += score;\n                });\n                \n                displayResult(scores);\n            };\n            \n            \/\/ \u986f\u793a\u7d50\u679c\n            const displayResult = (scores) => {\n                \/\/ \u8a08\u7b97\u767e\u5206\u6bd4\n                const maxScores = {\n                    self: dimensions.self.length * 4,\n                    commitment: dimensions.commitment.length * 4,\n                    social: dimensions.social.length * 4,\n                    work: dimensions.work.length * 4\n                };\n                \n                const percentages = {\n                    self: Math.round((scores.self \/ maxScores.self) * 100),\n                    commitment: Math.round((scores.commitment \/ maxScores.commitment) * 100),\n                    social: Math.round((scores.social \/ maxScores.social) * 100),\n                    work: Math.round((scores.work \/ maxScores.work) * 100)\n                };\n                \n                \/\/ \u66f4\u65b0\u7e3d\u5206\n                document.getElementById('resp-total-score').textContent = scores.total;\n                \n                \/\/ \u5224\u65b7\u7b49\u7d1a\u548c\u63cf\u8ff0\n                let level, description;\n                if (scores.total < 31) {\n                    level = \"\u9700\u8981\u52a0\u5f37\";\n                    description = \"\u60a8\u5728\u8cac\u4efb\u611f\u65b9\u9762\u9084\u6709\u5f88\u5927\u7684\u63d0\u5347\u7a7a\u9593\u3002\u60a8\u53ef\u80fd\u7d93\u5e38\u6703\u4e0d\u6309\u539f\u5247\u8fa6\u4e8b\u6216\u9003\u907f\u8cac\u4efb\uff0c\u5728\u8a31\u591a\u4e8b\u60c5\u4e0a\u9020\u6210\u5931\u8077\u3002\u5efa\u8b70\u60a8\u591a\u70ba\u5225\u4eba\u8457\u60f3\uff0c\u8981\u6709\u6562\u4f5c\u6562\u7576\u7684\u52c7\u6c23\uff0c\u900f\u904e\u4e0d\u65b7\u7df4\u7fd2\uff0c\u60a8\u6703\u6210\u70ba\u6709\u8cac\u4efb\u611f\u7684\u4eba\uff0c\u4e5f\u6703\u8d0f\u5f97\u5225\u4eba\u7684\u4fe1\u4efb\u3002\";\n                } else if (scores.total <= 80) {\n                    level = \"\u8868\u73fe\u826f\u597d\";\n                    description = \"\u5927\u591a\u6578\u60c5\u6cc1\u4e0b\u60a8\u90fd\u5f88\u6709\u8cac\u4efb\u611f\uff0c\u53ea\u662f\u5076\u723e\u6709\u4e9b\u4e0d\u5805\u6301\u539f\u5247\uff0c\u6709\u6642\u4e5f\u6703\u99ac\u864e\uff0c\u6c92\u6709\u8003\u616e\u5f97\u5f88\u5468\u5230\u3002\u7e3d\u800c\u8a00\u4e4b\uff0c\u60a8\u662f\u500b\u53ef\u4ee5\u4f9d\u8cf4\u7684\u4eba\u3002\u60a8\u7684\u8cac\u4efb\u611f\u6703\u4f7f\u60a8\u505a\u597d\u81ea\u5df1\u7684\u672c\u8077\u5de5\u4f5c\uff0c\u9069\u5408\u5f9e\u4e8b\u8fa6\u516c\u5ba4\u8077\u54e1\u7684\u5de5\u4f5c\uff0c\u7d93\u904e\u52aa\u529b\u4e5f\u53ef\u4ee5\u505a\u4e2d\u7d1a\u7684\u7ba1\u7406\u8005\u3002\";\n                } else {\n                    level = \"\u975e\u5e38\u512a\u79c0\";\n                    description = \"\u60a8\u884c\u4e8b\u8b39\u614e\u3001\u7d30\u5fc3\u3001\u53ef\u9760\uff0c\u70ba\u4eba\u8b19\u548c\uff0c\u4e26\u4e14\u76f8\u7576\u8aa0\u5be6\u3002\u60a8\u7684\u670b\u53cb\u6703\u89ba\u5f97\u60a8\u662f\u500b\u53ef\u4ee5\u4f9d\u8cf4\u3001\u53ef\u9760\u7684\u4eba\uff0c\u4ed6\u5011\u9858\u610f\u5c07\u5fc3\u88e1\u8a71\u544a\u8a34\u60a8\uff0c\u5728\u9047\u5230\u56f0\u96e3\u6642\uff0c\u4ed6\u5011\u5f80\u5f80\u60f3\u5230\u7684\u4e5f\u662f\u60a8\u3002\u60a8\u7684\u4eba\u969b\u95dc\u4fc2\u4e0d\u932f\uff0c\u9019\u8207\u60a8\u7684\u6027\u683c\u662f\u5206\u4e0d\u958b\u7684\u3002\u60a8\u9069\u5408\u5f9e\u4e8b\u4efb\u4f55\u5de5\u4f5c\uff0c\u505a\u4eba\u4e8b\u7ba1\u7406\u5de5\u4f5c\u662f\u60a8\u7684\u7279\u9577\u3002\";\n                }\n                \n                document.getElementById('resp-score-level').textContent = level;\n                document.getElementById('resp-result-description').textContent = description;\n                \n                \/\/ \u66f4\u65b0\u5404\u7dad\u5ea6\u5206\u6578\n                document.getElementById('resp-self-score').textContent = `${percentages.self}%`;\n                document.getElementById('resp-self-bar').style.width = `${percentages.self}%`;\n                \n                document.getElementById('resp-commitment-score').textContent = `${percentages.commitment}%`;\n                document.getElementById('resp-commitment-bar').style.width = `${percentages.commitment}%`;\n                \n                document.getElementById('resp-social-score').textContent = `${percentages.social}%`;\n                document.getElementById('resp-social-bar').style.width = `${percentages.social}%`;\n                \n                document.getElementById('resp-work-score').textContent = `${percentages.work}%`;\n                document.getElementById('resp-work-bar').style.width = `${percentages.work}%`;\n                \n                \/\/ \u5275\u5efa\u96f7\u9054\u5716\n                createRadarChart(percentages);\n                \n                showPage('result');\n            };\n            \n            \/\/ \u5275\u5efa\u96f7\u9054\u5716\n            const createRadarChart = (percentages) => {\n                const ctx = document.getElementById('resp-radar-chart').getContext('2d');\n                \n                if (chart) {\n                    chart.destroy();\n                }\n                \n                chart = new Chart(ctx, {\n                    type: 'radar',\n                    data: {\n                        labels: ['\u81ea\u6211\u7ba1\u7406', '\u627f\u8afe\u5c65\u884c', '\u4eba\u969b\u8cac\u4efb', '\u5de5\u4f5c\u8cac\u4efb'],\n                        datasets: [{\n                            label: '\u8cac\u4efb\u611f\u6307\u6578',\n                            data: [\n                                percentages.self,\n                                percentages.commitment,\n                                percentages.social,\n                                percentages.work\n                            ],\n                            backgroundColor: 'rgba(13, 110, 253, 0.2)',\n                            borderColor: 'rgba(13, 110, 253, 1)',\n                            borderWidth: 3,\n                            pointBackgroundColor: 'rgba(13, 110, 253, 1)',\n                            pointBorderColor: '#fff',\n                            pointBorderWidth: 2,\n                            pointRadius: 6\n                        }]\n                    },\n                    options: {\n                        responsive: true,\n                        maintainAspectRatio: true,\n                        plugins: {\n                            legend: {\n                                display: false\n                            }\n                        },\n                        scales: {\n                            r: {\n                                beginAtZero: true,\n                                max: 100,\n                                ticks: {\n                                    stepSize: 20,\n                                    font: {\n                                        size: 12\n                                    }\n                                },\n                                pointLabels: {\n                                    font: {\n                                        size: 14,\n                                        weight: 'bold'\n                                    }\n                                },\n                                grid: {\n                                    color: 'rgba(0, 0, 0, 0.1)'\n                                },\n                                angleLines: {\n                                    color: 'rgba(0, 0, 0, 0.1)'\n                                }\n                            }\n                        },\n                        animation: {\n                            duration: 2000,\n                            easing: 'easeOutQuart'\n                        }\n                    }\n                });\n            };\n            \n            \/\/ \u5c0e\u51faPDF\u529f\u80fd\n            window.exportToPDF = async () => {\n                try {\n                    \/\/ \u986f\u793a\u8f09\u5165\u63d0\u793a\n                    const exportBtn = document.querySelector('[onclick=\"exportToPDF()\"]');\n                    const originalText = exportBtn.innerHTML;\n                    exportBtn.innerHTML = '<i class=\"bi bi-arrow-repeat me-2\"><\/i>\u751f\u6210\u4e2d...';\n                    exportBtn.disabled = true;\n                    \n                    \/\/ \u7372\u53d6\u7d50\u679c\u9801\u9762\u5143\u7d20\n                    const resultElement = document.getElementById('resp-result-page');\n                    \n                    \/\/ \u66ab\u6642\u96b1\u85cf\u6309\u9215\u7d44\u4ee5\u514d\u51fa\u73fe\u5728PDF\u4e2d\n                    const btnGroup = resultElement.querySelector('.btn-group');\n                    btnGroup.style.display = 'none';\n                    \n                    \/\/ \u66ab\u6642\u8abf\u6574\u9801\u9762\u6a23\u5f0f\u4ee5\u512a\u5316PDF\u8f38\u51fa\n                    const originalStyle = resultElement.style.cssText;\n                    resultElement.style.backgroundColor = '#ffffff';\n                    resultElement.style.padding = '30px';\n                    resultElement.style.minHeight = 'auto';\n                    \n                    \/\/ \u8abf\u6574\u5bb9\u5668\u5bec\u5ea6\u4ee5\u9069\u61c9PDF - \u5f37\u5236\u5360\u6eff\u5bec\u5ea6\n                    const container = resultElement.querySelector('.container');\n                    const originalContainerStyle = container.style.cssText;\n                    container.style.maxWidth = '100%';\n                    container.style.width = '100%';\n                    container.style.padding = '0 20px';\n                    \n                    \/\/ \u5f37\u5236\u8abf\u6574\u6240\u6709\u5217\u5bec\u5ea6\n                    const rows = container.querySelectorAll('.row');\n                    rows.forEach(row => {\n                        row.style.margin = '0';\n                        const cols = row.querySelectorAll('[class*=\"col-\"]');\n                        cols.forEach(col => {\n                            col.style.padding = '0 10px';\n                        });\n                    });\n                    \n                    \/\/ \u4f7f\u7528html2canvas\u622a\u53d6\u9801\u9762\uff0c\u63d0\u9ad8\u89e3\u6790\u5ea6\u548c\u8cea\u91cf\n                    const canvas = await html2canvas(resultElement, {\n                        scale: 2.5, \/\/ \u9069\u4e2d\u7684\u89e3\u6790\u5ea6\n                        useCORS: true,\n                        allowTaint: true,\n                        backgroundColor: '#ffffff',\n                        width: 1400, \/\/ \u5f37\u5236\u66f4\u5bec\u7684\u622a\u5716\u5bec\u5ea6\n                        height: resultElement.scrollHeight,\n                        scrollX: 0,\n                        scrollY: 0,\n                        windowWidth: 1400,\n                        windowHeight: resultElement.scrollHeight + 100\n                    });\n                    \n                    \/\/ \u6062\u5fa9\u539f\u59cb\u6a23\u5f0f\n                    resultElement.style.cssText = originalStyle;\n                    container.style.cssText = originalContainerStyle;\n                    rows.forEach(row => {\n                        row.style.margin = '';\n                        const cols = row.querySelectorAll('[class*=\"col-\"]');\n                        cols.forEach(col => {\n                            col.style.padding = '';\n                        });\n                    });\n                    btnGroup.style.display = '';\n                    \n                    \/\/ \u5275\u5efaPDF - A4\u5c3a\u5bf8 (210 x 297 mm)\n                    const { jsPDF } = window.jspdf;\n                    const pdf = new jsPDF({\n                        orientation: 'portrait',\n                        unit: 'mm',\n                        format: 'a4'\n                    });\n                    \n                    \/\/ A4\u9801\u9762\u5c3a\u5bf8\n                    const pageWidth = pdf.internal.pageSize.getWidth(); \/\/ 210mm\n                    const pageHeight = pdf.internal.pageSize.getHeight(); \/\/ 297mm\n                    \n                    \/\/ \u8a2d\u7f6e\u66f4\u5c0f\u7684\u9801\u908a\u8ddd\uff0c\u8b93\u5167\u5bb9\u5360\u64da\u66f4\u5927\u7a7a\u9593\n                    const marginLeft = 8; \/\/ \u5de6\u908a\u8ddd 8mm\n                    const marginRight = 8; \/\/ \u53f3\u908a\u8ddd 8mm  \n                    const marginTop = 12; \/\/ \u4e0a\u908a\u8ddd 12mm\n                    const marginBottom = 20; \/\/ \u4e0b\u908a\u8ddd 20mm\uff08\u7d66\u6c34\u5370\u7559\u7a7a\u9593\uff09\n                    \n                    \/\/ \u53ef\u7528\u5167\u5bb9\u5340\u57df - \u66f4\u5927\u7684\u5bec\u5ea6\n                    const contentWidth = pageWidth - marginLeft - marginRight; \/\/ 194mm\n                    const contentHeight = pageHeight - marginTop - marginBottom; \/\/ 265mm\n                    \n                    \/\/ \u5f37\u5236\u8b93\u5716\u7247\u5360\u64da\u6700\u5927\u5bec\u5ea6\n                    const imgWidth = contentWidth; \/\/ \u4f7f\u7528\u5168\u90e8\u53ef\u7528\u5bec\u5ea6\n                    const imgHeight = (canvas.height * imgWidth) \/ canvas.width;\n                    \n                    \/\/ \u6dfb\u52a0\u6c34\u5370\u51fd\u6578\n                    const addWatermark = (pdf, pageNum, totalPages) => {\n                        \/\/ \u8a2d\u7f6e\u6c34\u5370\u6587\u5b57\u6a23\u5f0f\n                        pdf.setFontSize(10);\n                        pdf.setTextColor(150, 150, 150); \/\/ \u6dfa\u7070\u8272\n                        \n                        \/\/ \u5e95\u90e8\u4e2d\u592e\u6c34\u5370\n                        pdf.text(\n                            'https:\/\/ceshi.org', \n                            pageWidth \/ 2, \n                            pageHeight - 8, \n                            { align: 'center' }\n                        );\n                        \n                        \/\/ \u9801\u78bc\uff08\u5982\u679c\u662f\u591a\u9801\uff09\n                        if (totalPages > 1) {\n                            pdf.text(\n                                `${pageNum} \/ ${totalPages}`, \n                                pageWidth - marginRight, \n                                pageHeight - 8, \n                                { align: 'right' }\n                            );\n                        }\n                        \n                        \/\/ \u6dfb\u52a0\u900f\u660e\u6c34\u5370\u5728\u9801\u9762\u4e2d\u592e\n                        pdf.setFontSize(45);\n                        pdf.setTextColor(240, 240, 240); \/\/ \u975e\u5e38\u6dfa\u7684\u7070\u8272\n                        pdf.saveGraphicsState();\n                        pdf.setGState(new pdf.GState({opacity: 0.1})); \/\/ \u8a2d\u7f6e\u900f\u660e\u5ea6\n                        \n                        \/\/ \u65cb\u8f6c45\u5ea6\u6dfb\u52a0\u4e2d\u592e\u6c34\u5370\n                        const centerX = pageWidth \/ 2;\n                        const centerY = pageHeight \/ 2;\n                        pdf.text('ceshi.org', centerX, centerY, {\n                            angle: 45,\n                            align: 'center'\n                        });\n                        \n                        pdf.restoreGraphicsState();\n                    };\n                    \n                    \/\/ \u5c45\u4e2d\u8a08\u7b97\n                    const xOffset = marginLeft;\n                    const yOffset = marginTop;\n                    \n                    \/\/ \u5982\u679c\u5167\u5bb9\u9069\u5408\u55ae\u9801\n                    if (imgHeight <= contentHeight) {\n                        \/\/ \u6dfb\u52a0\u5716\u7247\n                        pdf.addImage(\n                            canvas.toDataURL('image\/png', 1.0), \n                            'PNG', \n                            xOffset, \n                            yOffset, \n                            imgWidth, \n                            imgHeight,\n                            '', \/\/ alias\n                            'FAST' \/\/ compression\n                        );\n                        \n                        \/\/ \u6dfb\u52a0\u6c34\u5370\n                        addWatermark(pdf, 1, 1);\n                        \n                    } else {\n                        \/\/ \u591a\u9801\u8655\u7406\n                        let remainingHeight = imgHeight;\n                        let sourceY = 0;\n                        let pageNumber = 0;\n                        \n                        \/\/ \u8a08\u7b97\u7e3d\u9801\u6578\n                        const totalPages = Math.ceil(imgHeight \/ contentHeight);\n                        \n                        while (remainingHeight > 0) {\n                            if (pageNumber > 0) {\n                                pdf.addPage();\n                            }\n                            \n                            pageNumber++;\n                            const currentPageHeight = Math.min(remainingHeight, contentHeight);\n                            const sourceHeight = (currentPageHeight \/ imgHeight) * canvas.height;\n                            \n                            \/\/ \u5275\u5efa\u81e8\u6642canvas\u4f86\u88c1\u5207\u5716\u7247\n                            const tempCanvas = document.createElement('canvas');\n                            const tempCtx = tempCanvas.getContext('2d');\n                            tempCanvas.width = canvas.width;\n                            tempCanvas.height = sourceHeight;\n                            \n                            tempCtx.drawImage(\n                                canvas, \n                                0, sourceY, canvas.width, sourceHeight,\n                                0, 0, canvas.width, sourceHeight\n                            );\n                            \n                            \/\/ \u6dfb\u52a0\u5716\u7247\u5230\u7576\u524d\u9801\n                            pdf.addImage(\n                                tempCanvas.toDataURL('image\/png', 1.0), \n                                'PNG', \n                                xOffset, \n                                marginTop, \n                                imgWidth, \n                                currentPageHeight,\n                                '', \/\/ alias\n                                'FAST' \/\/ compression\n                            );\n                            \n                            \/\/ \u6dfb\u52a0\u6c34\u5370\u5230\u7576\u524d\u9801\n                            addWatermark(pdf, pageNumber, totalPages);\n                            \n                            remainingHeight -= currentPageHeight;\n                            sourceY += sourceHeight;\n                        }\n                    }\n                    \n                    \/\/ \u4fdd\u5b58PDF\n                    const now = new Date();\n                    const timestamp = now.toISOString().slice(0, 19).replace(\/[-:]\/g, '').replace('T', '_');\n                    pdf.save(`\u8cac\u4efb\u611f\u6e2c\u9a57\u7d50\u679c_${timestamp}.pdf`);\n                    \n                    \/\/ \u6062\u5fa9\u6309\u9215\u72c0\u614b\n                    exportBtn.innerHTML = originalText;\n                    exportBtn.disabled = false;\n                    \n                } catch (error) {\n                    console.error('PDF\u5c0e\u51fa\u5931\u6557:', error);\n                    alert('PDF\u5c0e\u51fa\u5931\u6557\uff0c\u8acb\u7a0d\u5f8c\u518d\u8a66');\n                    \n                    \/\/ \u6062\u5fa9\u6309\u9215\u72c0\u614b\n                    const exportBtn = document.querySelector('[onclick=\"exportToPDF()\"]');\n                    exportBtn.innerHTML = '<i class=\"bi bi-file-earmark-pdf me-2\"><\/i>\u5c0e\u51faPDF';\n                    exportBtn.disabled = false;\n                }\n            };\n            \n            \/\/ \u555f\u52d5\u61c9\u7528\n            init();\n        })();\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u8d23\u4efb\u611f\u662f\u4e00\u79cd\u610f\u5fd7\u54c1\u8d28\uff0c\u5b83\u4e0e\u4eba\u4eec\u957f\u671f\u4ee5\u6765\u5f62\u6210\u7684\u751f\u6d3b\u6001\u5ea6\u548c\u751f\u6d3b\u4e60\u60ef\u5bc6\u5207\u76f8\u5173\u3002\u672c\u6d4b\u8bd5\u517130\u9898\uff0c\u8bf7\u4ed4\u7ec6\u9605\u8bfb\u6bcf\u4e00\u9898\uff0c\u628a\u610f\u601d\u5f04\u660e\u767d\uff0c\u7136\u540e\u6839\u636e\u4f60\u7684\u5b9e\u9645\u60c5\u51b5\uff0c\u5224\u65ad\u6bcf\u4e2a\u63cf\u8ff0\u4e8e\u4f60\u7684\u5951\u5408\u7a0b\u5ea6\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[167,160],"tags":[230],"class_list":["post-2755","post","type-post","status-publish","format-standard","hentry","category-personality","category-attitude-scales","tag-responsibility"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=2755"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2755\/revisions"}],"predecessor-version":[{"id":10121,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2755\/revisions\/10121"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}