{"id":1785,"date":"2025-11-27T10:02:36","date_gmt":"2025-11-27T02:02:36","guid":{"rendered":"https:\/\/www.funpt.cn\/?p=1785"},"modified":"2025-11-27T10:13:43","modified_gmt":"2025-11-27T02:13:43","slug":"%e7%ba%a4%e7%bb%b4%e6%80%a7%e8%82%8c%e7%97%9b%ef%bc%88fms%ef%bc%89%e7%9a%84%e4%b8%b4%e5%ba%8a%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/www.funpt.cn\/?p=1785","title":{"rendered":"\u7ea4\u7ef4\u6027\u808c\u75db\uff08FMS\uff09\u7684\u4e34\u5e8a\u6307\u5357"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u7ea4\u7ef4\u808c\u75db\u7efc\u5408\u5f81 (FMS) \u6df1\u5ea6\u4e92\u52a8\u6307\u5357<\/title>\r\n \r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- Chart.js -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <!-- Plotly.js -->\r\n <script src=\"https:\/\/cdn.plot.ly\/plotly-2.24.1.min.js\"><\/script>\r\n\r\n <!-- Google Fonts (Noto Sans SC) -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <!-- Chosen Palette: Calm Harmony -->\r\n <!-- Background: Warm Neutral (Stone-50) -->\r\n <!-- Primary: Sage\/Teal (Teal-700) for headers and interactive elements -->\r\n <!-- Secondary: Warm Grey (Stone-600) for body text -->\r\n <!-- Accent: Muted Coral (Rose-400) for pain points and alerts -->\r\n <!-- Rationale: A medical condition characterized by sensory amplification requires a soothing, low-contrast interface that reduces visual stress while maintaining readability. -->\r\n\r\n <style>\r\n body {\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #fafaf9; \/* stone-50 *\/\r\n color: #44403c; \/* stone-700 *\/\r\n }\r\n\r\n \/* Chart Container Styling - MANDATORY *\/\r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 800px; \/* Max width to prevent excessive stretching *\/\r\n margin-left: auto;\r\n margin-right: auto;\r\n height: 350px; \/* Base height *\/\r\n max-height: 400px;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .chart-container {\r\n height: 400px;\r\n }\r\n }\r\n\r\n \/* Custom Scrollbar for side panels *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #f1f1f4; \r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #cbd5e1; \r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8; \r\n }\r\n\r\n .nav-item.active {\r\n border-bottom: 3px solid #0f766e; \/* teal-700 *\/\r\n color: #0f766e;\r\n font-weight: 700;\r\n }\r\n\r\n .tab-btn.active {\r\n background-color: #0f766e;\r\n color: white;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.5s ease-in-out;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n <\/style>\r\n\r\n <!-- Application Structure Plan: \r\n The app is designed as a \"Clinical Dashboard\" rather than a linear document.\r\n 1. Header\/Nav: Persistent navigation allows non-linear exploration.\r\n 2. Section \"Insight\" (Definition\/Symptoms): Uses a Radar chart to visualize the multi-dimensional burden of disease (Pain, Sleep, Fatigue).\r\n 3. Section \"Diagnosis Lab\" (Criteria): An interactive checklist comparing 1990 vs 2016 criteria. This engages the user to understand the complexity of diagnosis.\r\n 4. Section \"Treatment Path\" (Management): A split view between Pharmacological and Non-Pharmacological approaches, emphasizing the holistic model.\r\n 5. Section \"Rehab Planner\" (Physical Therapy): A progressive chart showing the \"Start Low, Go Slow\" principle visually.\r\n Rationale: Breaking complex medical text into interactive modules helps reduce cognitive load, essential for understanding a condition involving \"brain fog\".\r\n -->\r\n\r\n <!-- Visualization & Content Choices:\r\n 1. Symptom Radar Chart (Chart.js): \r\n - Goal: Show that FMS is not just pain.\r\n - Interaction: Hover to see symptom details.\r\n - Justification: Radar charts are excellent for multivariate profiles.\r\n 2. Diagnosis Simulator (HTML\/JS Logic):\r\n - Goal: Demystify the \"11\/18 tender points\" vs \"WPI\/SSS\" criteria.\r\n - Interaction: Checkboxes trigger real-time diagnosis status.\r\n - Justification: Active participation aids memory retention better than reading a list.\r\n 3. Treatment Hierarchy (HTML\/CSS Cards):\r\n - Goal: Categorize drugs (First vs Second line).\r\n - Interaction: Tab switching.\r\n - Justification: Clean hierarchy without complex graphs.\r\n 4. Exercise Progression (Plotly.js):\r\n - Goal: Visualize the \"Graded Exercise\" concept.\r\n - Interaction: Hover over time points to see frequency\/intensity.\r\n - Justification: Line\/Bar combination shows two variables (duration + intensity) increasing over time.\r\n -->\r\n \r\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\r\n<\/head>\r\n<body class=\"flex flex-col min-h-screen\">\r\n\r\n <!-- Navigation -->\r\n <nav class=\"bg-white shadow-sm sticky top-0 z-50\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between h-16\">\r\n <div class=\"flex items-center\">\r\n <span class=\"text-2xl font-bold text-teal-800\">FMS \u7ea4\u7ef4\u808c\u75db\u6307\u5357<\/span>\r\n <\/div>\r\n <div class=\"hidden md:flex space-x-8 items-center\">\r\n <button onclick=\"navTo('overview')\" class=\"nav-item active px-3 py-2 text-sm font-medium text-stone-500 hover:text-teal-700 transition\" id=\"nav-overview\">\u5168\u8c8c\u4e0e\u75c7\u72b6<\/button>\r\n <button onclick=\"navTo('diagnosis')\" class=\"nav-item px-3 py-2 text-sm font-medium text-stone-500 hover:text-teal-700 transition\" id=\"nav-diagnosis\">\u8bca\u65ad\u6807\u51c6<\/button>\r\n <button onclick=\"navTo('treatment')\" class=\"nav-item px-3 py-2 text-sm font-medium text-stone-500 hover:text-teal-700 transition\" id=\"nav-treatment\">\u6cbb\u7597\u7b56\u7565<\/button>\r\n <button onclick=\"navTo('rehab')\" class=\"nav-item px-3 py-2 text-sm font-medium text-stone-500 hover:text-teal-700 transition\" id=\"nav-rehab\">\u5eb7\u590d\u65b9\u6848<\/button>\r\n <\/div>\r\n <!-- Mobile menu button placeholder (functional via simple JS if needed, but keeping simple for SPA) -->\r\n <div class=\"flex items-center md:hidden\">\r\n <span class=\"text-xs text-stone-400\">\u8bf7\u4f7f\u7528\u5927\u5c4f\u5e55\u4ee5\u83b7\u5f97\u6700\u4f73\u4f53\u9a8c<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Mobile Nav Bar (Simplified) -->\r\n <div class=\"md:hidden flex justify-around bg-stone-100 py-2 border-t border-stone-200\">\r\n <button onclick=\"navTo('overview')\" class=\"text-xs p-1 text-teal-800 font-bold\">\u5168\u8c8c<\/button>\r\n <button onclick=\"navTo('diagnosis')\" class=\"text-xs p-1 text-stone-600\">\u8bca\u65ad<\/button>\r\n <button onclick=\"navTo('treatment')\" class=\"text-xs p-1 text-stone-600\">\u6cbb\u7597<\/button>\r\n <button onclick=\"navTo('rehab')\" class=\"text-xs p-1 text-stone-600\">\u5eb7\u590d<\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Main Content Area -->\r\n <main class=\"flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full\">\r\n\r\n <!-- SECTION 1: OVERVIEW & SYMPTOMS -->\r\n <section id=\"overview\" class=\"section-content fade-in space-y-8\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-10\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-teal-900 mb-4\">\u7406\u89e3\u7ea4\u7ef4\u808c\u75db\u7efc\u5408\u5f81 (FMS)<\/h1>\r\n <p class=\"text-lg text-stone-600\">\r\n \u4e00\u79cd\u4ee5<strong>\u6162\u6027\u5e7f\u6cdb\u6027\u808c\u8089\u9aa8\u9abc\u75bc\u75db<\/strong>\u4e3a\u6838\u5fc3\uff0c\u4f34\u968f\u75b2\u52b3\u3001\u7761\u7720\u969c\u788d\u53ca\u8ba4\u77e5\u56f0\u96be\u7684\u590d\u6742\u75be\u75c5\u3002\u672c\u8d28\u662f\u4e2d\u67a2\u795e\u7ecf\u7cfb\u7edf\u7684\u75bc\u75db\u4fe1\u53f7\u5904\u7406\u5f02\u5e38\uff08\u4e2d\u67a2\u654f\u5316\uff09\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Core Triad Cards -->\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-12\">\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border-t-4 border-rose-400 hover:shadow-md transition\">\r\n <div class=\"text-rose-500 text-3xl mb-3\">\u26a1<\/div>\r\n <h3 class=\"text-xl font-semibold text-stone-800 mb-2\">\u5e7f\u6cdb\u6027\u75bc\u75db<\/h3>\r\n <p class=\"text-stone-600 text-sm\">\u6301\u7eed\u8d85\u8fc73\u4e2a\u6708\u7684\u5168\u8eab\u6027\u949d\u75db\u3001\u9178\u75db\u6216\u707c\u70ed\u611f\u3002\u5fc5\u987b\u6d89\u53ca\u8eab\u4f53\u4e24\u4fa7\u53ca\u8170\u90e8\u4e0a\u4e0b\u3002<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border-t-4 border-amber-400 hover:shadow-md transition\">\r\n <div class=\"text-amber-500 text-3xl mb-3\">\ud83d\udca4<\/div>\r\n <h3 class=\"text-xl font-semibold text-stone-800 mb-2\">\u75b2\u52b3\u4e0e\u7761\u7720<\/h3>\r\n <p class=\"text-stone-600 text-sm\">\u9192\u540e\u65e0\u6062\u590d\u611f\uff08Restless Sleep\uff09\u3002\u5e38\u4f34\u6709\u4e0d\u5b81\u817f\u7efc\u5408\u5f81\u6216\u547c\u5438\u6682\u505c\u3002<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border-t-4 border-indigo-400 hover:shadow-md transition\">\r\n <div class=\"text-indigo-500 text-3xl mb-3\">\ud83e\udde0<\/div>\r\n <h3 class=\"text-xl font-semibold text-stone-800 mb-2\">\u8ba4\u77e5\u969c\u788d<\/h3>\r\n <p class=\"text-stone-600 text-sm\">\u4fd7\u79f0\u201c\u7ea4\u7ef4\u96fe\u201d(Fibro Fog)\u3002\u8868\u73b0\u4e3a\u6ce8\u610f\u529b\u96be\u4ee5\u96c6\u4e2d\u3001\u8bb0\u5fc6\u529b\u4e0b\u964d\u53ca\u8111\u529b\u6d3b\u52a8\u56f0\u96be\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <!-- Text Content -->\r\n <div class=\"space-y-6\">\r\n <div class=\"bg-stone-100 p-5 rounded-lg border-l-4 border-teal-600\">\r\n <h3 class=\"font-bold text-teal-800 mb-2\">\u5206\u7c7b\u4e0e\u75c5\u56e0<\/h3>\r\n <p class=\"text-sm text-stone-700 mb-2\"><strong>\u539f\u53d1\u6027\uff1a<\/strong> \u65e0\u660e\u786e\u8bf1\u56e0\uff0c\u72ec\u7acb\u53d1\u751f\u3002<\/p>\r\n <p class=\"text-sm text-stone-700\"><strong>\u7ee7\u53d1\u6027\uff1a<\/strong> \u7ee7\u53d1\u4e8e\u7c7b\u98ce\u6e7f\u5173\u8282\u708e(RA)\u3001\u7cfb\u7edf\u6027\u7ea2\u6591\u72fc\u75ae(SLE)\u6216\u611f\u67d3\u3001\u521b\u4f24\u4e4b\u540e\u3002<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 class=\"font-bold text-stone-800 mb-3 text-lg\">\u5176\u4ed6\u4f34\u968f\u75c7\u72b6<\/h3>\r\n <div class=\"flex flex-wrap gap-2\">\r\n <span class=\"px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600\">\u6668\u50f5 <60\u5206\u949f<\/span>\r\n <span class=\"px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600\">\u7d27\u5f20\u6027\u5934\u75db<\/span>\r\n <span class=\"px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600\">\u80a0\u6613\u6fc0\u7efc\u5408\u5f81 (IBS)<\/span>\r\n <span class=\"px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600\">\u5bd2\u51b7\u654f\u611f<\/span>\r\n <span class=\"px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600\">\u611f\u89c9\u5f02\u5e38 (\u523a\u75db)<\/span>\r\n <span class=\"px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600\">\u8180\u80f1\u6613\u6fc0\u60f9<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Visualization: Symptom Spectrum -->\r\n <div class=\"bg-white p-4 rounded-xl shadow-sm\">\r\n <h4 class=\"text-center text-sm font-bold text-stone-500 mb-2\">\u75c7\u72b6\u591a\u7ef4\u8d1f\u8377\u56fe<\/h4>\r\n <div class=\"chart-container\">\r\n <canvas id=\"symptomRadarChart\"><\/canvas>\r\n <\/div>\r\n <p class=\"text-center text-xs text-stone-400 mt-2\">\u4e0d\u4ec5\u662f\u75bc\u75db\uff0cFMS \u5f71\u54cd\u751f\u6d3b\u7684\u591a\u4e2a\u7ef4\u5ea6<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 2: DIAGNOSIS -->\r\n <section id=\"diagnosis\" class=\"section-content hidden fade-in\">\r\n <div class=\"mb-8\">\r\n <h2 class=\"text-3xl font-bold text-teal-900 mb-3\">\u8bca\u65ad\u4e0e\u9274\u522b<\/h2>\r\n <p class=\"text-stone-600\">\u8bca\u65ad FMS \u4e3b\u8981\u4f9d\u9760\u4e34\u5e8a\u8868\u73b0\u3002\u76ee\u524d\u4e34\u5e8a\u4e3b\u8981\u4f9d\u636e\u7f8e\u56fd\u98ce\u6e7f\u75c5\u5b66\u4f1a (ACR) \u53d1\u5e03\u7684\u6807\u51c6\u3002\u8fd9\u662f\u4e00\u4e2a\u6392\u9664\u6027\u8bca\u65ad\uff0c\u9700\u6392\u9664\u7532\u51cf\u3001\u708e\u75c7\u6027\u98ce\u6e7f\u75c5\u7b49\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <!-- Interactive Diagnosis Tool -->\r\n <div class=\"lg:col-span-2 bg-white rounded-xl shadow-sm border border-stone-200 overflow-hidden\">\r\n <div class=\"bg-teal-700 p-4 flex justify-between items-center\">\r\n <h3 class=\"text-white font-bold\">\u4ea4\u4e92\u5f0f\u8bca\u65ad\u6807\u51c6\u6bd4\u8f83<\/h3>\r\n <div class=\"text-teal-100 text-xs\">\u5c1d\u8bd5\u52fe\u9009\u6761\u4ef6<\/div>\r\n <\/div>\r\n \r\n <div class=\"p-6 grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <!-- 1990 Criteria -->\r\n <div class=\"space-y-4\">\r\n <h4 class=\"font-bold text-stone-700 border-b pb-2\">1990\u5e74 ACR \u6807\u51c6 (\u65e7)<\/h4>\r\n <p class=\"text-xs text-stone-500 mb-2\">\u4fa7\u91cd\u4e8e\u673a\u68b0\u6027\u538b\u75db\u70b9\u3002<\/p>\r\n \r\n <label class=\"flex items-start space-x-3 cursor-pointer hover:bg-stone-50 p-2 rounded\">\r\n <input type=\"checkbox\" id=\"crit-1990-pain\" class=\"mt-1 w-4 h-4 text-teal-600 rounded focus:ring-teal-500\" onchange=\"checkDiagnosis()\">\r\n <span class=\"text-sm text-stone-700\">\u5168\u8eab\u6027\u75bc\u75db\u6301\u7eed > 3\u4e2a\u6708 (\u8eab\u4f53\u4e24\u4fa7 + \u8170\u90e8\u4e0a\u4e0b + \u4e2d\u8f74)<\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-start space-x-3 cursor-pointer hover:bg-stone-50 p-2 rounded\">\r\n <input type=\"checkbox\" id=\"crit-1990-points\" class=\"mt-1 w-4 h-4 text-teal-600 rounded focus:ring-teal-500\" onchange=\"checkDiagnosis()\">\r\n <span class=\"text-sm text-stone-700\">18\u4e2a\u7279\u5b9a\u538b\u75db\u70b9\u4e2d\u81f3\u5c11 11\u4e2a \u75bc\u75db<\/span>\r\n <\/label>\r\n\r\n <div id=\"result-1990\" class=\"mt-4 p-3 bg-stone-100 text-stone-500 text-center rounded text-sm font-bold transition-colors\">\r\n \u672a\u6ee1\u8db3 1990 \u6807\u51c6\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2016 Criteria -->\r\n <div class=\"space-y-4 border-l-0 md:border-l border-stone-100 pl-0 md:pl-6\">\r\n <h4 class=\"font-bold text-stone-700 border-b pb-2\">2016\u5e74 ACR \u6807\u51c6 (\u65b0)<\/h4>\r\n <p class=\"text-xs text-stone-500 mb-2\">\u4fa7\u91cd\u75c7\u72b6\u5e7f\u5ea6\u4e0e\u4e25\u91cd\u5ea6\uff0c\u65e0\u9700\u6309\u538b\u68c0\u67e5\u3002<\/p>\r\n \r\n <div class=\"space-y-2\">\r\n <label class=\"flex items-center justify-between text-sm text-stone-700\">\r\n <span>\u5e7f\u6cdb\u75bc\u75db\u6307\u6570 (WPI 0-19):<\/span>\r\n <input type=\"number\" id=\"val-wpi\" min=\"0\" max=\"19\" class=\"w-16 p-1 border rounded text-center\" placeholder=\"0\" oninput=\"checkDiagnosis()\">\r\n <\/label>\r\n <label class=\"flex items-center justify-between text-sm text-stone-700\">\r\n <span>\u75c7\u72b6\u4e25\u91cd\u5ea6 (SSS 0-12):<\/span>\r\n <input type=\"number\" id=\"val-sss\" min=\"0\" max=\"12\" class=\"w-16 p-1 border rounded text-center\" placeholder=\"0\" oninput=\"checkDiagnosis()\">\r\n <\/label>\r\n <\/div>\r\n\r\n <label class=\"flex items-start space-x-3 cursor-pointer hover:bg-stone-50 p-2 rounded\">\r\n <input type=\"checkbox\" id=\"crit-2016-regions\" class=\"mt-1 w-4 h-4 text-teal-600 rounded focus:ring-teal-500\" onchange=\"checkDiagnosis()\">\r\n <span class=\"text-sm text-stone-700\">\u75bc\u75db\u6d89\u53ca5\u4e2a\u533a\u57df\u4e2d\u7684\u81f3\u5c114\u4e2a<\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-start space-x-3 cursor-pointer hover:bg-stone-50 p-2 rounded\">\r\n <input type=\"checkbox\" id=\"crit-2016-duration\" class=\"mt-1 w-4 h-4 text-teal-600 rounded focus:ring-teal-500\" onchange=\"checkDiagnosis()\">\r\n <span class=\"text-sm text-stone-700\">\u75c7\u72b6\u6301\u7eed\u76f8\u540c\u6c34\u5e73 > 3\u4e2a\u6708<\/span>\r\n <\/label>\r\n\r\n <div id=\"result-2016\" class=\"mt-4 p-3 bg-stone-100 text-stone-500 text-center rounded text-sm font-bold transition-colors\">\r\n \u672a\u6ee1\u8db3 2016 \u6807\u51c6\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Differential Diagnosis -->\r\n <div class=\"bg-stone-50 p-6 rounded-xl border border-stone-200\">\r\n <h3 class=\"font-bold text-teal-800 mb-4 flex items-center\">\r\n <span class=\"mr-2 text-xl\">\ud83d\udd0d<\/span> \u9700\u9274\u522b\u7684\u75be\u75c5\r\n <\/h3>\r\n <ul class=\"space-y-3 text-sm text-stone-600\">\r\n <li class=\"flex items-start\">\r\n <span class=\"text-rose-500 mr-2\">\u2022<\/span>\r\n <span><strong>\u708e\u75c7\u6027\u98ce\u6e7f\u75c5\uff1a<\/strong> \u5982\u7c7b\u98ce\u6e7f\u5173\u8282\u708e\u3001\u7ea2\u6591\u72fc\u75ae\uff08FMS\u901a\u5e38\u65e0\u5173\u8282\u708e\u4f53\u5f81\uff0cESR\/CRP\u6b63\u5e38\uff09\u3002<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <span class=\"text-rose-500 mr-2\">\u2022<\/span>\r\n <span><strong>\u5185\u5206\u6ccc\u75be\u75c5\uff1a<\/strong> \u7532\u72b6\u817a\u529f\u80fd\u51cf\u9000\u3001\u7532\u72b6\u65c1\u817a\u529f\u80fd\u4ea2\u8fdb\u3002<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <span class=\"text-rose-500 mr-2\">\u2022<\/span>\r\n <span><strong>\u6162\u6027\u75b2\u52b3\u7efc\u5408\u5f81 (CFS)\uff1a<\/strong> CFS \u4ee5\u4e25\u91cd\u75b2\u52b3\u4e3a\u6838\u5fc3\uff0cFMS \u4ee5\u75bc\u75db\u4e3a\u6838\u5fc3\uff0c\u5e38\u91cd\u53e0\u3002<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <span class=\"text-rose-500 mr-2\">\u2022<\/span>\r\n <span><strong>\u808c\u7b4b\u819c\u75bc\u75db\u7efc\u5408\u5f81\uff1a<\/strong> \u5c40\u90e8\u6fc0\u75db\u70b9\uff0c\u975e\u5168\u8eab\u6027\u3002<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <span class=\"text-rose-500 mr-2\">\u2022<\/span>\r\n <span><strong>\u7cbe\u795e\u969c\u788d\uff1a<\/strong> \u91cd\u5ea6\u6291\u90c1\u3001\u7126\u8651\u75c7\u3002<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 3: TREATMENT GUIDELINES -->\r\n <section id=\"treatment\" class=\"section-content hidden fade-in\">\r\n <div class=\"mb-6\">\r\n <h2 class=\"text-3xl font-bold text-teal-900 mb-3\">\u591a\u5b66\u79d1\u4e34\u5e8a\u6cbb\u7597\u6307\u5357<\/h2>\r\n <p class=\"text-stone-600\">\u6cbb\u7597\u76ee\u6807\u662f\u7f13\u89e3\u75c7\u72b6\u3001\u6539\u5584\u529f\u80fd\u3002\u6838\u5fc3\u7b56\u7565\u662f<strong>\u201c\u836f\u7269 + \u975e\u836f\u7269\u201d<\/strong>\u7684\u8054\u5408\u6cbb\u7597\uff0c\u5f3a\u8c03\u60a3\u8005\u81ea\u6211\u7ba1\u7406\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- Tab Navigation -->\r\n <div class=\"flex space-x-4 mb-6 border-b border-stone-200\">\r\n <button onclick=\"switchTab('non-drug')\" id=\"tab-non-drug\" class=\"tab-btn active px-6 py-2 rounded-t-lg font-medium transition\">\u975e\u836f\u7269\u6cbb\u7597 (\u6838\u5fc3)<\/button>\r\n <button onclick=\"switchTab('drug')\" id=\"tab-drug\" class=\"tab-btn px-6 py-2 rounded-t-lg font-medium bg-stone-100 text-stone-500 hover:bg-stone-200 transition\">\u836f\u7269\u6cbb\u7597<\/button>\r\n <\/div>\r\n\r\n <!-- Non-Drug Content -->\r\n <div id=\"content-non-drug\" class=\"treatment-tab-content\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-sm border-l-4 border-teal-500\">\r\n <h3 class=\"text-xl font-bold text-teal-800 mb-4\">\u5fc3\u7406\u4e0e\u884c\u4e3a\u5e72\u9884<\/h3>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex\">\r\n <span class=\"bg-teal-100 text-teal-800 text-xs font-bold px-2 py-1 rounded h-fit mr-3\">CBT<\/span>\r\n <div>\r\n <strong class=\"block text-stone-800\">\u8ba4\u77e5\u884c\u4e3a\u7597\u6cd5<\/strong>\r\n <span class=\"text-sm text-stone-600\">\u88ab\u8bc1\u5b9e\u5bf9\u6539\u5584\u75bc\u75db\u3001\u75b2\u52b3\u3001\u7761\u7720\u548c\u60c5\u7eea\u6709\u6548\u3002\u6539\u53d8\u5bf9\u75bc\u75db\u7684\u707e\u96be\u5316\u601d\u7ef4\u3002<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex\">\r\n <span class=\"bg-teal-100 text-teal-800 text-xs font-bold px-2 py-1 rounded h-fit mr-3\">\u653e\u677e<\/span>\r\n <div>\r\n <strong class=\"block text-stone-800\">\u6b63\u5ff5\u4e0e\u51cf\u538b<\/strong>\r\n <span class=\"text-sm text-stone-600\">\u6df1\u547c\u5438\u7ec3\u4e60\u3001\u51a5\u60f3\uff0c\u964d\u4f4e\u4e2d\u67a2\u795e\u7ecf\u7cfb\u7edf\u7684\u5174\u594b\u6027\u3002<\/span>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-sm border-l-4 border-amber-500\">\r\n <h3 class=\"text-xl font-bold text-amber-800 mb-4\">\u81ea\u6211\u7ba1\u7406\u6559\u80b2<\/h3>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex\">\r\n <span class=\"bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded h-fit mr-3\">\u8ba4\u77e5<\/span>\r\n <div>\r\n <strong class=\"block text-stone-800\">\u7406\u89e3\u75be\u75c5\u6027\u8d28<\/strong>\r\n <span class=\"text-sm text-stone-600\">\u4e86\u89e3 FMS \u662f\u975e\u5173\u8282\u708e\u6027\u3001\u975e\u8fdb\u5c55\u6027\u7684\uff0c\u75bc\u75db\u662f\u53ef\u63a7\u7684\u3002<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex\">\r\n <span class=\"bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded h-fit mr-3\">\u7761\u7720<\/span>\r\n <div>\r\n <strong class=\"block text-stone-800\">\u7761\u7720\u536b\u751f<\/strong>\r\n <span class=\"text-sm text-stone-600\">\u89c4\u5f8b\u4f5c\u606f\uff0c\u9650\u5236\u767d\u5929\u5c0f\u61a9\uff0c\u521b\u9020\u9ed1\u6697\u5b89\u9759\u7684\u7761\u7720\u73af\u5883\u3002<\/span>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-6 bg-teal-50 p-4 rounded-lg text-center\">\r\n <p class=\"text-teal-800 font-medium\">\ud83d\udca1 \u7269\u7406\u6cbb\u7597\uff08\u8fd0\u52a8\uff09\u662f\u6240\u6709\u975e\u836f\u7269\u6cbb\u7597\u4e2d\u6700\u5173\u952e\u7684\u90e8\u5206\uff0c\u8be6\u89c1\u201c\u5eb7\u590d\u65b9\u6848\u201d\u677f\u5757\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Drug Content -->\r\n <div id=\"content-drug\" class=\"treatment-tab-content hidden\">\r\n <div class=\"space-y-6\">\r\n <!-- First Line -->\r\n <div class=\"relative pl-8 border-l-2 border-green-500\">\r\n <div class=\"absolute -left-3 top-0 bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold\">1<\/div>\r\n <h3 class=\"text-lg font-bold text-stone-800 mb-2\">\u4e00\u7ebf\u836f\u7269 (\u63a8\u8350)<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-white p-4 rounded border border-stone-200\">\r\n <div class=\"text-xs text-stone-400 uppercase tracking-wider mb-1\">TCA\u7c7b<\/div>\r\n <div class=\"font-bold text-teal-700\">\u963f\u7c73\u66ff\u6797<\/div>\r\n <div class=\"text-xs text-stone-500 mt-1\">\u4f4e\u5242\u91cf\u4f7f\u7528\uff0c\u6539\u5584\u7761\u7720\u548c\u75bc\u75db\u3002<\/div>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded border border-stone-200\">\r\n <div class=\"text-xs text-stone-400 uppercase tracking-wider mb-1\">SNRI\u7c7b<\/div>\r\n <div class=\"font-bold text-teal-700\">\u5ea6\u6d1b\u897f\u6c40 \/ \u7c73\u90a3\u666e\u4ed1<\/div>\r\n <div class=\"text-xs text-stone-500 mt-1\">\u6539\u5584\u75bc\u75db\u53ca\u4f34\u968f\u7684\u6291\u90c1\/\u7126\u8651\u3002<\/div>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded border border-stone-200\">\r\n <div class=\"text-xs text-stone-400 uppercase tracking-wider mb-1\">\u9499\u901a\u9053\u8c03\u8282\u5242<\/div>\r\n <div class=\"font-bold text-teal-700\">\u666e\u745e\u5df4\u6797 \/ \u52a0\u5df4\u55b7\u4e01<\/div>\r\n <div class=\"text-xs text-stone-500 mt-1\">\u51cf\u5c11\u795e\u7ecf\u9012\u8d28\u91ca\u653e\uff0c\u7f13\u89e3\u75bc\u75db\u3002<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Second Line -->\r\n <div class=\"relative pl-8 border-l-2 border-yellow-500\">\r\n <div class=\"absolute -left-3 top-0 bg-yellow-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold\">2<\/div>\r\n <h3 class=\"text-lg font-bold text-stone-800 mb-2\">\u4e8c\u7ebf\u836f\u7269 (\u7279\u5b9a\u60c5\u51b5)<\/h3>\r\n <p class=\"text-sm text-stone-600 mb-2\">\u4ec5\u5728\u7279\u5b9a\u60c5\u51b5\u4e0b\u4f7f\u7528\uff0c\u5982\u66f2\u9a6c\u591a\uff08\u5f31\u963f\u7247\u7c7b\uff09\u6216 NSAIDs\uff08\u4ec5\u9488\u5bf9\u5408\u5e76\u5176\u4ed6\u98ce\u6e7f\u75c5\u65f6\uff09\u3002<\/p>\r\n <div class=\"bg-rose-50 p-3 rounded text-xs text-rose-700 border border-rose-100\">\r\n <strong>\u26a0\ufe0f \u8b66\u544a\uff1a<\/strong> \u5f3a\u963f\u7247\u7c7b\u836f\u7269\u901a\u5e38\u4e0d\u63a8\u8350\u957f\u671f\u7528\u4e8e\u7ea4\u7ef4\u808c\u75db\u6cbb\u7597\uff0c\u56e0\u5176\u526f\u4f5c\u7528\u53ca\u6210\u763e\u98ce\u9669\u3002\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 4: REHABILITATION -->\r\n <section id=\"rehab\" class=\"section-content hidden fade-in\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"lg:col-span-1 space-y-6\">\r\n <div>\r\n <h2 class=\"text-3xl font-bold text-teal-900 mb-3\">\u7269\u7406\u6cbb\u7597\u4e0e\u5eb7\u590d<\/h2>\r\n <p class=\"text-stone-600 mb-4\">\u8fd0\u52a8\u5e72\u9884\u662f\u5eb7\u590d\u7684\u6838\u5fc3\u3002\u539f\u5219\u662f<strong>\u5faa\u5e8f\u6e10\u8fdb\u3001\u4f4e\u5f3a\u5ea6\u3001\u89c4\u5f8b\u6027<\/strong>\u3002<\/p>\r\n <div class=\"bg-white p-4 rounded-lg shadow-sm border-l-4 border-indigo-500\">\r\n <h4 class=\"font-bold text-indigo-900 mb-2\">\u5177\u4f53\u65b9\u6848\u63a8\u8350<\/h4>\r\n <ul class=\"text-sm space-y-3 text-stone-700\">\r\n <li>\r\n <strong>\ud83c\udfca \u6709\u6c27\u8fd0\u52a8 (\u9996\u9009):<\/strong> \r\n <br>\u6563\u6b65\u3001\u6e38\u6cf3\u3001\u9a91\u884c\u3002\u6c34\u4e2d\u6709\u6c27\u8fd0\u52a8\u6700\u4f73\uff08\u6d6e\u529b\u51cf\u8d1f+\u6e29\u6c34\u653e\u677e\uff09\u3002\r\n <\/li>\r\n <li>\r\n <strong>\ud83c\udfcb\ufe0f \u808c\u529b\u7ec3\u4e60:<\/strong> \r\n <br>\u4f4e\u8d1f\u8377\u5f00\u59cb\uff08\u81ea\u8eab\u91cd\u91cf\/\u5f39\u529b\u5e26\uff09\u30022-3\u6b21\/\u5468\uff0c\u95f4\u969448\u5c0f\u65f6\u3002\r\n <\/li>\r\n <li>\r\n <strong>\ud83e\uddd8 \u67d4\u97e7\u6027:<\/strong> \r\n <br>\u6bcf\u65e5\u8fdb\u884c\u3002\u745c\u4f3d\u6216\u592a\u6781\uff0c\u7f13\u89e3\u50f5\u786c\u3002\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-stone-100 p-4 rounded-lg\">\r\n <h4 class=\"font-bold text-stone-800 mb-2\">\u8f85\u52a9\u7269\u7406\u7597\u6cd5<\/h4>\r\n <div class=\"flex flex-wrap gap-2\">\r\n <span class=\"px-2 py-1 bg-white rounded text-xs text-stone-600 border\">\u70ed\u6577 (\u7f13\u89e3\u50f5\u786c)<\/span>\r\n <span class=\"px-2 py-1 bg-white rounded text-xs text-stone-600 border\">\u51b7\u6577 (\u6025\u6027\u75db <20min)<\/span>\r\n <span class=\"px-2 py-1 bg-white rounded text-xs text-stone-600 border\">TENS (\u7535\u523a\u6fc0)<\/span>\r\n <span class=\"px-2 py-1 bg-white rounded text-xs text-stone-600 border\">\u8f7b\u67d4\u6309\u6469<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Interactive Exercise Planner Chart -->\r\n <div class=\"lg:col-span-2\">\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-stone-200 h-full\">\r\n <div class=\"mb-4\">\r\n <h3 class=\"font-bold text-teal-800 text-lg\">\ud83d\udcc8 \u8fd0\u52a8\u8fdb\u9636\u8def\u5f84\uff1a\u4f4e\u8d77\u6b65\uff0c\u6162\u589e\u52a0<\/h3>\r\n <p class=\"text-xs text-stone-500\">\u56fe\u8868\u5c55\u793a\u4e86\u63a8\u8350\u7684\u6709\u6c27\u8fd0\u52a8\u8fdb\u9636\u8ba1\u5212\uff08\u4ece\u521d\u5b66\u5230\u7ef4\u6301\u671f\uff09<\/p>\r\n <\/div>\r\n <!-- Chart Container for Plotly -->\r\n <div id=\"exerciseChart\" class=\"w-full h-[400px]\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- Footer -->\r\n <footer class=\"bg-stone-100 border-t border-stone-200 mt-auto py-8\">\r\n <div class=\"max-w-7xl mx-auto px-4 text-center\">\r\n <p class=\"text-stone-500 text-sm\">\u672c\u9875\u9762\u57fa\u4e8e\u63d0\u4f9b\u7684\u4e34\u5e8a\u8d44\u6599\u751f\u6210\uff0c\u4ec5\u4f9b\u4fe1\u606f\u53c2\u8003\uff0c\u4e0d\u66ff\u4ee3\u4e13\u4e1a\u533b\u7597\u5efa\u8bae\u3002<\/p>\r\n <p class=\"text-stone-400 text-xs mt-2\">\u00a9 2025 FMS \u4e92\u52a8\u6307\u5357 | Design for Health<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- JAVASCRIPT LOGIC -->\r\n <script>\r\n \/\/ --- 1. Navigation Logic ---\r\n function navTo(sectionId) {\r\n \/\/ Hide all sections\r\n document.querySelectorAll('.section-content').forEach(el => {\r\n el.classList.add('hidden');\r\n });\r\n \r\n \/\/ Show target section\r\n const target = document.getElementById(sectionId);\r\n if (target) {\r\n target.classList.remove('hidden');\r\n \/\/ Trigger chart resize if needed when showing hidden container\r\n if (sectionId === 'overview') updateRadarChart();\r\n if (sectionId === 'rehab') updatePlotlyChart();\r\n }\r\n\r\n \/\/ Update Nav State\r\n document.querySelectorAll('.nav-item').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n const activeBtn = document.getElementById(`nav-${sectionId}`);\r\n if (activeBtn) activeBtn.classList.add('active');\r\n \r\n \/\/ Scroll to top\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function switchTab(tabName) {\r\n \/\/ Hide all tab contents\r\n document.querySelectorAll('.treatment-tab-content').forEach(el => {\r\n el.classList.add('hidden');\r\n });\r\n \/\/ Show active tab\r\n document.getElementById(`content-${tabName}`).classList.remove('hidden');\r\n\r\n \/\/ Update buttons\r\n document.querySelectorAll('.tab-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n btn.classList.add('bg-stone-100', 'text-stone-500');\r\n });\r\n \r\n const activeBtn = document.getElementById(`tab-${tabName}`);\r\n activeBtn.classList.add('active');\r\n activeBtn.classList.remove('bg-stone-100', 'text-stone-500');\r\n }\r\n\r\n \/\/ --- 2. Diagnosis Logic (Simulator) ---\r\n function checkDiagnosis() {\r\n \/\/ 1990 Criteria Logic\r\n const pain1990 = document.getElementById('crit-1990-pain').checked;\r\n const points1990 = document.getElementById('crit-1990-points').checked;\r\n const resultBox1990 = document.getElementById('result-1990');\r\n\r\n if (pain1990 && points1990) {\r\n resultBox1990.textContent = \"\u7b26\u5408 1990 \u8bca\u65ad\u6807\u51c6 \u2705\";\r\n resultBox1990.className = \"mt-4 p-3 bg-teal-100 text-teal-800 text-center rounded text-sm font-bold transition-colors\";\r\n } else {\r\n resultBox1990.textContent = \"\u672a\u6ee1\u8db3 1990 \u6807\u51c6\";\r\n resultBox1990.className = \"mt-4 p-3 bg-stone-100 text-stone-500 text-center rounded text-sm font-bold transition-colors\";\r\n }\r\n\r\n \/\/ 2016 Criteria Logic\r\n const wpi = parseInt(document.getElementById('val-wpi').value) || 0;\r\n const sss = parseInt(document.getElementById('val-sss').value) || 0;\r\n const regions2016 = document.getElementById('crit-2016-regions').checked;\r\n const duration2016 = document.getElementById('crit-2016-duration').checked;\r\n const resultBox2016 = document.getElementById('result-2016');\r\n\r\n \/\/ Logic: (WPI >= 7 && SSS >= 5) OR (WPI 4-6 && SSS >= 9)\r\n \/\/ AND (Generalized pain in 4\/5 regions) AND (Duration > 3mo)\r\n const scoreMet = (wpi >= 7 && sss >= 5) || (wpi >= 4 && wpi <= 6 && sss >= 9);\r\n\r\n if (scoreMet && regions2016 && duration2016) {\r\n resultBox2016.textContent = \"\u7b26\u5408 2016 \u8bca\u65ad\u6807\u51c6 \u2705\";\r\n resultBox2016.className = \"mt-4 p-3 bg-teal-100 text-teal-800 text-center rounded text-sm font-bold transition-colors\";\r\n } else {\r\n let msg = \"\u672a\u6ee1\u8db3 2016 \u6807\u51c6\";\r\n if (!scoreMet) msg += \" (WPI\/SSS \u5206\u6570\u4e0d\u8db3)\";\r\n else if (!regions2016) msg += \" (\u75bc\u75db\u533a\u57df\u4e0d\u8db34\u4e2a)\";\r\n else if (!duration2016) msg += \" (\u65f6\u957f\u4e0d\u8db33\u4e2a\u6708)\";\r\n \r\n resultBox2016.textContent = msg;\r\n resultBox2016.className = \"mt-4 p-3 bg-stone-100 text-stone-500 text-center rounded text-sm font-bold transition-colors\";\r\n }\r\n }\r\n\r\n \/\/ --- 3. Chart.js Implementation (Symptom Radar) ---\r\n let radarChartInstance = null;\r\n\r\n function initRadarChart() {\r\n const ctx = document.getElementById('symptomRadarChart').getContext('2d');\r\n radarChartInstance = new Chart(ctx, {\r\n type: 'radar',\r\n data: {\r\n labels: ['\u5e7f\u6cdb\u6027\u75bc\u75db', '\u6668\u50f5', '\u8ba4\u77e5\u56f0\u96be (\u96fe)', '\u7761\u7720\u969c\u788d', '\u75b2\u52b3', '\u6291\u90c1\/\u7126\u8651'],\r\n datasets: [{\r\n label: 'FMS \u60a3\u8005\u5178\u578b\u8868\u73b0',\r\n data: [95, 70, 80, 90, 92, 60],\r\n backgroundColor: 'rgba(20, 184, 166, 0.2)', \/\/ teal-500 with opacity\r\n borderColor: 'rgba(15, 118, 110, 1)', \/\/ teal-700\r\n pointBackgroundColor: 'rgba(251, 113, 133, 1)', \/\/ rose-400\r\n borderWidth: 2\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n r: {\r\n angleLines: { color: '#e5e7eb' },\r\n grid: { color: '#e5e7eb' },\r\n pointLabels: {\r\n font: { size: 12, family: \"'Noto Sans SC', sans-serif\" },\r\n color: '#57534e'\r\n },\r\n suggestedMin: 0,\r\n suggestedMax: 100,\r\n ticks: { display: false } \/\/ Hide numbers for cleaner look\r\n }\r\n },\r\n plugins: {\r\n legend: { display: false },\r\n tooltip: {\r\n callbacks: {\r\n label: function(context) {\r\n const labels = [\r\n \"\u6301\u7eed>3\u4e2a\u6708\uff0c\u8eab\u4f53\u4e24\u4fa7\u53ca\u4e2d\u8f74\",\r\n \"\u65e9\u6668\u9192\u6765\u8eab\u4f53\u50f5\u786c\uff0c\u901a\u5e38<60\u5206\u949f\",\r\n \"\u6ce8\u610f\u529b\u4e0d\u96c6\u4e2d\uff0c\u8bb0\u5fc6\u529b\u4e0b\u964d\",\r\n \"\u65e0\u6062\u590d\u6027\u7761\u7720\uff0c\u6613\u9192\",\r\n \"\u5373\u4f7f\u4f11\u606f\u4e5f\u611f\u5230\u6781\u5ea6\u75b2\u60eb\",\r\n \"\u5e38\u4f34\u968f\u7684\u60c5\u7eea\u95ee\u9898\"\r\n ];\r\n return labels[context.dataIndex];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function updateRadarChart() {\r\n if (radarChartInstance) {\r\n radarChartInstance.resize();\r\n }\r\n }\r\n\r\n \/\/ --- 4. Plotly.js Implementation (Exercise Progression) ---\r\n function initPlotlyChart() {\r\n const weeks = ['\u7b2c1-2\u5468', '\u7b2c3-4\u5468', '\u7b2c5-6\u5468', '\u7b2c7-8\u5468', '\u7b2c9+\u5468'];\r\n const duration = [10, 20, 30, 45, 60]; \/\/ Minutes\r\n const frequency = [1, 2, 3, 3, 4]; \/\/ Times per week\r\n \r\n \/\/ Trace 1: Duration (Bar)\r\n const trace1 = {\r\n x: weeks,\r\n y: duration,\r\n name: '\u6bcf\u6b21\u65f6\u957f (\u5206\u949f)',\r\n type: 'bar',\r\n marker: { color: '#ccfbf1' }, \/\/ teal-100\r\n hoverinfo: 'y+name'\r\n };\r\n\r\n \/\/ Trace 2: Frequency (Line) - Scaled for visualization\r\n const trace2 = {\r\n x: weeks,\r\n y: frequency,\r\n name: '\u6bcf\u5468\u9891\u7387 (\u6b21)',\r\n type: 'scatter',\r\n mode: 'lines+markers',\r\n yaxis: 'y2',\r\n line: { color: '#0f766e', width: 3 },\r\n marker: { color: '#f43f5e', size: 8 }\r\n };\r\n\r\n const layout = {\r\n title: { text: '\u6709\u6c27\u8fd0\u52a8\u6e10\u8fdb\u65b9\u6848', font: { family: 'Noto Sans SC', size: 16, color: '#44403c' } },\r\n showlegend: true,\r\n legend: { orientation: 'h', y: -0.2 },\r\n paper_bgcolor: 'rgba(0,0,0,0)',\r\n plot_bgcolor: 'rgba(0,0,0,0)',\r\n margin: { l: 40, r: 40, t: 40, b: 40 },\r\n xaxis: { \r\n title: '\u65f6\u95f4\u8fdb\u7a0b',\r\n fixedrange: true \r\n },\r\n yaxis: { \r\n title: '\u65f6\u957f (\u5206\u949f)',\r\n range: [0, 70],\r\n fixedrange: true\r\n },\r\n yaxis2: {\r\n title: '\u9891\u7387 (\u6b21\/\u5468)',\r\n overlaying: 'y',\r\n side: 'right',\r\n range: [0, 6],\r\n fixedrange: true\r\n },\r\n autosize: true\r\n };\r\n\r\n const config = { responsive: true, displayModeBar: false };\r\n \r\n Plotly.newPlot('exerciseChart', [trace1, trace2], layout, config);\r\n }\r\n\r\n function updatePlotlyChart() {\r\n const plotDiv = document.getElementById('exerciseChart');\r\n if (plotDiv) {\r\n Plotly.Plots.resize(plotDiv);\r\n }\r\n }\r\n\r\n \/\/ --- Initialization ---\r\n document.addEventListener('DOMContentLoaded', () => {\r\n initRadarChart();\r\n initPlotlyChart();\r\n \/\/ Default to overview\r\n navTo('overview');\r\n });\r\n\r\n \/\/ Window resize handler\r\n window.addEventListener('resize', () => {\r\n updateRadarChart();\r\n updatePlotlyChart();\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u7ea4\u7ef4\u808c\u75db\u7efc\u5408\u5f81 (FMS) \u6df1\u5ea6\u4e92\u52a8\u6307\u5357 FMS \u7ea4\u7ef4\u808c\u75db\u6307\u5357 \u5168\u8c8c\u4e0e\u75c7\u72b6 \u8bca\u65ad\u6807\u51c6 \u6cbb\u7597\u7b56\u7565 \u5eb7\u590d\u65b9\u6848 \u8bf7\u4f7f […]<\/p>\n","protected":false},"author":1,"featured_media":1791,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-1785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-22"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/www.funpt.cn\/wp-content\/uploads\/2025\/11\/\u7ea4\u7ef4\u6027\u808c\u75db.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1785"}],"version-history":[{"count":10,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1785\/revisions"}],"predecessor-version":[{"id":1797,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1785\/revisions\/1797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/media\/1791"}],"wp:attachment":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}