Link 連結

文字超連結,用於跳轉頁面或表格/列表中的行內輕量操作。使用 Element Plus 的 el-link,本頁定義 AccuHit 產品中的使用準則。

設計準則

• 跳轉用連結,動作用按鈕:會離開當前頁面(或開新分頁)的用 Link;會觸發操作(儲存、送出、刪除資料)的原則上用 Button —— 唯一例外是表格行內操作,空間有限,慣例用 Link
• 內文段落中的連結一律用 type="primary"(品牌色),讓「可點」一眼可辨
• 危險的行內操作(表格中的刪除)用 type="danger",且點擊後必須二次確認
• success / warning / info 極少使用 —— 連結顏色不是拿來裝飾的,沒有明確理由不要用
• 連結文字要說清楚去向或動作:「查看報表」「編輯」;避免「點此」「更多」
• 外部連結(離開產品)要開新分頁(target="_blank")並加上外連圖標

基本用法

六種語意類型,一般情境只會用到 default、primary、danger:

loading

底線規則

• 內文段落中:用預設(hover 才出現底線)
• 獨立擺放(表格操作欄、卡片角落):underline="never",位置本身已表明可點
• underline="always" 僅在無法用顏色區分的特殊版面使用(少用)

loading

搭配圖標

依圖標規範使用 Font Awesome 6:操作類圖標在左、外連/方向圖標在右:

loading

停用狀態

功能暫不可用時停用連結;若整列資料都不可操作,建議加 tooltip 說明原因:

loading

Do / Don't

✅ Do	❌ Don't
表格行內操作:「編輯」「刪除」用 Link	頁面主要動作(儲存、送出)用 Link
內文連結用 primary,一眼可辨	內文連結用 default 灰色,看不出可點
外部連結開新分頁 + 外連圖標	外部連結在當前頁直接跳走
連結文字寫明去向:「查看報表」	「點此」「這裡」「更多」
行內刪除用 danger + 二次確認	點了直接刪,無法挽回

給工程師

完整 API(props/events/slots)見 Element Plus Link 文件。 注意:本專案使用的版本 underline 建議寫字串值("always" / "hover" / "never")。 本站規範優先於 EP 文件中的視覺建議。