[{"data":1,"prerenderedAt":2966},["ShallowReactive",2],{"blog:\u002Fblog\u002Fnuxt\u002Fnuxt-ui-dashboard":3},{"id":4,"title":5,"author":6,"body":7,"category":2950,"date":2951,"description":2952,"draft":2953,"extension":2954,"image":2955,"meta":2956,"navigation":159,"path":2957,"seo":2958,"series":2959,"seriesOrder":115,"seriesTitle":2960,"stem":2961,"tags":2962,"updatedAt":2955,"__hash__":2965},"blog\u002Fblog\u002Fnuxt\u002Fnuxt-ui-dashboard\u002Findex.md","Nuxt UI 4 Dashboard 實戰","charles",{"type":8,"value":9,"toc":2913},"minimark",[10,14,18,34,37,41,46,54,68,224,227,230,263,265,269,272,275,345,349,728,730,733,737,771,818,821,876,878,882,885,1183,1187,1310,1314,1317,1525,1527,1530,1534,1621,1624,1716,1720,1723,1825,1827,1830,1833,1840,1850,1894,1900,1928,1932,1938,1966,1970,1975,1984,2029,2031,2034,2038,2052,2055,2110,2112,2116,2818,2820,2823,2872,2874,2877,2909],[11,12,13],"h2",{"id":13},"這篇要解決什麼問題",[15,16,17],"p",{},"打造一個專業級的 Dashboard 介面需要考慮：",[19,20,21,25,28,31],"ul",{},[22,23,24],"li",{},"側邊欄的展開\u002F收合狀態管理",[22,26,27],{},"響應式設計（mobile\u002Fdesktop 切換）",[22,29,30],{},"導航選單的類型安全",[22,32,33],{},"主題配置與暗色模式",[35,36],"hr",{},[11,38,40],{"id":39},"nuxt-ui-4-核心概念","Nuxt UI 4 核心概念",[42,43,45],"h3",{"id":44},"uapp-根元件","UApp 根元件",[15,47,48,49,53],{},"所有 Nuxt UI 元件必須包裹在 ",[50,51,52],"code",{},"UApp"," 內，它提供：",[19,55,56,59,62,65],{},[22,57,58],{},"Toast 通知系統",[22,60,61],{},"Tooltip 功能",[22,63,64],{},"Overlay 管理",[22,66,67],{},"國際化（locale）",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { zh_tw } from \"@nuxt\u002Fui\u002Flocale\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUApp :locale=\"zh_tw\">\n    \u003CNuxtPage \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n","vue","",[50,76,77,113,144,154,161,171,193,205,215],{"__ignoreMap":74},[78,79,82,86,90,94,97,100,104,108,110],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sP7_E","\u003C",[78,87,89],{"class":88},"sQzsp","script",[78,91,93],{"class":92},"s9AJx"," setup",[78,95,96],{"class":92}," lang",[78,98,99],{"class":84},"=",[78,101,103],{"class":102},"sjJ54","\"",[78,105,107],{"class":106},"s_sjI","ts",[78,109,103],{"class":102},[78,111,112],{"class":84},">\n",[78,114,116,120,123,127,130,133,136,139,141],{"class":80,"line":115},2,[78,117,119],{"class":118},"sVHd0","import",[78,121,122],{"class":84}," {",[78,124,126],{"class":125},"su5hD"," zh_tw",[78,128,129],{"class":84}," }",[78,131,132],{"class":118}," from",[78,134,135],{"class":102}," \"",[78,137,138],{"class":106},"@nuxt\u002Fui\u002Flocale",[78,140,103],{"class":102},[78,142,143],{"class":84},";\n",[78,145,147,150,152],{"class":80,"line":146},3,[78,148,149],{"class":84},"\u003C\u002F",[78,151,89],{"class":88},[78,153,112],{"class":84},[78,155,157],{"class":80,"line":156},4,[78,158,160],{"emptyLinePlaceholder":159},true,"\n",[78,162,164,166,169],{"class":80,"line":163},5,[78,165,85],{"class":84},[78,167,168],{"class":88},"template",[78,170,112],{"class":84},[78,172,174,177,179,182,184,186,189,191],{"class":80,"line":173},6,[78,175,176],{"class":84},"  \u003C",[78,178,52],{"class":88},[78,180,181],{"class":92}," :locale",[78,183,99],{"class":84},[78,185,103],{"class":102},[78,187,188],{"class":106},"zh_tw",[78,190,103],{"class":102},[78,192,112],{"class":84},[78,194,196,199,202],{"class":80,"line":195},7,[78,197,198],{"class":84},"    \u003C",[78,200,201],{"class":88},"NuxtPage",[78,203,204],{"class":84}," \u002F>\n",[78,206,208,211,213],{"class":80,"line":207},8,[78,209,210],{"class":84},"  \u003C\u002F",[78,212,52],{"class":88},[78,214,112],{"class":84},[78,216,218,220,222],{"class":80,"line":217},9,[78,219,149],{"class":84},[78,221,168],{"class":88},[78,223,112],{"class":84},[42,225,226],{"id":226},"語系化",[15,228,229],{},"Nuxt UI 4 內建多國語系，包括繁體中文：",[69,231,235],{"className":232,"code":233,"language":234,"meta":74,"style":74},"language-typescript shiki shiki-themes material-theme-lighter github-light github-dark","import { zh_tw } from \"@nuxt\u002Fui\u002Flocale\";\n\u002F\u002F 元件內的文字（如 Select 的「無結果」）會自動翻譯\n","typescript",[50,236,237,257],{"__ignoreMap":74},[78,238,239,241,243,245,247,249,251,253,255],{"class":80,"line":81},[78,240,119],{"class":118},[78,242,122],{"class":84},[78,244,126],{"class":125},[78,246,129],{"class":84},[78,248,132],{"class":118},[78,250,135],{"class":102},[78,252,138],{"class":106},[78,254,103],{"class":102},[78,256,143],{"class":84},[78,258,259],{"class":80,"line":115},[78,260,262],{"class":261},"sutJx","\u002F\u002F 元件內的文字（如 Select 的「無結果」）會自動翻譯\n",[35,264],{},[11,266,268],{"id":267},"dashboard-元件組合","Dashboard 元件組合",[42,270,271],{"id":271},"核心架構",[15,273,274],{},"Nuxt UI 提供完整的 Dashboard 元件組合：",[276,277,278,291],"table",{},[279,280,281],"thead",{},[282,283,284,288],"tr",{},[285,286,287],"th",{},"元件",[285,289,290],{},"用途",[292,293,294,305,315,325,335],"tbody",{},[282,295,296,302],{},[297,298,299],"td",{},[50,300,301],{},"UDashboardGroup",[297,303,304],{},"包裹整個 Dashboard，管理側邊欄狀態",[282,306,307,312],{},[297,308,309],{},[50,310,311],{},"UDashboardSidebar",[297,313,314],{},"可收合、可調整大小的側邊欄",[282,316,317,322],{},[297,318,319],{},[50,320,321],{},"UDashboardPanel",[297,323,324],{},"主內容區域",[282,326,327,332],{},[297,328,329],{},[50,330,331],{},"UDashboardNavbar",[297,333,334],{},"頂部導航欄",[282,336,337,342],{},[297,338,339],{},[50,340,341],{},"UDashboardToolbar",[297,343,344],{},"導航欄下方的工具列",[42,346,348],{"id":347},"基本-layout-結構","基本 Layout 結構",[69,350,352],{"className":71,"code":351,"language":73,"meta":74,"style":74},"\u003Ctemplate>\n  \u003CUDashboardGroup unit=\"rem\">\n    \u003C!-- 側邊欄：桌面版 -->\n    \u003CUDashboardSidebar collapsible resizable class=\"hidden lg:flex\">\n      \u003Ctemplate #header>\n        \u003CLogo \u002F>\n      \u003C\u002Ftemplate>\n\n      \u003CUNavigationMenu :items=\"menuItems\" orientation=\"vertical\" \u002F>\n\n      \u003Ctemplate #footer>\n        \u003CUserMenu \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FUDashboardSidebar>\n\n    \u003C!-- 主內容區 -->\n    \u003CUDashboardPanel>\n      \u003CUDashboardNavbar>\n        \u003Ctemplate #leading>\n          \u003C!-- Mobile toggle -->\n          \u003CUDashboardSidebarToggle class=\"lg:hidden\" \u002F>\n          \u003C!-- Desktop collapse -->\n          \u003CUDashboardSidebarCollapse class=\"hidden lg:flex\" \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate #title>\n          {{ pageTitle }}\n        \u003C\u002Ftemplate>\n      \u003C\u002FUDashboardNavbar>\n\n      \u003Cslot \u002F>\n    \u003C\u002FUDashboardPanel>\n  \u003C\u002FUDashboardGroup>\n\u003C\u002Ftemplate>\n",[50,353,354,362,382,387,413,428,438,447,451,484,489,503,513,522,532,537,543,552,561,575,581,603,609,629,639,644,658,664,673,682,687,701,710,719],{"__ignoreMap":74},[78,355,356,358,360],{"class":80,"line":81},[78,357,85],{"class":84},[78,359,168],{"class":88},[78,361,112],{"class":84},[78,363,364,366,368,371,373,375,378,380],{"class":80,"line":115},[78,365,176],{"class":84},[78,367,301],{"class":88},[78,369,370],{"class":92}," unit",[78,372,99],{"class":84},[78,374,103],{"class":102},[78,376,377],{"class":106},"rem",[78,379,103],{"class":102},[78,381,112],{"class":84},[78,383,384],{"class":80,"line":146},[78,385,386],{"class":261},"    \u003C!-- 側邊欄：桌面版 -->\n",[78,388,389,391,393,396,399,402,404,406,409,411],{"class":80,"line":156},[78,390,198],{"class":84},[78,392,311],{"class":88},[78,394,395],{"class":92}," collapsible",[78,397,398],{"class":92}," resizable",[78,400,401],{"class":92}," class",[78,403,99],{"class":84},[78,405,103],{"class":102},[78,407,408],{"class":106},"hidden lg:flex",[78,410,103],{"class":102},[78,412,112],{"class":84},[78,414,415,418,420,423,426],{"class":80,"line":163},[78,416,417],{"class":84},"      \u003C",[78,419,168],{"class":88},[78,421,422],{"class":84}," #",[78,424,425],{"class":92},"header",[78,427,112],{"class":84},[78,429,430,433,436],{"class":80,"line":173},[78,431,432],{"class":84},"        \u003C",[78,434,435],{"class":88},"Logo",[78,437,204],{"class":84},[78,439,440,443,445],{"class":80,"line":195},[78,441,442],{"class":84},"      \u003C\u002F",[78,444,168],{"class":88},[78,446,112],{"class":84},[78,448,449],{"class":80,"line":207},[78,450,160],{"emptyLinePlaceholder":159},[78,452,453,455,458,461,463,465,468,470,473,475,477,480,482],{"class":80,"line":217},[78,454,417],{"class":84},[78,456,457],{"class":88},"UNavigationMenu",[78,459,460],{"class":92}," :items",[78,462,99],{"class":84},[78,464,103],{"class":102},[78,466,467],{"class":106},"menuItems",[78,469,103],{"class":102},[78,471,472],{"class":92}," orientation",[78,474,99],{"class":84},[78,476,103],{"class":102},[78,478,479],{"class":106},"vertical",[78,481,103],{"class":102},[78,483,204],{"class":84},[78,485,487],{"class":80,"line":486},10,[78,488,160],{"emptyLinePlaceholder":159},[78,490,492,494,496,498,501],{"class":80,"line":491},11,[78,493,417],{"class":84},[78,495,168],{"class":88},[78,497,422],{"class":84},[78,499,500],{"class":92},"footer",[78,502,112],{"class":84},[78,504,506,508,511],{"class":80,"line":505},12,[78,507,432],{"class":84},[78,509,510],{"class":88},"UserMenu",[78,512,204],{"class":84},[78,514,516,518,520],{"class":80,"line":515},13,[78,517,442],{"class":84},[78,519,168],{"class":88},[78,521,112],{"class":84},[78,523,525,528,530],{"class":80,"line":524},14,[78,526,527],{"class":84},"    \u003C\u002F",[78,529,311],{"class":88},[78,531,112],{"class":84},[78,533,535],{"class":80,"line":534},15,[78,536,160],{"emptyLinePlaceholder":159},[78,538,540],{"class":80,"line":539},16,[78,541,542],{"class":261},"    \u003C!-- 主內容區 -->\n",[78,544,546,548,550],{"class":80,"line":545},17,[78,547,198],{"class":84},[78,549,321],{"class":88},[78,551,112],{"class":84},[78,553,555,557,559],{"class":80,"line":554},18,[78,556,417],{"class":84},[78,558,331],{"class":88},[78,560,112],{"class":84},[78,562,564,566,568,570,573],{"class":80,"line":563},19,[78,565,432],{"class":84},[78,567,168],{"class":88},[78,569,422],{"class":84},[78,571,572],{"class":92},"leading",[78,574,112],{"class":84},[78,576,578],{"class":80,"line":577},20,[78,579,580],{"class":261},"          \u003C!-- Mobile toggle -->\n",[78,582,584,587,590,592,594,596,599,601],{"class":80,"line":583},21,[78,585,586],{"class":84},"          \u003C",[78,588,589],{"class":88},"UDashboardSidebarToggle",[78,591,401],{"class":92},[78,593,99],{"class":84},[78,595,103],{"class":102},[78,597,598],{"class":106},"lg:hidden",[78,600,103],{"class":102},[78,602,204],{"class":84},[78,604,606],{"class":80,"line":605},22,[78,607,608],{"class":261},"          \u003C!-- Desktop collapse -->\n",[78,610,612,614,617,619,621,623,625,627],{"class":80,"line":611},23,[78,613,586],{"class":84},[78,615,616],{"class":88},"UDashboardSidebarCollapse",[78,618,401],{"class":92},[78,620,99],{"class":84},[78,622,103],{"class":102},[78,624,408],{"class":106},[78,626,103],{"class":102},[78,628,204],{"class":84},[78,630,632,635,637],{"class":80,"line":631},24,[78,633,634],{"class":84},"        \u003C\u002F",[78,636,168],{"class":88},[78,638,112],{"class":84},[78,640,642],{"class":80,"line":641},25,[78,643,160],{"emptyLinePlaceholder":159},[78,645,647,649,651,653,656],{"class":80,"line":646},26,[78,648,432],{"class":84},[78,650,168],{"class":88},[78,652,422],{"class":84},[78,654,655],{"class":92},"title",[78,657,112],{"class":84},[78,659,661],{"class":80,"line":660},27,[78,662,663],{"class":125},"          {{ pageTitle }}\n",[78,665,667,669,671],{"class":80,"line":666},28,[78,668,634],{"class":84},[78,670,168],{"class":88},[78,672,112],{"class":84},[78,674,676,678,680],{"class":80,"line":675},29,[78,677,442],{"class":84},[78,679,331],{"class":88},[78,681,112],{"class":84},[78,683,685],{"class":80,"line":684},30,[78,686,160],{"emptyLinePlaceholder":159},[78,688,690,692,695,699],{"class":80,"line":689},31,[78,691,417],{"class":84},[78,693,694],{"class":88},"slot",[78,696,698],{"class":697},"svtyB"," \u002F",[78,700,112],{"class":84},[78,702,704,706,708],{"class":80,"line":703},32,[78,705,527],{"class":84},[78,707,321],{"class":88},[78,709,112],{"class":84},[78,711,713,715,717],{"class":80,"line":712},33,[78,714,210],{"class":84},[78,716,301],{"class":88},[78,718,112],{"class":84},[78,720,722,724,726],{"class":80,"line":721},34,[78,723,149],{"class":84},[78,725,168],{"class":88},[78,727,112],{"class":84},[35,729],{},[11,731,732],{"id":732},"側邊欄狀態管理",[42,734,736],{"id":735},"collapsible-vs-resizable","collapsible vs resizable",[276,738,739,749],{},[279,740,741],{},[282,742,743,746],{},[285,744,745],{},"Props",[285,747,748],{},"效果",[292,750,751,761],{},[282,752,753,758],{},[297,754,755],{},[50,756,757],{},"collapsible",[297,759,760],{},"可以完全收合成只顯示 icon",[282,762,763,768],{},[297,764,765],{},[50,766,767],{},"resizable",[297,769,770],{},"可以拖曳調整寬度",[69,772,774],{"className":71,"code":773,"language":73,"meta":74,"style":74},"\u003CUDashboardSidebar collapsible resizable :min-width=\"200\" :max-width=\"400\" \u002F>\n",[50,775,776],{"__ignoreMap":74},[78,777,778,780,782,784,786,789,792,794,796,800,802,804,807,809,811,814,816],{"class":80,"line":81},[78,779,85],{"class":84},[78,781,311],{"class":88},[78,783,395],{"class":92},[78,785,398],{"class":92},[78,787,788],{"class":84}," :",[78,790,791],{"class":92},"min-width",[78,793,99],{"class":84},[78,795,103],{"class":102},[78,797,799],{"class":798},"srdBf","200",[78,801,103],{"class":102},[78,803,788],{"class":84},[78,805,806],{"class":92},"max-width",[78,808,99],{"class":84},[78,810,103],{"class":102},[78,812,813],{"class":798},"400",[78,815,103],{"class":102},[78,817,204],{"class":84},[42,819,820],{"id":820},"收合按鈕",[69,822,824],{"className":71,"code":823,"language":73,"meta":74,"style":74},"\u003C!-- 桌面版：收合按鈕 -->\n\u003CUDashboardSidebarCollapse class=\"hidden lg:flex\" \u002F>\n\n\u003C!-- 手機版：漢堡選單 -->\n\u003CUDashboardSidebarToggle class=\"lg:hidden\" \u002F>\n",[50,825,826,831,849,853,858],{"__ignoreMap":74},[78,827,828],{"class":80,"line":81},[78,829,830],{"class":261},"\u003C!-- 桌面版：收合按鈕 -->\n",[78,832,833,835,837,839,841,843,845,847],{"class":80,"line":115},[78,834,85],{"class":84},[78,836,616],{"class":88},[78,838,401],{"class":92},[78,840,99],{"class":84},[78,842,103],{"class":102},[78,844,408],{"class":106},[78,846,103],{"class":102},[78,848,204],{"class":84},[78,850,851],{"class":80,"line":146},[78,852,160],{"emptyLinePlaceholder":159},[78,854,855],{"class":80,"line":156},[78,856,857],{"class":261},"\u003C!-- 手機版：漢堡選單 -->\n",[78,859,860,862,864,866,868,870,872,874],{"class":80,"line":163},[78,861,85],{"class":84},[78,863,589],{"class":88},[78,865,401],{"class":92},[78,867,99],{"class":84},[78,869,103],{"class":102},[78,871,598],{"class":106},[78,873,103],{"class":102},[78,875,204],{"class":84},[35,877],{},[11,879,881],{"id":880},"navigationmenu-導航選單","NavigationMenu 導航選單",[42,883,884],{"id":884},"類型安全的選單項目",[69,886,888],{"className":232,"code":887,"language":234,"meta":74,"style":74},"import type { NavigationMenuItem } from \"@nuxt\u002Fui\";\n\nconst menuItems: NavigationMenuItem[] = [\n  {\n    label: \"首頁\",\n    icon: \"i-lucide-house\",\n    to: \"\u002F\",\n  },\n  {\n    label: \"設定\",\n    icon: \"i-lucide-settings\",\n    to: \"\u002Fsettings\",\n  },\n  {\n    label: \"使用者管理\",\n    icon: \"i-lucide-users\",\n    children: [\n      { label: \"使用者列表\", to: \"\u002Fusers\" },\n      { label: \"新增使用者\", to: \"\u002Fusers\u002Fnew\" },\n    ],\n  },\n];\n",[50,889,890,915,919,944,949,967,983,999,1004,1008,1023,1038,1053,1057,1061,1076,1091,1100,1135,1165,1172,1176],{"__ignoreMap":74},[78,891,892,894,897,899,902,904,906,908,911,913],{"class":80,"line":81},[78,893,119],{"class":118},[78,895,896],{"class":118}," type",[78,898,122],{"class":84},[78,900,901],{"class":125}," NavigationMenuItem",[78,903,129],{"class":84},[78,905,132],{"class":118},[78,907,135],{"class":102},[78,909,910],{"class":106},"@nuxt\u002Fui",[78,912,103],{"class":102},[78,914,143],{"class":84},[78,916,917],{"class":80,"line":115},[78,918,160],{"emptyLinePlaceholder":159},[78,920,921,925,929,933,936,939,941],{"class":80,"line":146},[78,922,924],{"class":923},"sbsja","const",[78,926,928],{"class":927},"s_hVV"," menuItems",[78,930,932],{"class":931},"smGrS",":",[78,934,901],{"class":935},"sbgvK",[78,937,938],{"class":125},"[] ",[78,940,99],{"class":931},[78,942,943],{"class":125}," [\n",[78,945,946],{"class":80,"line":156},[78,947,948],{"class":84},"  {\n",[78,950,951,955,957,959,962,964],{"class":80,"line":163},[78,952,954],{"class":953},"skxfh","    label",[78,956,932],{"class":84},[78,958,135],{"class":102},[78,960,961],{"class":106},"首頁",[78,963,103],{"class":102},[78,965,966],{"class":84},",\n",[78,968,969,972,974,976,979,981],{"class":80,"line":173},[78,970,971],{"class":953},"    icon",[78,973,932],{"class":84},[78,975,135],{"class":102},[78,977,978],{"class":106},"i-lucide-house",[78,980,103],{"class":102},[78,982,966],{"class":84},[78,984,985,988,990,992,995,997],{"class":80,"line":195},[78,986,987],{"class":953},"    to",[78,989,932],{"class":84},[78,991,135],{"class":102},[78,993,994],{"class":106},"\u002F",[78,996,103],{"class":102},[78,998,966],{"class":84},[78,1000,1001],{"class":80,"line":207},[78,1002,1003],{"class":84},"  },\n",[78,1005,1006],{"class":80,"line":217},[78,1007,948],{"class":84},[78,1009,1010,1012,1014,1016,1019,1021],{"class":80,"line":486},[78,1011,954],{"class":953},[78,1013,932],{"class":84},[78,1015,135],{"class":102},[78,1017,1018],{"class":106},"設定",[78,1020,103],{"class":102},[78,1022,966],{"class":84},[78,1024,1025,1027,1029,1031,1034,1036],{"class":80,"line":491},[78,1026,971],{"class":953},[78,1028,932],{"class":84},[78,1030,135],{"class":102},[78,1032,1033],{"class":106},"i-lucide-settings",[78,1035,103],{"class":102},[78,1037,966],{"class":84},[78,1039,1040,1042,1044,1046,1049,1051],{"class":80,"line":505},[78,1041,987],{"class":953},[78,1043,932],{"class":84},[78,1045,135],{"class":102},[78,1047,1048],{"class":106},"\u002Fsettings",[78,1050,103],{"class":102},[78,1052,966],{"class":84},[78,1054,1055],{"class":80,"line":515},[78,1056,1003],{"class":84},[78,1058,1059],{"class":80,"line":524},[78,1060,948],{"class":84},[78,1062,1063,1065,1067,1069,1072,1074],{"class":80,"line":534},[78,1064,954],{"class":953},[78,1066,932],{"class":84},[78,1068,135],{"class":102},[78,1070,1071],{"class":106},"使用者管理",[78,1073,103],{"class":102},[78,1075,966],{"class":84},[78,1077,1078,1080,1082,1084,1087,1089],{"class":80,"line":539},[78,1079,971],{"class":953},[78,1081,932],{"class":84},[78,1083,135],{"class":102},[78,1085,1086],{"class":106},"i-lucide-users",[78,1088,103],{"class":102},[78,1090,966],{"class":84},[78,1092,1093,1096,1098],{"class":80,"line":545},[78,1094,1095],{"class":953},"    children",[78,1097,932],{"class":84},[78,1099,943],{"class":125},[78,1101,1102,1105,1108,1110,1112,1115,1117,1120,1123,1125,1127,1130,1132],{"class":80,"line":554},[78,1103,1104],{"class":84},"      {",[78,1106,1107],{"class":953}," label",[78,1109,932],{"class":84},[78,1111,135],{"class":102},[78,1113,1114],{"class":106},"使用者列表",[78,1116,103],{"class":102},[78,1118,1119],{"class":84},",",[78,1121,1122],{"class":953}," to",[78,1124,932],{"class":84},[78,1126,135],{"class":102},[78,1128,1129],{"class":106},"\u002Fusers",[78,1131,103],{"class":102},[78,1133,1134],{"class":84}," },\n",[78,1136,1137,1139,1141,1143,1145,1148,1150,1152,1154,1156,1158,1161,1163],{"class":80,"line":563},[78,1138,1104],{"class":84},[78,1140,1107],{"class":953},[78,1142,932],{"class":84},[78,1144,135],{"class":102},[78,1146,1147],{"class":106},"新增使用者",[78,1149,103],{"class":102},[78,1151,1119],{"class":84},[78,1153,1122],{"class":953},[78,1155,932],{"class":84},[78,1157,135],{"class":102},[78,1159,1160],{"class":106},"\u002Fusers\u002Fnew",[78,1162,103],{"class":102},[78,1164,1134],{"class":84},[78,1166,1167,1170],{"class":80,"line":577},[78,1168,1169],{"class":125},"    ]",[78,1171,966],{"class":84},[78,1173,1174],{"class":80,"line":583},[78,1175,1003],{"class":84},[78,1177,1178,1181],{"class":80,"line":605},[78,1179,1180],{"class":125},"]",[78,1182,143],{"class":84},[42,1184,1186],{"id":1185},"navigationmenuitem-常用屬性","NavigationMenuItem 常用屬性",[276,1188,1189,1202],{},[279,1190,1191],{},[282,1192,1193,1196,1199],{},[285,1194,1195],{},"屬性",[285,1197,1198],{},"類型",[285,1200,1201],{},"說明",[292,1203,1204,1219,1236,1250,1265,1280,1295],{},[282,1205,1206,1211,1216],{},[297,1207,1208],{},[50,1209,1210],{},"label",[297,1212,1213],{},[50,1214,1215],{},"string",[297,1217,1218],{},"顯示文字",[282,1220,1221,1226,1230],{},[297,1222,1223],{},[50,1224,1225],{},"icon",[297,1227,1228],{},[50,1229,1215],{},[297,1231,1232,1233,1235],{},"Iconify 圖示（如 ",[50,1234,978],{},"）",[282,1237,1238,1243,1247],{},[297,1239,1240],{},[50,1241,1242],{},"to",[297,1244,1245],{},[50,1246,1215],{},[297,1248,1249],{},"路由路徑",[282,1251,1252,1257,1262],{},[297,1253,1254],{},[50,1255,1256],{},"badge",[297,1258,1259],{},[50,1260,1261],{},"string | number",[297,1263,1264],{},"右側徽章",[282,1266,1267,1272,1277],{},[297,1268,1269],{},[50,1270,1271],{},"disabled",[297,1273,1274],{},[50,1275,1276],{},"boolean",[297,1278,1279],{},"是否禁用",[282,1281,1282,1287,1292],{},[297,1283,1284],{},[50,1285,1286],{},"children",[297,1288,1289],{},[50,1290,1291],{},"NavigationMenuItem[]",[297,1293,1294],{},"子選單",[282,1296,1297,1302,1307],{},[297,1298,1299],{},[50,1300,1301],{},"onSelect",[297,1303,1304],{},[50,1305,1306],{},"(e: Event) => void",[297,1308,1309],{},"點擊事件",[42,1311,1313],{"id":1312},"mobile-關閉側邊欄的技巧","Mobile 關閉側邊欄的技巧",[15,1315,1316],{},"在 mobile 版本，點擊選單項目後需要關閉側邊欄：",[69,1318,1320],{"className":71,"code":1319,"language":73,"meta":74,"style":74},"\u003Cscript setup lang=\"ts\">\nconst isMobile = useMediaQuery(\"(max-width: 1024px)\");\n\nconst menuItems = computed\u003CNavigationMenuItem[]>(() => [\n  {\n    label: \"首頁\",\n    icon: \"i-lucide-house\",\n    to: \"\u002F\",\n    onSelect: () => {\n      if (isMobile.value) {\n        \u002F\u002F 觸發側邊欄關閉\n      }\n    },\n  },\n]);\n\u003C\u002Fscript>\n",[50,1321,1322,1342,1371,1375,1407,1411,1425,1439,1453,1468,1491,1496,1501,1506,1510,1517],{"__ignoreMap":74},[78,1323,1324,1326,1328,1330,1332,1334,1336,1338,1340],{"class":80,"line":81},[78,1325,85],{"class":84},[78,1327,89],{"class":88},[78,1329,93],{"class":92},[78,1331,96],{"class":92},[78,1333,99],{"class":84},[78,1335,103],{"class":102},[78,1337,107],{"class":106},[78,1339,103],{"class":102},[78,1341,112],{"class":84},[78,1343,1344,1346,1349,1352,1356,1359,1361,1364,1366,1369],{"class":80,"line":115},[78,1345,924],{"class":923},[78,1347,1348],{"class":927}," isMobile",[78,1350,1351],{"class":931}," =",[78,1353,1355],{"class":1354},"sGLFI"," useMediaQuery",[78,1357,1358],{"class":125},"(",[78,1360,103],{"class":102},[78,1362,1363],{"class":106},"(max-width: 1024px)",[78,1365,103],{"class":102},[78,1367,1368],{"class":125},")",[78,1370,143],{"class":84},[78,1372,1373],{"class":80,"line":146},[78,1374,160],{"emptyLinePlaceholder":159},[78,1376,1377,1379,1381,1383,1386,1388,1391,1394,1397,1399,1402,1405],{"class":80,"line":156},[78,1378,924],{"class":923},[78,1380,928],{"class":927},[78,1382,1351],{"class":931},[78,1384,1385],{"class":1354}," computed",[78,1387,85],{"class":84},[78,1389,1390],{"class":935},"NavigationMenuItem",[78,1392,1393],{"class":125},"[]",[78,1395,1396],{"class":84},">",[78,1398,1358],{"class":125},[78,1400,1401],{"class":84},"()",[78,1403,1404],{"class":923}," =>",[78,1406,943],{"class":125},[78,1408,1409],{"class":80,"line":163},[78,1410,948],{"class":84},[78,1412,1413,1415,1417,1419,1421,1423],{"class":80,"line":173},[78,1414,954],{"class":953},[78,1416,932],{"class":84},[78,1418,135],{"class":102},[78,1420,961],{"class":106},[78,1422,103],{"class":102},[78,1424,966],{"class":84},[78,1426,1427,1429,1431,1433,1435,1437],{"class":80,"line":195},[78,1428,971],{"class":953},[78,1430,932],{"class":84},[78,1432,135],{"class":102},[78,1434,978],{"class":106},[78,1436,103],{"class":102},[78,1438,966],{"class":84},[78,1440,1441,1443,1445,1447,1449,1451],{"class":80,"line":207},[78,1442,987],{"class":953},[78,1444,932],{"class":84},[78,1446,135],{"class":102},[78,1448,994],{"class":106},[78,1450,103],{"class":102},[78,1452,966],{"class":84},[78,1454,1455,1458,1460,1463,1465],{"class":80,"line":217},[78,1456,1457],{"class":1354},"    onSelect",[78,1459,932],{"class":84},[78,1461,1462],{"class":84}," ()",[78,1464,1404],{"class":923},[78,1466,1467],{"class":84}," {\n",[78,1469,1470,1473,1476,1479,1482,1485,1488],{"class":80,"line":486},[78,1471,1472],{"class":118},"      if",[78,1474,1475],{"class":953}," (",[78,1477,1478],{"class":125},"isMobile",[78,1480,1481],{"class":84},".",[78,1483,1484],{"class":125},"value",[78,1486,1487],{"class":953},") ",[78,1489,1490],{"class":84},"{\n",[78,1492,1493],{"class":80,"line":491},[78,1494,1495],{"class":261},"        \u002F\u002F 觸發側邊欄關閉\n",[78,1497,1498],{"class":80,"line":505},[78,1499,1500],{"class":84},"      }\n",[78,1502,1503],{"class":80,"line":515},[78,1504,1505],{"class":84},"    },\n",[78,1507,1508],{"class":80,"line":524},[78,1509,1003],{"class":84},[78,1511,1512,1515],{"class":80,"line":534},[78,1513,1514],{"class":125},"])",[78,1516,143],{"class":84},[78,1518,1519,1521,1523],{"class":80,"line":539},[78,1520,149],{"class":84},[78,1522,89],{"class":88},[78,1524,112],{"class":84},[35,1526],{},[11,1528,1529],{"id":1529},"主題配置",[42,1531,1533],{"id":1532},"appconfigts","app.config.ts",[69,1535,1537],{"className":232,"code":1536,"language":234,"meta":74,"style":74},"export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: \"blue\",\n      neutral: \"zinc\",\n    },\n  },\n});\n",[50,1538,1539,1554,1563,1572,1588,1604,1608,1612],{"__ignoreMap":74},[78,1540,1541,1544,1547,1550,1552],{"class":80,"line":81},[78,1542,1543],{"class":118},"export",[78,1545,1546],{"class":118}," default",[78,1548,1549],{"class":1354}," defineAppConfig",[78,1551,1358],{"class":125},[78,1553,1490],{"class":84},[78,1555,1556,1559,1561],{"class":80,"line":115},[78,1557,1558],{"class":953},"  ui",[78,1560,932],{"class":84},[78,1562,1467],{"class":84},[78,1564,1565,1568,1570],{"class":80,"line":146},[78,1566,1567],{"class":953},"    colors",[78,1569,932],{"class":84},[78,1571,1467],{"class":84},[78,1573,1574,1577,1579,1581,1584,1586],{"class":80,"line":156},[78,1575,1576],{"class":953},"      primary",[78,1578,932],{"class":84},[78,1580,135],{"class":102},[78,1582,1583],{"class":106},"blue",[78,1585,103],{"class":102},[78,1587,966],{"class":84},[78,1589,1590,1593,1595,1597,1600,1602],{"class":80,"line":163},[78,1591,1592],{"class":953},"      neutral",[78,1594,932],{"class":84},[78,1596,135],{"class":102},[78,1598,1599],{"class":106},"zinc",[78,1601,103],{"class":102},[78,1603,966],{"class":84},[78,1605,1606],{"class":80,"line":173},[78,1607,1505],{"class":84},[78,1609,1610],{"class":80,"line":195},[78,1611,1003],{"class":84},[78,1613,1614,1617,1619],{"class":80,"line":207},[78,1615,1616],{"class":84},"}",[78,1618,1368],{"class":125},[78,1620,143],{"class":84},[42,1622,1623],{"id":1623},"語意化顏色",[276,1625,1626,1638],{},[279,1627,1628],{},[282,1629,1630,1633,1636],{},[285,1631,1632],{},"顏色",[285,1634,1635],{},"預設值",[285,1637,290],{},[292,1639,1640,1653,1665,1677,1690,1703],{},[282,1641,1642,1647,1650],{},[297,1643,1644],{},[50,1645,1646],{},"primary",[297,1648,1649],{},"green",[297,1651,1652],{},"CTA、品牌色、重要連結",[282,1654,1655,1660,1662],{},[297,1656,1657],{},[50,1658,1659],{},"secondary",[297,1661,1583],{},[297,1663,1664],{},"次要按鈕",[282,1666,1667,1672,1674],{},[297,1668,1669],{},[50,1670,1671],{},"success",[297,1673,1649],{},[297,1675,1676],{},"成功訊息",[282,1678,1679,1684,1687],{},[297,1680,1681],{},[50,1682,1683],{},"error",[297,1685,1686],{},"red",[297,1688,1689],{},"錯誤訊息、危險操作",[282,1691,1692,1697,1700],{},[297,1693,1694],{},[50,1695,1696],{},"warning",[297,1698,1699],{},"yellow",[297,1701,1702],{},"警告訊息",[282,1704,1705,1710,1713],{},[297,1706,1707],{},[50,1708,1709],{},"neutral",[297,1711,1712],{},"slate",[297,1714,1715],{},"文字、邊框、禁用狀態",[42,1717,1719],{"id":1718},"css-變數","CSS 變數",[15,1721,1722],{},"Nuxt UI 4 提供語意化的 CSS 變數：",[69,1724,1728],{"className":1725,"code":1726,"language":1727,"meta":74,"style":74},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","\u002F* 文字 *\u002F\n.text-dimmed    \u002F* 佔位符、提示 *\u002F\n.text-muted     \u002F* 次要文字 *\u002F\n.text-default   \u002F* 主要文字 *\u002F\n.text-highlighted \u002F* 標題、強調 *\u002F\n\n\u002F* 背景 *\u002F\n.bg-default     \u002F* 頁面背景 *\u002F\n.bg-muted       \u002F* 區塊背景 *\u002F\n.bg-elevated    \u002F* 卡片、Modal *\u002F\n.bg-accented    \u002F* Hover 狀態 *\u002F\n","css",[50,1729,1730,1735,1746,1756,1766,1776,1780,1785,1795,1805,1815],{"__ignoreMap":74},[78,1731,1732],{"class":80,"line":81},[78,1733,1734],{"class":261},"\u002F* 文字 *\u002F\n",[78,1736,1737,1740,1743],{"class":80,"line":115},[78,1738,1481],{"class":1739},"stp6e",[78,1741,1742],{"class":935},"text-dimmed",[78,1744,1745],{"class":261},"    \u002F* 佔位符、提示 *\u002F\n",[78,1747,1748,1750,1753],{"class":80,"line":146},[78,1749,1481],{"class":1739},[78,1751,1752],{"class":935},"text-muted",[78,1754,1755],{"class":261},"     \u002F* 次要文字 *\u002F\n",[78,1757,1758,1760,1763],{"class":80,"line":156},[78,1759,1481],{"class":1739},[78,1761,1762],{"class":935},"text-default",[78,1764,1765],{"class":261},"   \u002F* 主要文字 *\u002F\n",[78,1767,1768,1770,1773],{"class":80,"line":163},[78,1769,1481],{"class":1739},[78,1771,1772],{"class":935},"text-highlighted",[78,1774,1775],{"class":261}," \u002F* 標題、強調 *\u002F\n",[78,1777,1778],{"class":80,"line":173},[78,1779,160],{"emptyLinePlaceholder":159},[78,1781,1782],{"class":80,"line":195},[78,1783,1784],{"class":261},"\u002F* 背景 *\u002F\n",[78,1786,1787,1789,1792],{"class":80,"line":207},[78,1788,1481],{"class":1739},[78,1790,1791],{"class":935},"bg-default",[78,1793,1794],{"class":261},"     \u002F* 頁面背景 *\u002F\n",[78,1796,1797,1799,1802],{"class":80,"line":217},[78,1798,1481],{"class":1739},[78,1800,1801],{"class":935},"bg-muted",[78,1803,1804],{"class":261},"       \u002F* 區塊背景 *\u002F\n",[78,1806,1807,1809,1812],{"class":80,"line":486},[78,1808,1481],{"class":1739},[78,1810,1811],{"class":935},"bg-elevated",[78,1813,1814],{"class":261},"    \u002F* 卡片、Modal *\u002F\n",[78,1816,1817,1819,1822],{"class":80,"line":491},[78,1818,1481],{"class":1739},[78,1820,1821],{"class":935},"bg-accented",[78,1823,1824],{"class":261},"    \u002F* Hover 狀態 *\u002F\n",[35,1826],{},[11,1828,1829],{"id":1829},"踩坑經驗",[42,1831,1832],{"id":1832},"響應式設計的陷阱",[15,1834,1835,1839],{},[1836,1837,1838],"strong",{},"問題","：Desktop 和 Mobile 使用不同的側邊欄顯示方式。",[15,1841,1842,1845,1846,1849],{},[1836,1843,1844],{},"錯誤做法","：使用 ",[50,1847,1848],{},"v-if"," 切換：",[69,1851,1853],{"className":71,"code":1852,"language":73,"meta":74,"style":74},"\u003C!-- ❌ 會導致狀態丟失 -->\n\u003CUDashboardSidebar v-if=\"!isMobile\" \u002F>\n\u003CUDashboardSidebarMobile v-else \u002F>\n",[50,1854,1855,1860,1882],{"__ignoreMap":74},[78,1856,1857],{"class":80,"line":81},[78,1858,1859],{"class":261},"\u003C!-- ❌ 會導致狀態丟失 -->\n",[78,1861,1862,1864,1866,1869,1871,1873,1876,1878,1880],{"class":80,"line":115},[78,1863,85],{"class":84},[78,1865,311],{"class":88},[78,1867,1868],{"class":118}," v-if",[78,1870,99],{"class":84},[78,1872,103],{"class":102},[78,1874,1875],{"class":931},"!",[78,1877,1478],{"class":125},[78,1879,103],{"class":102},[78,1881,204],{"class":84},[78,1883,1884,1886,1889,1892],{"class":80,"line":146},[78,1885,85],{"class":84},[78,1887,1888],{"class":88},"UDashboardSidebarMobile",[78,1890,1891],{"class":118}," v-else",[78,1893,204],{"class":84},[15,1895,1896,1899],{},[1836,1897,1898],{},"正確做法","：使用 CSS class 控制：",[69,1901,1903],{"className":71,"code":1902,"language":73,"meta":74,"style":74},"\u003C!-- ✅ 同一個元件，用 CSS 控制顯示 -->\n\u003CUDashboardSidebar class=\"hidden lg:flex\" \u002F>\n",[50,1904,1905,1910],{"__ignoreMap":74},[78,1906,1907],{"class":80,"line":81},[78,1908,1909],{"class":261},"\u003C!-- ✅ 同一個元件，用 CSS 控制顯示 -->\n",[78,1911,1912,1914,1916,1918,1920,1922,1924,1926],{"class":80,"line":115},[78,1913,85],{"class":84},[78,1915,311],{"class":88},[78,1917,401],{"class":92},[78,1919,99],{"class":84},[78,1921,103],{"class":102},[78,1923,408],{"class":106},[78,1925,103],{"class":102},[78,1927,204],{"class":84},[42,1929,1931],{"id":1930},"udashboardgroup-unit-設定","UDashboardGroup unit 設定",[15,1933,1934,1937],{},[50,1935,1936],{},"unit"," 決定側邊欄寬度的單位：",[69,1939,1941],{"className":71,"code":1940,"language":73,"meta":74,"style":74},"\u003C!-- rem 更適合響應式設計 -->\n\u003CUDashboardGroup unit=\"rem\">\n",[50,1942,1943,1948],{"__ignoreMap":74},[78,1944,1945],{"class":80,"line":81},[78,1946,1947],{"class":261},"\u003C!-- rem 更適合響應式設計 -->\n",[78,1949,1950,1952,1954,1956,1958,1960,1962,1964],{"class":80,"line":115},[78,1951,85],{"class":84},[78,1953,301],{"class":88},[78,1955,370],{"class":92},[78,1957,99],{"class":84},[78,1959,103],{"class":102},[78,1961,377],{"class":106},[78,1963,103],{"class":102},[78,1965,112],{"class":84},[42,1967,1969],{"id":1968},"忘記包-uapp","忘記包 UApp",[15,1971,1972,1974],{},[1836,1973,1838],{},"：Toast、Tooltip 無法顯示。",[15,1976,1977,1980,1981,1983],{},[1836,1978,1979],{},"解決","：確保 app.vue 有 ",[50,1982,52],{}," 包裹：",[69,1985,1987],{"className":71,"code":1986,"language":73,"meta":74,"style":74},"\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtPage \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n",[50,1988,1989,1997,2005,2013,2021],{"__ignoreMap":74},[78,1990,1991,1993,1995],{"class":80,"line":81},[78,1992,85],{"class":84},[78,1994,168],{"class":88},[78,1996,112],{"class":84},[78,1998,1999,2001,2003],{"class":80,"line":115},[78,2000,176],{"class":84},[78,2002,52],{"class":88},[78,2004,112],{"class":84},[78,2006,2007,2009,2011],{"class":80,"line":146},[78,2008,198],{"class":84},[78,2010,201],{"class":88},[78,2012,204],{"class":84},[78,2014,2015,2017,2019],{"class":80,"line":156},[78,2016,210],{"class":84},[78,2018,52],{"class":88},[78,2020,112],{"class":84},[78,2022,2023,2025,2027],{"class":80,"line":163},[78,2024,149],{"class":84},[78,2026,168],{"class":88},[78,2028,112],{"class":84},[35,2030],{},[11,2032,2033],{"id":2033},"暗色模式",[42,2035,2037],{"id":2036},"colormodebutton","ColorModeButton",[69,2039,2041],{"className":71,"code":2040,"language":73,"meta":74,"style":74},"\u003CUColorModeButton \u002F>\n",[50,2042,2043],{"__ignoreMap":74},[78,2044,2045,2047,2050],{"class":80,"line":81},[78,2046,85],{"class":84},[78,2048,2049],{"class":88},"UColorModeButton",[78,2051,204],{"class":84},[42,2053,2054],{"id":2054},"程式控制",[69,2056,2058],{"className":232,"code":2057,"language":234,"meta":74,"style":74},"const colorMode = useColorMode();\n\n\u002F\u002F 切換模式\ncolorMode.preference = \"dark\"; \u002F\u002F 'light', 'dark', 'system'\n",[50,2059,2060,2076,2080,2085],{"__ignoreMap":74},[78,2061,2062,2064,2067,2069,2072,2074],{"class":80,"line":81},[78,2063,924],{"class":923},[78,2065,2066],{"class":927}," colorMode",[78,2068,1351],{"class":931},[78,2070,2071],{"class":1354}," useColorMode",[78,2073,1401],{"class":125},[78,2075,143],{"class":84},[78,2077,2078],{"class":80,"line":115},[78,2079,160],{"emptyLinePlaceholder":159},[78,2081,2082],{"class":80,"line":146},[78,2083,2084],{"class":261},"\u002F\u002F 切換模式\n",[78,2086,2087,2090,2092,2095,2097,2099,2102,2104,2107],{"class":80,"line":156},[78,2088,2089],{"class":125},"colorMode",[78,2091,1481],{"class":84},[78,2093,2094],{"class":125},"preference ",[78,2096,99],{"class":931},[78,2098,135],{"class":102},[78,2100,2101],{"class":106},"dark",[78,2103,103],{"class":102},[78,2105,2106],{"class":84},";",[78,2108,2109],{"class":261}," \u002F\u002F 'light', 'dark', 'system'\n",[35,2111],{},[11,2113,2115],{"id":2114},"完整-layout-範例","完整 Layout 範例",[69,2117,2119],{"className":71,"code":2118,"language":73,"meta":74,"style":74},"\u003Cscript setup lang=\"ts\">\nimport { zh_tw } from \"@nuxt\u002Fui\u002Flocale\";\nimport type { NavigationMenuItem } from \"@nuxt\u002Fui\";\n\nconst menuItems: NavigationMenuItem[] = [\n  { label: \"儀表板\", icon: \"i-lucide-layout-dashboard\", to: \"\u002F\" },\n  { label: \"使用者\", icon: \"i-lucide-users\", to: \"\u002Fusers\" },\n  { label: \"設定\", icon: \"i-lucide-settings\", to: \"\u002Fsettings\" },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUApp :locale=\"zh_tw\">\n    \u003CUDashboardGroup unit=\"rem\">\n      \u003CUDashboardSidebar collapsible class=\"hidden lg:flex\">\n        \u003Ctemplate #header>\n          \u003Cdiv class=\"flex items-center gap-2 p-4\">\n            \u003CUIcon name=\"i-lucide-box\" class=\"size-6\" \u002F>\n            \u003Cspan class=\"font-bold\">My App\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Ftemplate>\n\n        \u003CUNavigationMenu\n          :items=\"menuItems\"\n          orientation=\"vertical\"\n          class=\"flex-1\"\n        \u002F>\n\n        \u003Ctemplate #footer>\n          \u003Cdiv class=\"p-4\">\n            \u003CUColorModeButton \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Ftemplate>\n      \u003C\u002FUDashboardSidebar>\n\n      \u003CUDashboardPanel>\n        \u003CUDashboardNavbar>\n          \u003Ctemplate #leading>\n            \u003CUDashboardSidebarToggle class=\"lg:hidden\" \u002F>\n            \u003CUDashboardSidebarCollapse class=\"hidden lg:flex\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FUDashboardNavbar>\n\n        \u003Cmain class=\"p-6\">\n          \u003Cslot \u002F>\n        \u003C\u002Fmain>\n      \u003C\u002FUDashboardPanel>\n    \u003C\u002FUDashboardGroup>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n",[50,2120,2121,2141,2161,2183,2187,2203,2247,2288,2328,2334,2342,2346,2354,2372,2390,2410,2422,2442,2475,2503,2512,2520,2524,2531,2545,2558,2572,2577,2581,2593,2612,2620,2628,2636,2644,2649,2658,2667,2680,2699,2718,2727,2736,2741,2762,2773,2782,2791,2800,2809],{"__ignoreMap":74},[78,2122,2123,2125,2127,2129,2131,2133,2135,2137,2139],{"class":80,"line":81},[78,2124,85],{"class":84},[78,2126,89],{"class":88},[78,2128,93],{"class":92},[78,2130,96],{"class":92},[78,2132,99],{"class":84},[78,2134,103],{"class":102},[78,2136,107],{"class":106},[78,2138,103],{"class":102},[78,2140,112],{"class":84},[78,2142,2143,2145,2147,2149,2151,2153,2155,2157,2159],{"class":80,"line":115},[78,2144,119],{"class":118},[78,2146,122],{"class":84},[78,2148,126],{"class":125},[78,2150,129],{"class":84},[78,2152,132],{"class":118},[78,2154,135],{"class":102},[78,2156,138],{"class":106},[78,2158,103],{"class":102},[78,2160,143],{"class":84},[78,2162,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181],{"class":80,"line":146},[78,2164,119],{"class":118},[78,2166,896],{"class":118},[78,2168,122],{"class":84},[78,2170,901],{"class":125},[78,2172,129],{"class":84},[78,2174,132],{"class":118},[78,2176,135],{"class":102},[78,2178,910],{"class":106},[78,2180,103],{"class":102},[78,2182,143],{"class":84},[78,2184,2185],{"class":80,"line":156},[78,2186,160],{"emptyLinePlaceholder":159},[78,2188,2189,2191,2193,2195,2197,2199,2201],{"class":80,"line":163},[78,2190,924],{"class":923},[78,2192,928],{"class":927},[78,2194,932],{"class":931},[78,2196,901],{"class":935},[78,2198,938],{"class":125},[78,2200,99],{"class":931},[78,2202,943],{"class":125},[78,2204,2205,2208,2210,2212,2214,2217,2219,2221,2224,2226,2228,2231,2233,2235,2237,2239,2241,2243,2245],{"class":80,"line":173},[78,2206,2207],{"class":84},"  {",[78,2209,1107],{"class":953},[78,2211,932],{"class":84},[78,2213,135],{"class":102},[78,2215,2216],{"class":106},"儀表板",[78,2218,103],{"class":102},[78,2220,1119],{"class":84},[78,2222,2223],{"class":953}," icon",[78,2225,932],{"class":84},[78,2227,135],{"class":102},[78,2229,2230],{"class":106},"i-lucide-layout-dashboard",[78,2232,103],{"class":102},[78,2234,1119],{"class":84},[78,2236,1122],{"class":953},[78,2238,932],{"class":84},[78,2240,135],{"class":102},[78,2242,994],{"class":106},[78,2244,103],{"class":102},[78,2246,1134],{"class":84},[78,2248,2249,2251,2253,2255,2257,2260,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286],{"class":80,"line":195},[78,2250,2207],{"class":84},[78,2252,1107],{"class":953},[78,2254,932],{"class":84},[78,2256,135],{"class":102},[78,2258,2259],{"class":106},"使用者",[78,2261,103],{"class":102},[78,2263,1119],{"class":84},[78,2265,2223],{"class":953},[78,2267,932],{"class":84},[78,2269,135],{"class":102},[78,2271,1086],{"class":106},[78,2273,103],{"class":102},[78,2275,1119],{"class":84},[78,2277,1122],{"class":953},[78,2279,932],{"class":84},[78,2281,135],{"class":102},[78,2283,1129],{"class":106},[78,2285,103],{"class":102},[78,2287,1134],{"class":84},[78,2289,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316,2318,2320,2322,2324,2326],{"class":80,"line":207},[78,2291,2207],{"class":84},[78,2293,1107],{"class":953},[78,2295,932],{"class":84},[78,2297,135],{"class":102},[78,2299,1018],{"class":106},[78,2301,103],{"class":102},[78,2303,1119],{"class":84},[78,2305,2223],{"class":953},[78,2307,932],{"class":84},[78,2309,135],{"class":102},[78,2311,1033],{"class":106},[78,2313,103],{"class":102},[78,2315,1119],{"class":84},[78,2317,1122],{"class":953},[78,2319,932],{"class":84},[78,2321,135],{"class":102},[78,2323,1048],{"class":106},[78,2325,103],{"class":102},[78,2327,1134],{"class":84},[78,2329,2330,2332],{"class":80,"line":217},[78,2331,1180],{"class":125},[78,2333,143],{"class":84},[78,2335,2336,2338,2340],{"class":80,"line":486},[78,2337,149],{"class":84},[78,2339,89],{"class":88},[78,2341,112],{"class":84},[78,2343,2344],{"class":80,"line":491},[78,2345,160],{"emptyLinePlaceholder":159},[78,2347,2348,2350,2352],{"class":80,"line":505},[78,2349,85],{"class":84},[78,2351,168],{"class":88},[78,2353,112],{"class":84},[78,2355,2356,2358,2360,2362,2364,2366,2368,2370],{"class":80,"line":515},[78,2357,176],{"class":84},[78,2359,52],{"class":88},[78,2361,181],{"class":92},[78,2363,99],{"class":84},[78,2365,103],{"class":102},[78,2367,188],{"class":106},[78,2369,103],{"class":102},[78,2371,112],{"class":84},[78,2373,2374,2376,2378,2380,2382,2384,2386,2388],{"class":80,"line":524},[78,2375,198],{"class":84},[78,2377,301],{"class":88},[78,2379,370],{"class":92},[78,2381,99],{"class":84},[78,2383,103],{"class":102},[78,2385,377],{"class":106},[78,2387,103],{"class":102},[78,2389,112],{"class":84},[78,2391,2392,2394,2396,2398,2400,2402,2404,2406,2408],{"class":80,"line":534},[78,2393,417],{"class":84},[78,2395,311],{"class":88},[78,2397,395],{"class":92},[78,2399,401],{"class":92},[78,2401,99],{"class":84},[78,2403,103],{"class":102},[78,2405,408],{"class":106},[78,2407,103],{"class":102},[78,2409,112],{"class":84},[78,2411,2412,2414,2416,2418,2420],{"class":80,"line":539},[78,2413,432],{"class":84},[78,2415,168],{"class":88},[78,2417,422],{"class":84},[78,2419,425],{"class":92},[78,2421,112],{"class":84},[78,2423,2424,2426,2429,2431,2433,2435,2438,2440],{"class":80,"line":545},[78,2425,586],{"class":84},[78,2427,2428],{"class":88},"div",[78,2430,401],{"class":92},[78,2432,99],{"class":84},[78,2434,103],{"class":102},[78,2436,2437],{"class":106},"flex items-center gap-2 p-4",[78,2439,103],{"class":102},[78,2441,112],{"class":84},[78,2443,2444,2447,2450,2453,2455,2457,2460,2462,2464,2466,2468,2471,2473],{"class":80,"line":554},[78,2445,2446],{"class":84},"            \u003C",[78,2448,2449],{"class":88},"UIcon",[78,2451,2452],{"class":92}," name",[78,2454,99],{"class":84},[78,2456,103],{"class":102},[78,2458,2459],{"class":106},"i-lucide-box",[78,2461,103],{"class":102},[78,2463,401],{"class":92},[78,2465,99],{"class":84},[78,2467,103],{"class":102},[78,2469,2470],{"class":106},"size-6",[78,2472,103],{"class":102},[78,2474,204],{"class":84},[78,2476,2477,2479,2481,2483,2485,2487,2490,2492,2494,2497,2499,2501],{"class":80,"line":563},[78,2478,2446],{"class":84},[78,2480,78],{"class":88},[78,2482,401],{"class":92},[78,2484,99],{"class":84},[78,2486,103],{"class":102},[78,2488,2489],{"class":106},"font-bold",[78,2491,103],{"class":102},[78,2493,1396],{"class":84},[78,2495,2496],{"class":125},"My App",[78,2498,149],{"class":84},[78,2500,78],{"class":88},[78,2502,112],{"class":84},[78,2504,2505,2508,2510],{"class":80,"line":577},[78,2506,2507],{"class":84},"          \u003C\u002F",[78,2509,2428],{"class":88},[78,2511,112],{"class":84},[78,2513,2514,2516,2518],{"class":80,"line":583},[78,2515,634],{"class":84},[78,2517,168],{"class":88},[78,2519,112],{"class":84},[78,2521,2522],{"class":80,"line":605},[78,2523,160],{"emptyLinePlaceholder":159},[78,2525,2526,2528],{"class":80,"line":611},[78,2527,432],{"class":84},[78,2529,2530],{"class":88},"UNavigationMenu\n",[78,2532,2533,2536,2538,2540,2542],{"class":80,"line":631},[78,2534,2535],{"class":92},"          :items",[78,2537,99],{"class":84},[78,2539,103],{"class":102},[78,2541,467],{"class":106},[78,2543,2544],{"class":102},"\"\n",[78,2546,2547,2550,2552,2554,2556],{"class":80,"line":641},[78,2548,2549],{"class":92},"          orientation",[78,2551,99],{"class":84},[78,2553,103],{"class":102},[78,2555,479],{"class":106},[78,2557,2544],{"class":102},[78,2559,2560,2563,2565,2567,2570],{"class":80,"line":646},[78,2561,2562],{"class":92},"          class",[78,2564,99],{"class":84},[78,2566,103],{"class":102},[78,2568,2569],{"class":106},"flex-1",[78,2571,2544],{"class":102},[78,2573,2574],{"class":80,"line":660},[78,2575,2576],{"class":84},"        \u002F>\n",[78,2578,2579],{"class":80,"line":666},[78,2580,160],{"emptyLinePlaceholder":159},[78,2582,2583,2585,2587,2589,2591],{"class":80,"line":675},[78,2584,432],{"class":84},[78,2586,168],{"class":88},[78,2588,422],{"class":84},[78,2590,500],{"class":92},[78,2592,112],{"class":84},[78,2594,2595,2597,2599,2601,2603,2605,2608,2610],{"class":80,"line":684},[78,2596,586],{"class":84},[78,2598,2428],{"class":88},[78,2600,401],{"class":92},[78,2602,99],{"class":84},[78,2604,103],{"class":102},[78,2606,2607],{"class":106},"p-4",[78,2609,103],{"class":102},[78,2611,112],{"class":84},[78,2613,2614,2616,2618],{"class":80,"line":689},[78,2615,2446],{"class":84},[78,2617,2049],{"class":88},[78,2619,204],{"class":84},[78,2621,2622,2624,2626],{"class":80,"line":703},[78,2623,2507],{"class":84},[78,2625,2428],{"class":88},[78,2627,112],{"class":84},[78,2629,2630,2632,2634],{"class":80,"line":712},[78,2631,634],{"class":84},[78,2633,168],{"class":88},[78,2635,112],{"class":84},[78,2637,2638,2640,2642],{"class":80,"line":721},[78,2639,442],{"class":84},[78,2641,311],{"class":88},[78,2643,112],{"class":84},[78,2645,2647],{"class":80,"line":2646},35,[78,2648,160],{"emptyLinePlaceholder":159},[78,2650,2652,2654,2656],{"class":80,"line":2651},36,[78,2653,417],{"class":84},[78,2655,321],{"class":88},[78,2657,112],{"class":84},[78,2659,2661,2663,2665],{"class":80,"line":2660},37,[78,2662,432],{"class":84},[78,2664,331],{"class":88},[78,2666,112],{"class":84},[78,2668,2670,2672,2674,2676,2678],{"class":80,"line":2669},38,[78,2671,586],{"class":84},[78,2673,168],{"class":88},[78,2675,422],{"class":84},[78,2677,572],{"class":92},[78,2679,112],{"class":84},[78,2681,2683,2685,2687,2689,2691,2693,2695,2697],{"class":80,"line":2682},39,[78,2684,2446],{"class":84},[78,2686,589],{"class":88},[78,2688,401],{"class":92},[78,2690,99],{"class":84},[78,2692,103],{"class":102},[78,2694,598],{"class":106},[78,2696,103],{"class":102},[78,2698,204],{"class":84},[78,2700,2702,2704,2706,2708,2710,2712,2714,2716],{"class":80,"line":2701},40,[78,2703,2446],{"class":84},[78,2705,616],{"class":88},[78,2707,401],{"class":92},[78,2709,99],{"class":84},[78,2711,103],{"class":102},[78,2713,408],{"class":106},[78,2715,103],{"class":102},[78,2717,204],{"class":84},[78,2719,2721,2723,2725],{"class":80,"line":2720},41,[78,2722,2507],{"class":84},[78,2724,168],{"class":88},[78,2726,112],{"class":84},[78,2728,2730,2732,2734],{"class":80,"line":2729},42,[78,2731,634],{"class":84},[78,2733,331],{"class":88},[78,2735,112],{"class":84},[78,2737,2739],{"class":80,"line":2738},43,[78,2740,160],{"emptyLinePlaceholder":159},[78,2742,2744,2746,2749,2751,2753,2755,2758,2760],{"class":80,"line":2743},44,[78,2745,432],{"class":84},[78,2747,2748],{"class":88},"main",[78,2750,401],{"class":92},[78,2752,99],{"class":84},[78,2754,103],{"class":102},[78,2756,2757],{"class":106},"p-6",[78,2759,103],{"class":102},[78,2761,112],{"class":84},[78,2763,2765,2767,2769,2771],{"class":80,"line":2764},45,[78,2766,586],{"class":84},[78,2768,694],{"class":88},[78,2770,698],{"class":697},[78,2772,112],{"class":84},[78,2774,2776,2778,2780],{"class":80,"line":2775},46,[78,2777,634],{"class":84},[78,2779,2748],{"class":88},[78,2781,112],{"class":84},[78,2783,2785,2787,2789],{"class":80,"line":2784},47,[78,2786,442],{"class":84},[78,2788,321],{"class":88},[78,2790,112],{"class":84},[78,2792,2794,2796,2798],{"class":80,"line":2793},48,[78,2795,527],{"class":84},[78,2797,301],{"class":88},[78,2799,112],{"class":84},[78,2801,2803,2805,2807],{"class":80,"line":2802},49,[78,2804,210],{"class":84},[78,2806,52],{"class":88},[78,2808,112],{"class":84},[78,2810,2812,2814,2816],{"class":80,"line":2811},50,[78,2813,149],{"class":84},[78,2815,168],{"class":88},[78,2817,112],{"class":84},[35,2819],{},[11,2821,2822],{"id":2822},"最佳實踐總結",[2824,2825,2826,2832,2841,2853,2861],"ol",{},[22,2827,2828,2831],{},[1836,2829,2830],{},"UApp 必備","：所有 Nuxt UI 應用都需要 UApp 包裹",[22,2833,2834,2837,2838,2840],{},[1836,2835,2836],{},"語系設定","：import ",[50,2839,188],{}," 提供繁體中文支援",[22,2842,2843,2846,2847,2850,2851],{},[1836,2844,2845],{},"響應式用 CSS","：用 ",[50,2848,2849],{},"class=\"hidden lg:flex\""," 而非 ",[50,2852,1848],{},[22,2854,2855,1845,2858,2860],{},[1836,2856,2857],{},"類型安全",[50,2859,1390],{}," 類型定義選單",[22,2862,2863,1845,2866,2868,2869,2871],{},[1836,2864,2865],{},"語意化樣式",[50,2867,1752],{},"、",[50,2870,1811],{}," 等 CSS 變數",[35,2873],{},[11,2875,2876],{"id":2876},"延伸閱讀",[19,2878,2879,2888,2895,2902],{},[22,2880,2881],{},[2882,2883,2887],"a",{"href":2884,"rel":2885},"https:\u002F\u002Fui.nuxt.com\u002Fcomponents\u002Fdashboard-sidebar",[2886],"nofollow","Nuxt UI Dashboard 文件",[22,2889,2890],{},[2882,2891,2894],{"href":2892,"rel":2893},"https:\u002F\u002Fui.nuxt.com\u002Fgetting-started\u002Ftheme",[2886],"Nuxt UI Theme 配置",[22,2896,2897,2898],{},"上一篇：",[2882,2899,2901],{"href":2900},"\u002Fblog\u002Fnuxt\u002Ffullstack-architecture","專案架構設計",[22,2903,2904,2905],{},"下一篇：",[2882,2906,2908],{"href":2907},"\u002Fblog\u002Fnuxt\u002Ftypescript-type-safety","TypeScript 類型安全實戰",[2910,2911,2912],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .svtyB, html code.shiki .svtyB{--shiki-light:#39ADB5;--shiki-light-font-style:inherit;--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":74,"searchDepth":146,"depth":146,"links":2914},[2915,2916,2920,2924,2928,2933,2938,2943,2947,2948,2949],{"id":13,"depth":115,"text":13},{"id":39,"depth":115,"text":40,"children":2917},[2918,2919],{"id":44,"depth":146,"text":45},{"id":226,"depth":146,"text":226},{"id":267,"depth":115,"text":268,"children":2921},[2922,2923],{"id":271,"depth":146,"text":271},{"id":347,"depth":146,"text":348},{"id":732,"depth":115,"text":732,"children":2925},[2926,2927],{"id":735,"depth":146,"text":736},{"id":820,"depth":146,"text":820},{"id":880,"depth":115,"text":881,"children":2929},[2930,2931,2932],{"id":884,"depth":146,"text":884},{"id":1185,"depth":146,"text":1186},{"id":1312,"depth":146,"text":1313},{"id":1529,"depth":115,"text":1529,"children":2934},[2935,2936,2937],{"id":1532,"depth":146,"text":1533},{"id":1623,"depth":146,"text":1623},{"id":1718,"depth":146,"text":1719},{"id":1829,"depth":115,"text":1829,"children":2939},[2940,2941,2942],{"id":1832,"depth":146,"text":1832},{"id":1930,"depth":146,"text":1931},{"id":1968,"depth":146,"text":1969},{"id":2033,"depth":115,"text":2033,"children":2944},[2945,2946],{"id":2036,"depth":146,"text":2037},{"id":2054,"depth":146,"text":2054},{"id":2114,"depth":115,"text":2115},{"id":2822,"depth":115,"text":2822},{"id":2876,"depth":115,"text":2876},"Nuxt","2026-01-22","使用 Nuxt UI 4 打造專業級 Dashboard 介面，涵蓋側邊欄、導航、響應式設計與主題配置的實作經驗。",false,"md",null,{},"\u002Fblog\u002Fnuxt\u002Fnuxt-ui-dashboard",{"title":5,"description":2952},"nuxt-fullstack","Nuxt 4 全棧實戰筆記","blog\u002Fnuxt\u002Fnuxt-ui-dashboard\u002Findex",[2950,2963,2964],"TypeScript","Architecture","lkcqx2C8E7GNFlxg6pX-eFsOKrGT6RxlMw3ZNA7a-mU",1780512499430]