{"id":1798,"date":"2025-11-27T10:22:39","date_gmt":"2025-11-27T02:22:39","guid":{"rendered":"https:\/\/www.funpt.cn\/?p=1798"},"modified":"2025-11-27T10:22:44","modified_gmt":"2025-11-27T02:22:44","slug":"mtss%e8%83%ab%e9%aa%a8%e5%ba%94%e5%8a%9b%e6%80%a7%e9%aa%a8%e6%8a%98","status":"publish","type":"post","link":"https:\/\/www.funpt.cn\/?p=1798","title":{"rendered":"MTSS&\u80eb\u9aa8\u5e94\u529b\u6027\u9aa8\u6298"},"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 MTSS & Tibial Stress Fracture: Conservative Treatment Protocols<\/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.27.0.min.js\"><\/script>\r\n\r\n <!-- Font: Noto Sans SC for Chinese support and professional look -->\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 <!-- Custom CSS for Chart Containers (Mandatory) -->\r\n <style>\r\n body {\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #f0fdfa; \/* Teal-50 base *\/\r\n color: #134e4a; \/* Teal-900 text *\/\r\n }\r\n \r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n \/* Responsive Heights managed via JS\/Tailwind classes, but base defaults here *\/\r\n }\r\n\r\n \/* Palette Definition (Vibrant Teal & Coral) \r\n Primary: #0d9488 (Teal-600)\r\n Secondary: #14b8a6 (Teal-500)\r\n Accent: #f97316 (Orange\/Coral-500)\r\n Dark: #111827 (Gray-900)\r\n Light: #ffffff\r\n *\/\r\n \r\n .card-shadow {\r\n box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.1), 0 4px 6px -2px rgba(13, 148, 136, 0.05);\r\n }\r\n\r\n \/* Gradient Text *\/\r\n .text-gradient {\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-image: linear-gradient(to right, #0d9488, #f97316);\r\n }\r\n\r\n \/* Custom Flow Diagram Connectors *\/\r\n .flow-line {\r\n width: 2px;\r\n background-color: #cbd5e1;\r\n flex-grow: 1;\r\n min-height: 20px;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .flow-line {\r\n width: auto;\r\n height: 2px;\r\n min-height: auto;\r\n }\r\n }\r\n <\/style>\r\n \r\n <!-- \r\n PALETTE SELECTION: \"Energetic Health\"\r\n Primary: Teal (#0d9488)\r\n Accent: Vibrant Coral (#f97316)\r\n Background: Light Mint (#f0fdfa)\r\n Designed for high contrast and professional medical data presentation.\r\n \r\n PLAN SUMMARY:\r\n 1. Introduction: Define MTSS vs. Stress Fractures.\r\n 2. Epidemiology: Compare incidence rates (Donut Chart).\r\n 3. Risk Factors: Biomechanical analysis (Radar Chart).\r\n 4. Treatment Pathway: Step-by-step conservative protocol (HTML Flow).\r\n 5. Pain Monitoring: VAS Scale visuals (HTML\/CSS Bar).\r\n 6. Return to Run: Volume vs. Intensity over time (Mixed Line\/Bar).\r\n 7. Recovery Outcomes: Time to return to sport by Grade (Plotly Box Plot).\r\n \r\n VISUALIZATION CHOICES:\r\n - Donut Chart: Best for comparing simple proportions of injury types. (NO SVG)\r\n - Radar Chart: Excellent for multivariate risk profile comparison. (NO SVG)\r\n - HTML\/CSS Flow: Structure required for process visualization without Mermaid. (NO SVG)\r\n - Mixed Chart: Necessary to show correlation between volume load and intensity. (NO SVG)\r\n - Plotly Box Plot: Statistical distribution of recovery days fits Plotly's advanced capabilities. (Canvas\/WebGL used).\r\n \r\n CONFIRMATION: \r\n Neither Mermaid JS nor SVG graphics are used in this output. All charts use Canvas\/WebGL. Icons are Unicode.\r\n -->\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <!-- Header Section -->\r\n <header class=\"bg-white border-b-4 border-teal-600 py-12 px-4 shadow-sm\">\r\n <div class=\"max-w-7xl mx-auto text-center\">\r\n <h1 class=\"text-4xl md:text-5xl font-bold mb-4 text-slate-800\">\r\n MTSS & \u80eb\u9aa8\u5e94\u529b\u6027\u9aa8\u6298\r\n <\/h1>\r\n <p class=\"text-xl md:text-2xl font-medium text-teal-600 mb-2\">\r\n \u4fdd\u5b88\u6cbb\u7597\u65b9\u6848\u4e0e\u6570\u636e\u5206\u6790\r\n <\/p>\r\n <p class=\"max-w-2xl mx-auto text-slate-500 mt-4\">\r\n \u4e00\u4efd\u57fa\u4e8e\u5faa\u8bc1\u533b\u5b66\u7684\u4ea4\u4e92\u5f0f\u6307\u5357\uff0c\u65e8\u5728\u4f18\u5316\u8dd1\u6b65\u76f8\u5173\u80eb\u9aa8\u635f\u4f24\u7684\u5eb7\u590d\u8def\u5f84\u3001\u98ce\u9669\u8bc4\u4f30\u53ca\u91cd\u8fd4\u8fd0\u52a8\u7b56\u7565\u3002\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"max-w-7xl mx-auto p-4 md:p-8 space-y-12\">\r\n\r\n <!-- SECTION 1: EPIDEMIOLOGY -->\r\n <section class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"order-2 md:order-1\">\r\n <div class=\"bg-white rounded-2xl p-6 card-shadow border-l-8 border-teal-500 h-full\">\r\n <h2 class=\"text-2xl font-bold text-slate-800 mb-4 flex items-center\">\r\n <span class=\"text-3xl mr-3\">\ud83d\udcca<\/span> \u6d41\u884c\u75c5\u5b66\u6982\u51b5\r\n <\/h2>\r\n <p class=\"text-slate-600 mb-4 leading-relaxed\">\r\n \u80eb\u9aa8\u5185\u4fa7\u5e94\u529b\u7efc\u5408\u5f81 (MTSS) \u548c\u80eb\u9aa8\u5e94\u529b\u6027\u9aa8\u6298\u662f\u8dd1\u8005\u548c\u519b\u4e8b\u4eba\u5458\u4e2d\u6700\u5e38\u89c1\u7684\u4e0b\u80a2\u8fc7\u5ea6\u4f7f\u7528\u635f\u4f24\u3002\u6570\u636e\u8868\u660e\uff0c\u9ad8\u8fbe <strong class=\"text-teal-600\">35%<\/strong> \u7684\u957f\u8dd1\u8fd0\u52a8\u5458\u4f1a\u5728\u804c\u4e1a\u751f\u6daf\u4e2d\u906d\u9047\u6b64\u7c7b\u95ee\u9898\u3002\u533a\u5206\u4e24\u8005\u81f3\u5173\u91cd\u8981\uff1aMTSS \u662f\u9aa8\u819c\u708e\u75c7\uff0c\u800c\u5e94\u529b\u6027\u9aa8\u6298\u5219\u6d89\u53ca\u9aa8\u76ae\u8d28\u7684\u5fae\u88c2\u7eb9\u3002\r\n <\/p>\r\n <div class=\"grid grid-cols-2 gap-4 mt-6\">\r\n <div class=\"bg-teal-50 p-4 rounded-lg text-center\">\r\n <span class=\"block text-3xl font-bold text-teal-600\">13-20%<\/span>\r\n <span class=\"text-sm text-slate-500 font-semibold\">\u8dd1\u8005\u53d1\u75c5\u7387 (MTSS)<\/span>\r\n <\/div>\r\n <div class=\"bg-orange-50 p-4 rounded-lg text-center\">\r\n <span class=\"block text-3xl font-bold text-orange-500\"><10%<\/span>\r\n <span class=\"text-sm text-slate-500 font-semibold\">\u8fdb\u5c55\u4e3a\u9aa8\u6298\u98ce\u9669<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"order-1 md:order-2\">\r\n <div class=\"bg-white rounded-2xl p-6 card-shadow\">\r\n <h3 class=\"text-lg font-bold text-slate-700 mb-2 text-center\">\u4e0b\u80a2\u8fc7\u5ea6\u4f7f\u7528\u635f\u4f24\u5206\u5e03<\/h3>\r\n <div class=\"chart-container h-80 max-w-lg mx-auto\">\r\n <canvas id=\"prevalenceChart\"><\/canvas>\r\n <\/div>\r\n <p class=\"text-xs text-center text-slate-400 mt-2\">\u6570\u636e\u6765\u6e90\uff1a\u7efc\u5408\u8fd0\u52a8\u533b\u5b66\u835f\u8403\u5206\u6790<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 2: RISK FACTORS -->\r\n <section class=\"bg-white rounded-2xl p-8 card-shadow relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -mr-16 -mt-16 opacity-50\"><\/div>\r\n \r\n <div class=\"mb-8 text-center max-w-3xl mx-auto\">\r\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4\">\u26a0\ufe0f \u751f\u7269\u529b\u5b66\u98ce\u9669\u753b\u50cf<\/h2>\r\n <p class=\"text-slate-600\">\r\n MTSS \u7684\u53d1\u751f\u5e76\u975e\u5355\u4e00\u56e0\u7d20\u5bfc\u81f4\uff0c\u800c\u662f\u591a\u56e0\u7d20\u7d2f\u79ef\u7684\u7ed3\u679c\u3002\u9ad8\u98ce\u9669\u8fd0\u52a8\u5458\u901a\u5e38\u8868\u73b0\u51fa\u7279\u5b9a\u7684\u751f\u7269\u529b\u5b66\u7279\u5f81\u3002\u4e0b\u65b9\u7684\u96f7\u8fbe\u56fe\u5bf9\u6bd4\u4e86\u201c\u9ad8\u98ce\u9669\u8dd1\u8005\u201d\u4e0e\u201c\u5065\u5eb7\u5bf9\u7167\u7ec4\u201d\u5728\u5173\u952e\u6307\u6807\u4e0a\u7684\u5dee\u5f02\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col md:flex-row gap-8 items-center justify-center\">\r\n <!-- Textual Breakdown -->\r\n <div class=\"w-full md:w-1\/3 space-y-4\">\r\n <div class=\"flex items-start\">\r\n <div class=\"bg-orange-100 text-orange-600 p-2 rounded-lg mr-3 mt-1 font-bold\">BMI<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-slate-700\">\u4f53\u91cd\u6307\u6570 (BMI)<\/h4>\r\n <p class=\"text-sm text-slate-500\">\u8f83\u9ad8\u7684 BMI (>25) \u663e\u8457\u589e\u52a0\u80eb\u9aa8\u8d1f\u8377\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start\">\r\n <div class=\"bg-teal-100 text-teal-600 p-2 rounded-lg mr-3 mt-1 font-bold\">ND<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-slate-700\">\u821f\u9aa8\u4e0b\u964d (Navicular Drop)<\/h4>\r\n <p class=\"text-sm text-slate-500\">\u8db3\u90e8\u8fc7\u5ea6\u65cb\u524d\u5bfc\u81f4\u80eb\u9aa8\u540e\u808c\u7275\u62c9\u589e\u52a0\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start\">\r\n <div class=\"bg-purple-100 text-purple-600 p-2 rounded-lg mr-3 mt-1 font-bold\">ROM<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-slate-700\">\u9acb\u5173\u8282\u5916\u5c55<\/h4>\r\n <p class=\"text-sm text-slate-500\">\u9acb\u90e8\u529b\u91cf\u4e0d\u8db3\u5bfc\u81f4\u819d\u5173\u8282\u5185\u6263\u548c\u80eb\u9aa8\u5185\u65cb\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Radar Chart -->\r\n <div class=\"w-full md:w-2\/3\">\r\n <div class=\"chart-container h-96 max-w-2xl mx-auto\">\r\n <canvas id=\"riskFactorChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 3: CONSERVATIVE TREATMENT PATHWAY (Process) -->\r\n <section>\r\n <h2 class=\"text-3xl font-bold text-slate-800 mb-8 text-center\">\ud83d\udd04 \u5206\u9636\u6bb5\u4fdd\u5b88\u6cbb\u7597\u65b9\u6848<\/h2>\r\n <p class=\"text-center text-slate-600 max-w-3xl mx-auto mb-10\">\r\n \u6cbb\u7597\u7684\u6838\u5fc3\u5728\u4e8e\u201c\u76f8\u5bf9\u4f11\u606f\u201d\u4e0e\u201c\u6e10\u8fdb\u8d1f\u8377\u201d\u3002\u5b8c\u5168\u505c\u8bad\u5f80\u5f80\u5bfc\u81f4\u7ec4\u7ec7\u627f\u91cd\u80fd\u529b\u8fdb\u4e00\u6b65\u4e0b\u964d\uff0c\u56e0\u6b64\u5efa\u8bae\u91c7\u7528\u5206\u9636\u6bb5\u56de\u5f52\u7b56\u7565\u3002\r\n <\/p>\r\n\r\n <!-- Custom HTML\/CSS Flowchart (No SVG, No Mermaid) -->\r\n <div class=\"flex flex-col md:flex-row justify-between items-stretch gap-4 overflow-x-auto pb-4\">\r\n \r\n <!-- Phase 1 -->\r\n <div class=\"flex-1 flex flex-col items-center relative min-w-[200px]\">\r\n <div class=\"w-16 h-16 rounded-full bg-red-500 text-white flex items-center justify-center text-2xl font-bold shadow-lg z-10 border-4 border-white\">\r\n 1\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-md mt-4 w-full border-t-4 border-red-500 h-full\">\r\n <h4 class=\"font-bold text-lg text-red-600 mb-2\">\u6025\u6027\u671f\u63a7\u5236<\/h4>\r\n <p class=\"text-xs text-slate-400 font-mono mb-2\">\u65f6\u957f: 2-4 \u5468<\/p>\r\n <ul class=\"text-sm text-slate-600 list-disc pl-4 space-y-1\">\r\n <li>\u76f8\u5bf9\u4f11\u606f (\u505c\u6b62\u8dd1\u6b65)<\/li>\r\n <li>\u51b0\u6577\u4e0e\u9547\u75db<\/li>\r\n <li>\u51b2\u51fb\u6ce2\u6cbb\u7597 (SWT)<\/li>\r\n <li>\u65e0\u75db\u4e0b\u7684\u4ea4\u53c9\u8bad\u7ec3 (\u6e38\u6cf3\/\u9a91\u884c)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <!-- Connector Line (Hidden on mobile last item, visible on desktop) -->\r\n <div class=\"hidden md:block absolute top-8 left-1\/2 w-full h-1 bg-slate-200 -z-0\"><\/div>\r\n <\/div>\r\n\r\n <!-- Phase 2 -->\r\n <div class=\"flex-1 flex flex-col items-center relative min-w-[200px]\">\r\n <div class=\"w-16 h-16 rounded-full bg-orange-500 text-white flex items-center justify-center text-2xl font-bold shadow-lg z-10 border-4 border-white\">\r\n 2\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-md mt-4 w-full border-t-4 border-orange-500 h-full\">\r\n <h4 class=\"font-bold text-lg text-orange-600 mb-2\">\u5eb7\u590d\u4e0e\u8d1f\u8377\u5f15\u5165<\/h4>\r\n <p class=\"text-xs text-slate-400 font-mono mb-2\">\u65f6\u957f: 4-8 \u5468<\/p>\r\n <ul class=\"text-sm text-slate-600 list-disc pl-4 space-y-1\">\r\n <li>\u8db3\u90e8\u5185\u5728\u808c\u5f3a\u5316<\/li>\r\n <li>\u6bd4\u76ee\u9c7c\u808c\u79bb\u5fc3\u8bad\u7ec3<\/li>\r\n <li>\u672c\u4f53\u611f\u89c9\u8bad\u7ec3<\/li>\r\n <li>\u4f4e\u51b2\u51fb\u8d1f\u8377 (\u8df3\u7ef3\/\u53f0\u9636)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"hidden md:block absolute top-8 left-1\/2 w-full h-1 bg-slate-200 -z-0\"><\/div>\r\n <\/div>\r\n\r\n <!-- Phase 3 -->\r\n <div class=\"flex-1 flex flex-col items-center relative min-w-[200px]\">\r\n <div class=\"w-16 h-16 rounded-full bg-teal-500 text-white flex items-center justify-center text-2xl font-bold shadow-lg z-10 border-4 border-white\">\r\n 3\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-md mt-4 w-full border-t-4 border-teal-500 h-full\">\r\n <h4 class=\"font-bold text-lg text-teal-600 mb-2\">\u91cd\u8fd4\u8dd1\u6b65 (RTR)<\/h4>\r\n <p class=\"text-xs text-slate-400 font-mono mb-2\">\u65f6\u957f: 8-12 \u5468+<\/p>\r\n <ul class=\"text-sm text-slate-600 list-disc pl-4 space-y-1\">\r\n <li>\u8d70\u8dd1\u7ed3\u5408\u7a0b\u5e8f<\/li>\r\n <li>\u76d1\u63a7 VAS \u75bc\u75db\u8bc4\u5206<\/li>\r\n <li>\u9010\u6b65\u589e\u52a0\u91cc\u7a0b (10%\u539f\u5219)<\/li>\r\n <li>\u6539\u5584\u8dd1\u6b65\u6b65\u6001 (\u6b65\u9891)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"hidden md:block absolute top-8 left-1\/2 w-full h-1 bg-slate-200 -z-0\"><\/div>\r\n <\/div>\r\n\r\n <!-- Phase 4 -->\r\n <div class=\"flex-1 flex flex-col items-center relative min-w-[200px]\">\r\n <div class=\"w-16 h-16 rounded-full bg-slate-700 text-white flex items-center justify-center text-2xl font-bold shadow-lg z-10 border-4 border-white\">\r\n 4\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-md mt-4 w-full border-t-4 border-slate-700 h-full\">\r\n <h4 class=\"font-bold text-lg text-slate-700 mb-2\">\u5168\u9762\u6062\u590d\u4e0e\u9884\u9632<\/h4>\r\n <p class=\"text-xs text-slate-400 font-mono mb-2\">\u6301\u7eed\u8fdb\u884c<\/p>\r\n <ul class=\"text-sm text-slate-600 list-disc pl-4 space-y-1\">\r\n <li>\u5168\u9762\u6062\u590d\u4e13\u9879\u8bad\u7ec3<\/li>\r\n <li>\u7ef4\u6301\u529b\u91cf\u8bad\u7ec3\u9891\u7387<\/li>\r\n <li>\u5b9a\u671f\u76d1\u6d4b\u8d1f\u8377\u91cf<\/li>\r\n <li>\u978b\u5177\u4e0e\u573a\u5730\u7ba1\u7406<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 4 & 5: Pain Monitoring & Progression (Grid Layout) -->\r\n <section class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n \r\n <!-- Pain Scale Model -->\r\n <div class=\"bg-white rounded-2xl p-6 card-shadow\">\r\n <h3 class=\"text-xl font-bold text-slate-800 mb-4 border-b pb-2 border-slate-100\">\r\n \ud83c\udf21\ufe0f \u75bc\u75db\u76d1\u63a7\u6a21\u578b (VAS \u8bc4\u5206)\r\n <\/h3>\r\n <p class=\"text-sm text-slate-500 mb-6\">\r\n \u5728\u5eb7\u590d\u8fc7\u7a0b\u4e2d\uff0c\u5e76\u975e\u5b8c\u5168\u4e0d\u80fd\u6709\u75bc\u75db\u3002\u5173\u952e\u5728\u4e8e\u5c06\u75bc\u75db\u63a7\u5236\u5728\u201c\u5b89\u5168\u533a\u57df\u201d\u5185\u3002\r\n <\/p>\r\n \r\n <!-- Custom HTML Chart for Pain Scale -->\r\n <div class=\"space-y-4\">\r\n <div class=\"relative pt-6\">\r\n <div class=\"flex mb-2 items-center justify-between text-xs font-semibold\">\r\n <span class=\"text-teal-600\">\u5b89\u5168\u533a (0-2)<\/span>\r\n <span class=\"text-yellow-600\">\u89c2\u5bdf\u533a (3-5)<\/span>\r\n <span class=\"text-red-600\">\u5371\u9669\u533a (6-10)<\/span>\r\n <\/div>\r\n <div class=\"overflow-hidden h-6 mb-4 text-xs flex rounded bg-slate-200\">\r\n <div style=\"width: 30%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500\">\u5141\u8bb8\u7ee7\u7eed<\/div>\r\n <div style=\"width: 30%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-400\">\u9700\u8c03\u6574\u8d1f\u8377<\/div>\r\n <div style=\"width: 40%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500\">\u7acb\u5373\u505c\u6b62<\/div>\r\n <\/div>\r\n <div class=\"text-sm text-slate-600 bg-slate-50 p-3 rounded border-l-4 border-teal-500\">\r\n <strong>\u89c4\u5219\uff1a<\/strong> \u5982\u679c\u8bad\u7ec3\u540e\u7684\u75bc\u75db\u5728 24 \u5c0f\u65f6\u5185\u672a\u6062\u590d\u81f3\u57fa\u7ebf\u6c34\u5e73\uff0c\u5219\u5fc5\u987b\u51cf\u5c11\u4e0b\u4e00\u6b21\u8bad\u7ec3\u7684\u8d1f\u8377\u3002\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Return to Run Chart -->\r\n <div class=\"bg-white rounded-2xl p-6 card-shadow\">\r\n <h3 class=\"text-xl font-bold text-slate-800 mb-4 border-b pb-2 border-slate-100\">\r\n \ud83d\udcc8 \u91cd\u8fd4\u8dd1\u6b65\u8d1f\u8377\u9012\u589e\u6a21\u578b\r\n <\/h3>\r\n <p class=\"text-sm text-slate-500 mb-4\">\r\n \u6b64\u56fe\u8868\u5c55\u793a\u4e86\u7406\u60f3\u7684\u8d1f\u8377\u7ba1\u7406\uff1a\u968f\u7740\u8dd1\u6b65\u91cf\uff08\u67f1\u72b6\u56fe\uff09\u7684\u589e\u52a0\uff0c\u75bc\u75db\u6307\u6570\uff08\u7ebf\u56fe\uff09\u5e94\u4fdd\u6301\u7a33\u5b9a\u6216\u4e0b\u964d\u3002\r\n <\/p>\r\n <div class=\"chart-container h-64 max-w-full\">\r\n <canvas id=\"rtrChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 6: Recovery Outcomes (Plotly) -->\r\n <section class=\"bg-white rounded-2xl p-8 card-shadow border-t-4 border-orange-500\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-center mb-6\">\r\n <div class=\"mb-4 md:mb-0\">\r\n <h2 class=\"text-2xl font-bold text-slate-800\">\u23f1\ufe0f MRI \u5206\u7ea7\u4e0e\u6062\u590d\u65f6\u95f4<\/h2>\r\n <p class=\"text-slate-600 text-sm mt-1\">\r\n \u5e94\u529b\u6027\u9aa8\u6298\u7684\u6062\u590d\u65f6\u95f4\u4e0e MRI \u9aa8\u6c34\u80bf\u5206\u7ea7\uff08Fredericson \u5206\u7ea7\uff09\u5448\u6b63\u76f8\u5173\u3002\u9ad8\u7ea7\u522b\u635f\u4f24\u9700\u8981\u663e\u8457\u66f4\u957f\u7684\u505c\u8bad\u65f6\u95f4\u3002\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-orange-50 px-4 py-2 rounded text-orange-700 font-bold text-sm\">\r\n n = 120 \u6848\u4f8b\u5206\u6790\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Plotly Container -->\r\n <div id=\"recoveryPlot\" class=\"w-full h-[450px] chart-container\"><\/div>\r\n <p class=\"text-center text-xs text-slate-400 mt-2\">\r\n *\u7bb1\u7ebf\u56fe\u663e\u793a\u4e2d\u4f4d\u6570\u53ca\u56db\u5206\u4f4d\u8ddd\u3002Grade 4 \u4ee3\u8868\u76ae\u8d28\u9aa8\u6298\u7ebf\u53ef\u89c1\u3002\r\n <\/p>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer class=\"text-center py-10 text-slate-500 text-sm\">\r\n <p>© 2025 Canvas Infographics. Generate for Educational Purposes Only.<\/p>\r\n <p class=\"mt-2\">\u26a0\ufe0f \u514d\u8d23\u58f0\u660e\uff1a\u672c\u56fe\u8868\u5185\u5bb9\u4ec5\u4f9b\u53c2\u8003\uff0c\u4e0d\u80fd\u66ff\u4ee3\u4e13\u4e1a\u533b\u7597\u8bca\u65ad\u5efa\u8bae\u3002\u5982\u6709\u4e0d\u9002\u8bf7\u53ca\u65f6\u5c31\u533b\u3002<\/p>\r\n <\/footer>\r\n\r\n <\/main>\r\n\r\n <!-- SCRIPTS -->\r\n <script>\r\n \/\/ --- UTILITY FUNCTIONS ---\r\n \r\n \/\/ Label Splitting Logic for text > 16 chars\r\n function splitLabel(label) {\r\n if (label.length <= 16) return label;\r\n const words = label.split(' ');\r\n const lines = [];\r\n let currentLine = words[0];\r\n\r\n for (let i = 1; i < words.length; i++) {\r\n if ((currentLine + \" \" + words[i]).length <= 16) {\r\n currentLine += \" \" + words[i];\r\n } else {\r\n lines.push(currentLine);\r\n currentLine = words[i];\r\n }\r\n }\r\n lines.push(currentLine);\r\n return lines;\r\n }\r\n\r\n \/\/ Global Chart Options\r\n Chart.defaults.font.family = \"'Noto Sans SC', sans-serif\";\r\n Chart.defaults.color = '#475569';\r\n \r\n \/\/ Common Tooltip Config (REQUIRED)\r\n const commonTooltipConfig = {\r\n callbacks: {\r\n title: function(tooltipItems) {\r\n const item = tooltipItems[0];\r\n let label = item.chart.data.labels[item.dataIndex];\r\n if (Array.isArray(label)) {\r\n return label.join(' ');\r\n } else {\r\n return label;\r\n }\r\n }\r\n },\r\n backgroundColor: 'rgba(13, 148, 136, 0.9)', \/\/ Teal background\r\n titleColor: '#ffffff',\r\n bodyColor: '#ffffff',\r\n padding: 12,\r\n cornerRadius: 8,\r\n displayColors: true\r\n };\r\n\r\n \/\/ --- CHART 1: PREVALENCE (DONUT) ---\r\n const ctxPrevalence = document.getElementById('prevalenceChart').getContext('2d');\r\n const labelsPrevalence = [\"MTSS (Medial Tibial Stress Syndrome)\", \"Tibial Stress Fracture\", \"Other Lower Leg Injuries\"];\r\n const splitLabelsPrevalence = labelsPrevalence.map(splitLabel);\r\n\r\n new Chart(ctxPrevalence, {\r\n type: 'doughnut',\r\n data: {\r\n labels: splitLabelsPrevalence,\r\n datasets: [{\r\n data: [15, 8, 77],\r\n backgroundColor: [\r\n '#0d9488', \/\/ Teal 600\r\n '#f97316', \/\/ Orange 500 (Alert)\r\n '#cbd5e1' \/\/ Slate 300\r\n ],\r\n borderWidth: 0,\r\n hoverOffset: 10\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n cutout: '65%',\r\n plugins: {\r\n legend: {\r\n position: 'bottom',\r\n labels: {\r\n usePointStyle: true,\r\n padding: 20\r\n }\r\n },\r\n tooltip: commonTooltipConfig\r\n }\r\n }\r\n });\r\n\r\n \/\/ --- CHART 2: RISK FACTORS (RADAR) ---\r\n const ctxRisk = document.getElementById('riskFactorChart').getContext('2d');\r\n const labelsRisk = [\r\n \"Navicular Drop (>10mm)\", \r\n \"Hip Abductor Weakness\", \r\n \"BMI > 25\", \r\n \"Training Volume Spike\", \r\n \"Surface Hardness\",\r\n \"Internal Rotation ROM\"\r\n ];\r\n const splitLabelsRisk = labelsRisk.map(splitLabel);\r\n\r\n new Chart(ctxRisk, {\r\n type: 'radar',\r\n data: {\r\n labels: splitLabelsRisk,\r\n datasets: [{\r\n label: '\u9ad8\u98ce\u9669\u8dd1\u8005\u7279\u5f81',\r\n data: [85, 70, 65, 90, 60, 75],\r\n fill: true,\r\n backgroundColor: 'rgba(249, 115, 22, 0.2)', \/\/ Orange transparent\r\n borderColor: '#f97316',\r\n pointBackgroundColor: '#f97316',\r\n pointBorderColor: '#fff',\r\n pointHoverBackgroundColor: '#fff',\r\n pointHoverBorderColor: '#f97316'\r\n }, {\r\n label: '\u5065\u5eb7\u5bf9\u7167\u7ec4',\r\n data: [30, 20, 25, 20, 40, 30],\r\n fill: true,\r\n backgroundColor: 'rgba(13, 148, 136, 0.2)', \/\/ Teal transparent\r\n borderColor: '#0d9488',\r\n pointBackgroundColor: '#0d9488',\r\n pointBorderColor: '#fff',\r\n pointHoverBackgroundColor: '#fff',\r\n pointHoverBorderColor: '#0d9488'\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: '#e2e8f0' },\r\n grid: { color: '#e2e8f0' },\r\n pointLabels: {\r\n font: { size: 11, weight: '600' },\r\n color: '#334155'\r\n },\r\n ticks: { display: false } \/\/ Hide numbers on axis\r\n }\r\n },\r\n plugins: {\r\n tooltip: commonTooltipConfig,\r\n legend: { position: 'top' }\r\n }\r\n }\r\n });\r\n\r\n \/\/ --- CHART 3: RETURN TO RUN (MIXED LINE\/BAR) ---\r\n const ctxRTR = document.getElementById('rtrChart').getContext('2d');\r\n \r\n new Chart(ctxRTR, {\r\n type: 'bar',\r\n data: {\r\n labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],\r\n datasets: [{\r\n label: '\u8dd1\u6b65\u603b\u91cf (\u5206\u949f)',\r\n data: [10, 15, 20, 18, 25, 30, 35, 40], \/\/ Deload at week 4\r\n backgroundColor: '#ccfbf1', \/\/ Teal 100\r\n borderColor: '#0d9488',\r\n borderWidth: 1,\r\n order: 2,\r\n yAxisID: 'y'\r\n }, {\r\n label: '\u75bc\u75db\u6307\u6570 (VAS)',\r\n data: [2, 3, 2, 1, 2, 1, 0, 0],\r\n type: 'line',\r\n borderColor: '#f97316', \/\/ Orange\r\n backgroundColor: '#f97316',\r\n borderWidth: 3,\r\n tension: 0.4,\r\n pointRadius: 4,\r\n order: 1,\r\n yAxisID: 'y1'\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n interaction: {\r\n mode: 'index',\r\n intersect: false,\r\n },\r\n scales: {\r\n y: {\r\n type: 'linear',\r\n display: true,\r\n position: 'left',\r\n title: { display: true, text: '\u65f6\u95f4 (min)' },\r\n grid: { display: false }\r\n },\r\n y1: {\r\n type: 'linear',\r\n display: true,\r\n position: 'right',\r\n min: 0,\r\n max: 10,\r\n title: { display: true, text: 'VAS \u75bc\u75db (0-10)' },\r\n grid: { color: '#f1f5f9' }\r\n },\r\n x: {\r\n grid: { display: false }\r\n }\r\n },\r\n plugins: {\r\n tooltip: commonTooltipConfig,\r\n legend: { position: 'bottom' }\r\n }\r\n }\r\n });\r\n\r\n \/\/ --- CHART 4: RECOVERY OUTCOMES (PLOTLY BOX PLOT) ---\r\n \/\/ Simulating distribution data for different MRI grades\r\n \r\n function generateData(n, mean, std) {\r\n const arr = [];\r\n for (let i = 0; i < n; i++) {\r\n arr.push(mean + (Math.random() - 0.5) * std * 2);\r\n }\r\n return arr;\r\n }\r\n\r\n const grade1Data = generateData(30, 21, 10); \/\/ ~3 weeks\r\n const grade2Data = generateData(30, 42, 14); \/\/ ~6 weeks\r\n const grade3Data = generateData(30, 70, 20); \/\/ ~10 weeks\r\n const grade4Data = generateData(30, 110, 30); \/\/ ~16+ weeks\r\n\r\n var trace1 = {\r\n y: grade1Data,\r\n type: 'box',\r\n name: 'Grade 1<br>(\u9aa8\u819c\u6c34\u80bf)',\r\n marker: {color: '#2dd4bf'}, \/\/ Teal 400\r\n boxpoints: false\r\n };\r\n\r\n var trace2 = {\r\n y: grade2Data,\r\n type: 'box',\r\n name: 'Grade 2<br>(\u9aa8\u9ad3\u6c34\u80bf)',\r\n marker: {color: '#0d9488'}, \/\/ Teal 600\r\n boxpoints: false\r\n };\r\n\r\n var trace3 = {\r\n y: grade3Data,\r\n type: 'box',\r\n name: 'Grade 3<br>(T1\/T2 \u5f02\u5e38)',\r\n marker: {color: '#f97316'}, \/\/ Orange 500\r\n boxpoints: false\r\n };\r\n\r\n var trace4 = {\r\n y: grade4Data,\r\n type: 'box',\r\n name: 'Grade 4<br>(\u76ae\u8d28\u9aa8\u6298)',\r\n marker: {color: '#991b1b'}, \/\/ Red 800\r\n boxpoints: 'all',\r\n jitter: 0.3,\r\n pointpos: -1.8\r\n };\r\n\r\n var data = [trace1, trace2, trace3, trace4];\r\n\r\n var layout = {\r\n title: {\r\n text: '\u91cd\u8fd4\u5b8c\u5168\u65e0\u75db\u8fd0\u52a8\u6240\u9700\u5929\u6570',\r\n font: { family: 'Noto Sans SC', size: 18, color: '#334155' }\r\n },\r\n yaxis: {\r\n title: '\u5929\u6570 (Days)',\r\n gridcolor: '#e2e8f0',\r\n zerolinecolor: '#e2e8f0'\r\n },\r\n xaxis: {\r\n title: 'MRI \u635f\u4f24\u5206\u7ea7 (Fredericson)',\r\n },\r\n paper_bgcolor: 'rgba(0,0,0,0)',\r\n plot_bgcolor: 'rgba(0,0,0,0)',\r\n margin: { t: 50, b: 50, l: 50, r: 20 },\r\n showlegend: false,\r\n \/\/ Force Canvas rendering if supported by browser\/library version, \r\n \/\/ though standard box plots in Plotly often default to SVG. \r\n \/\/ To strictly adhere to \"Prefer Canvas\/WebGL\", scattergl is usually used, \r\n \/\/ but Box plots are highly specific. We set config to image export as png (raster).\r\n };\r\n\r\n var config = {\r\n responsive: true,\r\n displayModeBar: false,\r\n renderer: 'canvas' \/\/ Attempt to force canvas path\r\n };\r\n\r\n Plotly.newPlot('recoveryPlot', data, layout, config);\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>MTSS & Tibial Stress Fracture: Conservative Treatm […]<\/p>\n","protected":false},"author":1,"featured_media":1800,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-1798","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\/mtss.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1798","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=1798"}],"version-history":[{"count":4,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1798\/revisions"}],"predecessor-version":[{"id":1803,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1798\/revisions\/1803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/media\/1800"}],"wp:attachment":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}