[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6898b1fbea5081918b4fc9e9c0e4c1b9","versionInt","title","贏的五種能力｜互動式資訊圖表","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Info, RotateCcw, MousePointerClick } from \"lucide-react\";\nimport {\n Radar,\n RadarChart,\n PolarGrid,\n PolarAngleAxis,\n PolarRadiusAxis,\n ResponsiveContainer,\n Tooltip as RechartsTooltip,\n} from \"recharts\";\n\nconst SKILLS = [\n {\n key: \"wang\",\n han: \"亡\",\n name: \"危機感與風險意識\",\n color: \"from-red-500 to-orange-500\",\n bullets: [\n \"隨時保持危機意識，預見可能的挑戰\",\n \"主動降低風險，提前佈局\",\n \"在壓力中保持清醒判斷\",\n ],\n examples: [\n \"專案啟動前先做風險清單與應變計畫\",\n \"建立預警指標（如延誤率、Bug 密度）\",\n ],\n tips: [\n \"每週回顧：列出三個最可能出錯的點\",\n \"設置『如果…那就…』的情境腳本\",\n ],\n },\n {\n key: \"kou\",\n han: \"口\",\n name: \"溝通與表達力\",\n color: \"from-amber-500 to-yellow-500\",\n bullets: [\n \"清楚傳達想法與目標\",\n \"善於傾聽與回饋\",\n \"用語言建立信任與影響力\",\n ],\n examples: [\n \"會議以目的→關鍵→決策順序表達\",\n \"用鏡射與轉述確認理解\",\n ],\n tips: [\n \"一句話版本：能否用 15 秒講清楚？\",\n \"先問後說：先問三個關鍵問題再提案\",\n ],\n },\n {\n key: \"yue\",\n han: \"月\",\n name: \"節奏與韌性\",\n color: \"from-sky-500 to-cyan-500\",\n bullets: [\n \"把握時機，掌握節奏\",\n \"像月亮盈虧般調整狀態\",\n \"面對波動保持穩定韌性\",\n ],\n examples: [\n \"工作採用衝刺節奏：衝刺→檢視→調整\",\n \"設計緩衝時程吸收不確定性\",\n ],\n tips: [\n \"為關鍵里程碑設『月相』節點：新月啟動、滿月交付\",\n \"建立恢復儀式：運動、睡眠、深呼吸\",\n ],\n },\n {\n key: \"bei\",\n han: \"貝\",\n name: \"資源與價值管理\",\n color: \"from-emerald-500 to-green-500\",\n bullets: [\n \"善用資源，創造最大價值\",\n \"投資時間與金錢在關鍵處\",\n \"具備資產增值思維\",\n ],\n examples: [\n \"用 80/20 找出最有價值的任務\",\n \"建立可重用的模板與程式碼庫\",\n ],\n tips: [\n \"先定價值指標再排優先序\",\n \"每月回顧個人資源配置（時間/金錢/人脈）\",\n ],\n },\n {\n key: \"fan\",\n han: \"凡\",\n name: \"謙遜與持續精進\",\n color: \"from-indigo-500 to-purple-500\",\n bullets: [\n \"保持謙遜，虛心學習\",\n \"不自滿於現有成就\",\n \"平凡中累積非凡成果\",\n ],\n examples: [\n \"每週學習與複盤 1 小時\",\n \"為同儕做分享與教學\",\n ],\n tips: [\n \"OODA 循環：觀察→定位→決策→行動\",\n \"建立成長日誌與回饋機制\",\n ],\n },\n] as const;\n\nconst CENTER = { x: 0, y: 0 } as const;\n\nfunction polarToCartesian(angleDeg: number, radius: number) {\n const angle = (angleDeg - 90) * (Math.PI / 180);\n return {\n x: CENTER.x + radius * Math.cos(angle),\n y: CENTER.y + radius * Math.sin(angle),\n };\n}\n\nexport default function WinFiveSkillsInteractive() {\n const [active, setActive] = useState<(typeof SKILLS)[number][\"key\"] | null>(null);\n const [scores, setScores] = useState(\n () => Object.fromEntries(SKILLS.map(s => [s.key, 60])) as Record\n );\n\n const dataForChart = useMemo(\n () =>\n SKILLS.map(s => ({\n subject: s.han,\n A: scores[s.key],\n fullMark: 100,\n })),\n [scores]\n );\n\n const layout = useMemo(() => {\n const radius = 160;\n const angles = [90, 18, 306, 234, 162]; // 均勻分佈（中心文本朝上）\n return SKILLS.map((s, i) => ({ s, ...polarToCartesian(angles[i], radius), angle: angles[i] }));\n }, []);\n\n const selected = SKILLS.find(s => s.key === active) ?? null;\n\n return (\n

贏的五種能力

將「贏」拆為亡、口、月、貝、凡，化為互動式資訊圖表與自我檢視

\n \n

\n\n

\n {/* 左側：互動圖 */}\n \n \n \n \n 互動圖：點選五字查看詳情\n \n \n \n

\n \n

\n \n \n\n {/* 右側：詳情卡 */}\n \n \n \n \n {selected ? (\n \n {selected.han} — {selected.name}\n \n ) : (\n 點選左側任一能力以查看詳情\n )}\n \n \n \n {selected ? (\n

關鍵要點

應用場景

提升方法

\n ) : (\n

從左側圖中選擇「亡、口、月、貝、凡」任一字，右側會顯示其對應的說明、範例與實作建議。

\n )}\n \n \n\n {/* 下方：自我檢視雷達圖 */}\n \n \n 自我檢視：我的五力雷達圖\n \n \n

\n \n \n \n \n \n `${v}`} />\n \n \n \n

\n {SKILLS.map((s) => (\n

\n {s.han} {s.name}\n

\n setScores((prev) => ({ ...prev, [s.key]: Number(e.target.value) }))}\n className=\"col-span-3\"\n aria-label={`${s.name} 分數`}\n />\n

{scores[s.key]}

\n ))}\n

拖曳滑桿為自己打分，雷達圖即時更新。

\n \n \n\n {/* 針對簡報的快速導覽卡 */}\n \n \n 投影片重點快速導覽\n \n \n {SKILLS.map((s) => (\n setActive(s.key)}\n className={`rounded-2xl p-4 text-left bg-gradient-to-br ${s.color} text-white shadow hover:shadow-md transition`}\n >\n

{s.han}

{s.name}

\n \n ))}\n \n \n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","1730212134424387194","traceTime",1777355032758]