Menu 選單

產品的主導覽。使用 Element Plus 的 el-menu,支援垂直側欄與水平頂欄兩種型態。

設計準則

• 產品主導覽優先用垂直側欄(mode 預設 vertical);功能多、有層級分組時最好用
• 水平頂欄(mode="horizontal")只給分頁少(約 ≤ 5 項)的輕量產品,或搭配側欄當第二層
• 顏色交給品牌主色:不要用 background-color / text-color / active-text-color 硬改顏色,選中態會自動套用品牌 primary,確保全產品一致
• hover 底色一律滿版:一階與子選單項的 hover 底色都要鋪滿整個側欄寬度,縮排只由 padding 負責,底色不跟著內縮
• 當前頁用 default-active 對應該頁的 index,讓使用者知道自己在哪
• 圖示用 Font Awesome:放在 el-menu-item 的第一個子元素,文字放進 #title,折疊時才能只留圖示
• 層級最多兩層(一層 sub-menu);再深就重新規劃資訊架構,別靠選單硬塞
• 尚未開放的項目用 disabled,不要直接藏起來造成使用者困惑

側欄選單(產品主導覽)

含分組、子選單、圖示、停用項目與當前頁高亮。

loading

水平頂欄選單

loading

左右分佈(左 logo、右選單)

頂欄常見版型:左邊放品牌 logo,右邊放選單與帳號。中間用一個彈性空白(flex-1)把兩側撐開,並記得關掉 ellipsis。

loading

可折疊側欄

用 collapse 收合成只剩圖示,騰出畫面空間;文字自動轉為浮出提示。

loading

Do / Don't

✅ Do	❌ Don't
選中態交給品牌主色	每個產品自訂一套選單顏色
default-active 標當前頁	進頁面看不出自己在哪
層級最多兩層	三、四層一路展開
未開放功能用 disabled	直接把項目藏掉
圖示放第一個子元素	圖示塞進 #title 導致折疊失效

給工程師

• index 是每個項目的唯一識別;default-active 綁當前 index;@select 取得點擊的 index
• 接 vue-router:el-menu 加 router,el-menu-item 的 index 設為路徑即可自動跳轉
• unique-opened 可讓同層子選單一次只展開一個;collapse 折疊需搭配把文字放進 #title
• 完整 API 見 Element Plus Menu 文件。本站規範優先於 EP 文件中的視覺建議。