🏗️ 元件展示中心

專案中所有元件的使用狀態與預覽展示

📊 元件使用統計

Layout Components (已使用)

UtilityBar
使用於: 所有頁面
已使用
15 次使用
NavigationHeader
使用於: 所有頁面
已使用
15 次使用
AppFooter
使用於: about, login, register, index, branches/[id]
已使用
5 次使用
ServiceLocationSidebar
使用於: app.vue (全域)
已使用
1 次使用
ApplicationSidebar
使用於: careers
已使用
1 次使用

UI Components (已使用)

PropertySearchTabs
使用於: buy, rent, land, community, map-search
已使用
5 次使用
BreadcrumbNav
使用於: about
已使用
1 次使用
BasePagination
使用於: 待重構頁面使用
新建立
0 次使用
PropertyCard
使用於: index (推薦精選、VR賞屋、租屋精選)
已使用
3 次使用
PropertyInfoCard
使用於: buy/[id] (物件詳情頁)
新建立
1 次使用
PropertyListCard
使用於: buy/index (物件列表頁)
新建立
1 次使用
LandServiceToggle
使用於: land/index (土地服務類型切換)
新建立
1 次使用
PropertySearchBar
使用於: 待重構頁面使用
新建立
0 次使用
PropertySortToolbar
使用於: 待重構頁面使用
新建立
0 次使用
BaseStepperNav
使用於: components-showcase
新建立
1 次使用

UI Components (未使用)

BaseButton
未被使用
未使用
0 次使用
BaseCard
未被使用
未使用
0 次使用
BaseInput
未被使用
未使用
0 次使用
BaseSelect
未被使用
未使用
0 次使用
BaseCheckbox
使用於: house-sale
已使用
1 次使用
BaseRadio
使用於: components-showcase
新建立
1 次使用
BaseRadioGroup
使用於: house-sale, components-showcase
新建立
2 次使用
標準 Checkbox
使用於: components-showcase
新建立
1 次使用
UnderConstruction
未被使用
未使用
0 次使用
ScrollToTopButton
使用於: buy, rent, land, real-price, index, map-search, community, components-showcase
已使用
8 次使用

Layout Components (未使用)

AppLayout
未被使用
未使用
0 次使用

🏗️ Layout 元件展示

UtilityBar

已使用 15 次

頂部工具列，包含語言切換、登入狀態、公告等功能

登入 註冊

NavigationHeader

已使用 15 次

主要導航標頭，包含 Logo、選單、搜尋功能

江海全聯房屋 Logo
江海全聯房屋

ServiceLocationSidebar

已使用 1 次

服務據點側邊欄，顯示分店資訊 (點擊按鈕開啟)

ApplicationSidebar

已使用 1 次

應徵表單側邊欄，用於職位申請 (點擊按鈕開啟)

職位應徵

建議上傳清晰的正面照片

提交後我們會盡快與您聯繫

AppFooter

已使用 3 次

頁面底部，包含連結、版權資訊等

🎨 UI 元件展示

PropertySearchTabs

已使用 5 次

房屋搜尋分頁，支援列表、社區、地圖等檢視模式

PropertyCard

已使用 3 次

統一的物件卡片元件，支援一般物件、VR 物件、租屋物件等不同變體

一般物件 (default)
物件圖片

豪華小宅，符美食環繞

惠宇觀市政台中市西屯區市政北七路
公寓
3/7
34坪
2房2廳1衛
5年
1200萬
VR 物件 (vr)
VR環景圖片

信義豪宅VR實境

台北市信義區八德路三段
電梯大樓
15/20
42坪
3房2廳2衛
1年
租屋物件 (rental)
租屋圖片

溫馨小窩，首購族精選

台北市中正區忠孝東路二段100號
套房
2/5
22坪
1房1廳1衛
8年
18,000元/月
💡 功能特色：
  • • 支援三種變體：default（一般）、vr（VR物件）、rental（租屋）
  • • 統一的卡片樣式與響應式設計
  • • 所有變體都支援愛心收藏功能，點擊可切換收藏狀態
  • • VR 物件專用的「開始導覽」按鈕
  • • 智慧價格格式化（支援萬元和月租金）
  • • 完整的事件處理（點擊、收藏、VR導覽）
  • • TypeScript 類型安全
  • • 所有變體採用統一簡潔格式：型態｜樓層｜坪數｜格局｜屋齡
📋 使用說明：
<PropertyCard
  :property="propertyData"
  variant="default" // 'default' | 'vr' | 'rental'
  :show-favorite="true"
  :show-agent="true"
  @click="handleClick"
  @favorite="handleFavorite"
  @vr-tour="handleVrTour"
/>
🔧 Props 參數：
參數類型預設值說明
propertyPropertyData必填物件資料物件
variant'default' | 'vr' | 'rental''default'卡片變體類型
showFavoritebooleantrue是否顯示收藏按鈕
showAgentbooleantrue是否顯示仲介資訊
clickablebooleantrue是否可點擊

PropertyListCard

新建立

物件列表卡片元件，支援橫向和直式兩種佈局模式，專為列表頁面設計，包含完整的物件資訊展示

橫向佈局 (桌面版)
物件圖片
0.1萬
0萬/坪

豪華三房兩廳，採光極佳，近捷運站

復興花園台北市大安區復興南路100號
用途：-
樓層：15樓/20樓
格局：3房2廳2衛
屋齡：5年
型態：-
建物總坪：35 坪
主建物坪：30 坪
附屬：5 坪
物件圖片
0.1萬
0萬/坪

溫馨小窩，首購族精選，交通便利生活機能佳

台北市中正區忠孝東路二段100號
用途：-
樓層：3樓/5樓
格局：1房1廳1衛
屋齡：8年
型態：-
建物總坪：22 坪
主建物坪：20 坪
附屬：2 坪
直式佈局 (手機版)
物件圖片
0.1萬
0萬/坪

豪華三房兩廳，採光極佳，近捷運站

復興花園台北市大安區復興南路100號
用途：-
樓層：15樓/20樓
格局：3房2廳2衛
屋齡：5年
型態：-
建物總坪：35 坪
主建物坪：30 坪
附屬：5 坪
物件圖片
0.1萬
0萬/坪

溫馨小窩，首購族精選，交通便利生活機能佳

台北市中正區忠孝東路二段100號
用途：-
樓層：3樓/5樓
格局：1房1廳1衛
屋齡：8年
型態：-
建物總坪：22 坪
主建物坪：20 坪
附屬：2 坪
💡 功能特色：
  • • 支援橫向 (horizontal) 和直式 (vertical) 兩種佈局模式
  • • 橫向佈局：桌面版專用，左圖右內容，價格顯示在右上角
  • • 直式佈局：手機版或特定場景，上圖下內容，價格覆蓋在圖片上
  • • 完整的物件資訊展示：用途、樓層、格局、屋齡、車位、建物坪數、主建坪數、土地坪數
  • • 自動計算每坪單價顯示
  • • 可選的收藏功能
  • • 完整的事件處理（點擊、收藏）
  • • TypeScript 類型安全
  • • 響應式設計，適用於不同螢幕尺寸
📋 使用說明：
<PropertyListCard
  :property="propertyData"
  variant="horizontal" // 'horizontal' | 'vertical'
  :show-favorite="true"
  :clickable="true"
  :is-favorited="false"
  @click="handleClick"
  @favorite="handleFavorite"
/>
🔧 Props 參數：
參數類型預設值說明
propertyPropertyData必填物件資料物件
variant'horizontal' | 'vertical''horizontal'佈局模式
showFavoritebooleantrue是否顯示收藏按鈕
clickablebooleantrue是否可點擊
isFavoritedbooleanfalse是否已收藏
🔄 與 PropertyCard 的差異：
PropertyCard： 適用於首頁推薦區塊，設計簡潔，主要顯示基本資訊
PropertyListCard： 適用於列表頁面，顯示完整詳細資訊，支援橫向和直式佈局
使用場景： PropertyCard 用於展示推薦，PropertyListCard 用於搜尋結果列表
資訊密度： PropertyListCard 包含更多物件細節，如主建坪數、土地坪數等

PropertyInfoCard

新建立

售屋物件資訊展示卡片，支援響應式設計，桌面版顯示為6欄表格，行動版顯示為分組清單

物件資訊展示

建物總坪28.5 坪
主建物坪22.5 坪
附屬建物3.2 坪
陽台／雨遮2.8 坪 / --
車位坪數--
土地面積2.1 坪
共同使用坪6.8 坪
地下室--
加蓋樓層數--
加蓋坪數--
社區名稱瑞光花園
管理費3200 元
繳費方式月繳
總戶數120
同層戶數8
電梯數2
車位有
停車方式平面車位
車位管理費含在售價內
車位編號B1-25
邊間否
建物朝向南
大門朝向東南
落地窗朝向南向
面臨路寬20 米
面寬10 米
深度12 米
建設公司建設股份有限公司
登記用途住家用
登記日期2019/03/20
💡 功能特色：
  • • 響應式設計：桌面版6欄表格 + 行動版分組清單
  • • 完整的 TypeScript 介面定義
  • • 三大類資訊分組：建物坪數、社區管理、朝向登記
  • • 桌面版表格均分欄位寬度，視覺整齊
  • • 行動版兩欄排列，左側標籤、右側內容靠左對齊
  • • 可客製化標題和圖示顯示
  • • 分隔線區分不同資訊區塊
  • • 適用於售屋、租屋、土地等不同物件類型
📋 使用說明：
<PropertyInfoCard
  :property-info="propertyData"
  title="物件資訊" // 可選，預設為 "物件資訊"
  :show-icon="true" // 可選，預設為 true
/>
🔧 Props 參數：
參數類型預設值說明
propertyInfoPropertyInfo必填物件資訊資料物件
titlestring'物件資訊'卡片標題
showIconbooleantrue是否顯示圖示
📝 PropertyInfo 資料結構：
建物坪數資訊： totalArea, mainArea, attachedArea, balconyArea, parkingArea, landArea, commonArea, basement, additionalFloor, additionalArea
社區管理資訊： communityName, managementFee, paymentMethod, totalUnits, unitsPerFloor, elevatorCount, parkingSpace, parkingType, parkingManagementFee, parkingNumber
朝向登記資訊： partition, buildingDirection, entranceDirection, windowDirection, roadWidth, frontWidth, depth, constructionCompany, registeredUse, registrationDate
📱 響應式設計：
桌面版 (≥768px)： 6欄表格佈局，每欄均分寬度，灰白相間的列樣式
行動版 (<768px)： 垂直分組清單，三個區塊用分隔線區分，每項資訊兩欄排列
設計原則： 桌面版追求資訊密度，行動版追求易讀性與觸控友好

LandServiceToggle

新建立

土地服務類型切換元件，提供出售/出租的切換功能，支援多種尺寸和樣式

預設樣式 (default)
不同尺寸
小尺寸 (sm)
中尺寸 (md) - 預設
大尺寸 (lg)
緊湊樣式 (compact)
禁用狀態
💡 功能特色：
  • • 支援 v-model 雙向綁定
  • • 三種尺寸：sm（小）、md（中）、lg（大）
  • • 兩種變體：default（預設）、compact（緊湊）
  • • 自訂選項配置，可選擇性添加描述文字
  • • 活躍狀態金色底線，與整體設計一致
  • • 支援禁用狀態
  • • 完整的無障礙支援（ARIA）
  • • 平滑的動畫效果
  • • TypeScript 類型安全
📋 使用說明：
<LandServiceToggle
  v-model="landServiceType"
  size="md" // 'sm' | 'md' | 'lg'
  variant="default" // 'default' | 'compact'
  :options="customOptions" // 可選，預設為標準選項
  :disabled="false"
  @change="handleChange"
/>
🔧 Props 參數：
參數類型預設值說明
modelValue'sale' | 'rent'必填當前選中的服務類型
optionsLandServiceOption[]預設選項服務選項配置
size'sm' | 'md' | 'lg''md'元件尺寸
variant'default' | 'compact''default'顯示樣式
disabledbooleanfalse是否禁用
📡 Events 事件：
事件名稱參數說明
update:modelValuevalue: 'sale' | 'rent'v-model 更新事件
changevalue: 'sale' | 'rent'值變更事件
📝 LandServiceOption 介面：
interface LandServiceOption {
  label: string // 顯示文字
  value: 'sale' | 'rent' // 選項值
  description?: string // 可選描述
}
🎯 應用場景：
土地頁面： 主要用於土地出售/出租類型切換
導航元件： 可用於其他需要二元選擇的場景
表單元件： 適合用於服務類型選擇
響應式設計： 支援不同螢幕尺寸和設備
路由整合： 可與 URL 參數同步，支援直接連結分享

PropertySearchBar

新建立

通用的物件搜尋表單元件，支援區域、價格、坪數等篩選條件，可選擇顯示土地專用篩選器

基本搜尋表單 (售屋)
土地搜尋表單 (含土地篩選器)
💡 功能特色：
  • • 支援 v-model 雙向綁定
  • • 動態縣市行政區選擇
  • • 價格和坪數自訂區間
  • • 可選的土地專用篩選器
  • • 支援售屋/租屋模式切換
  • • 完整的 TypeScript 類型支援
  • • 響應式下拉選單設計
  • • 點擊外部自動關閉下拉選單
📋 使用說明：
<PropertySearchBar
  :search-form="searchForm"
  :city-options="cityOptions"
  :district-options="districtOptions"
  :price-range-options="priceOptions"
  :area-range-options="areaOptions"
  :show-land-filters="true" // 顯示土地篩選器
  land-service-type="sale" // 'sale' | 'rent'
  @submit="handleSubmit"
  @update:search-form="updateForm"
/>
🔧 主要 Props：
searchForm: 搜尋表單資料物件 (必填)
cityOptions: 縣市選項陣列 (必填)
districtOptions: 行政區選項陣列 (必填)
showLandFilters: 是否顯示土地專用篩選器 (預設: false)
landServiceType: 服務類型 'sale' | 'rent' (預設: 'sale')

PropertySortToolbar

新建立

簡潔的結果統計和排序工具欄元件，無卡片包裝，純文字顯示統計和排序功能

售屋工具欄
共找到 150 筆售屋物件
排序：
最新刊登
租屋工具欄
共找到 87 筆租屋物件
排序：
最新刊登
土地工具欄
共找到 23 筆土地
排序：
最新刊登
💡 功能特色：
  • • 簡潔的結果統計顯示
  • • 響應式排版設計
  • • 自訂排序選項
  • • 支援不同物件類型
  • • 無卡片包裝，純內容顯示
  • • 輕量化設計，易於整合
📋 使用說明：
<PropertySortToolbar
  :sort-by="currentSort"
  :sort-options="sortOptions"
  :total-items="totalCount"
  item-type="物件" // 物件類型文字
  @sort-change="handleSort"
/>
🔗 元件組合：
PropertySearchBar + PropertySortToolbar： 完整的搜尋和結果頁面解決方案
獨立使用： PropertySortToolbar 可單獨使用於任何需要基本排序和統計的列表頁面
簡潔設計： 專注於核心功能，適合快速整合到現有頁面

BreadcrumbNav

已使用 1 次

導航麵包屑，顯示頁面層級結構

>>

BasePagination

新建立

可重用的分頁元件，提供簡潔統一的分頁導航功能

💡 功能特色：
  • • 智慧頁碼顯示（包含省略號）
  • • 置中顯示的分頁控制
  • • 即使只有一頁也會顯示頁碼
  • • 無邊框設計，統一的視覺風格
  • • 自訂選中顏色 (#192A45)
  • • 完整的 TypeScript 類型支援
  • • 防止無效頁面跳轉
📋 使用說明：
<BasePagination
  :current-page="currentPage"
  :items-per-page="itemsPerPage"
  :total-items="totalItems"
  @page-change="handlePageChange"
/>

BaseStepperNav

新建立

通用步驟導航元件，使用深藍色 #192A45 主題，支援多種尺寸和樣式變體

預設樣式 (4 步驟)
2
3
4

目前步驟：2/4

不同尺寸
小尺寸 (sm)
3
中尺寸 (md) - 預設
3
大尺寸 (lg)
3

目前步驟：3/3

緊湊樣式 (compact)
1
基本資訊
2
詳細設定
3
確認資料
4
完成

目前步驟：1/4

多步驟示例 (6 步驟)
4
5
6

目前步驟：4/6

隱藏標籤 (僅顯示步驟圓圈)
2
3
4
不可點擊 (僅顯示進度)
2
3
4
💡 功能特色：
  • • 使用專案標準深藍色 #192A45 作為主色調
  • • 支援三種尺寸：sm（小）、md（中）、lg（大）
  • • 兩種變體：default（預設）、compact（緊湊）
  • • 自動顯示完成步驟的勾選圖示
  • • 可選的步驟點擊功能
  • • 可選的標籤顯示
  • • 響應式設計，小螢幕自動隱藏標籤
  • • 平滑的動畫過渡效果
  • • 完整的 TypeScript 類型支援
  • • 靈活的步驟配置，支援有無描述文字
📋 使用說明：
<BaseStepperNav
  :steps="steps"
  :current-step="currentStep"
  size="md" // 'sm' | 'md' | 'lg'
  variant="default" // 'default' | 'compact'
  :clickable="true" // 是否可點擊
  :show-labels="true" // 是否顯示標籤
  @step-click="handleStepClick"
/>
🔧 Props 參數：
參數類型預設值說明
stepsStep[]必填步驟陣列
currentStepnumber必填目前步驟
clickablebooleantrue是否可點擊
showLabelsbooleantrue是否顯示標籤
size'sm' | 'md' | 'lg''md'元件尺寸
variant'default' | 'compact''default'顯示樣式
📡 Events 事件：
事件名稱參數說明
step-clickstepNumber: number步驟點擊事件
📝 Step 介面：
interface Step {
  number: number // 步驟編號
  title: string // 步驟標題
  description?: string // 可選描述
}
🎯 應用場景：
表單嚮導： 多步驟表單的進度顯示和導航
流程指引： 用戶操作流程的步驟提示
進度追蹤： 任務或流程的完成進度展示
訂單流程： 電商網站的訂單處理步驟
設定嚮導： 系統設定的分步配置引導
🎨 設計說明：
色彩系統： 使用專案標準深藍色 #192A45，與整體設計一致
狀態表達： 已完成（深藍色+勾選）、進行中（深藍色+數字）、未開始（灰色）
響應式： 小螢幕自動隱藏文字標籤，僅保留圓圈和連接線
互動性： 支援點擊跳轉，懸停放大效果
一致性： 與 house-sale.vue 原始設計保持一致的視覺語言

🚫 未使用的 UI 元件

BaseButton

未使用

基礎按鈕元件，提供統一的按鈕樣式

BaseCard

未使用

基礎卡片元件，提供統一的內容容器

示例卡片

這是一個示例卡片

這裡是卡片內容，可以放置任何內容。

BaseInput

未使用

基礎輸入框元件，提供統一的表單輸入樣式，支援必填驗證狀態

基本輸入框
必填狀態演示

此欄位為必填項目

其他狀態
💡 功能特色：
  • • 支援多種輸入類型：text、email、password、number 等
  • • 三種尺寸：sm（小）、md（中）、lg（大）
  • • 必填狀態：標籤後顯示紅色星號 (*)
  • • 必填未填狀態：失焦時顯示淡紅色邊框和背景
  • • 錯誤狀態：紅色邊框和錯誤訊息
  • • 支援前綴和後綴圖示
  • • 可選的清除按鈕功能
  • • 禁用和唯讀狀態支援
  • • 完整的 TypeScript 類型支援
  • • 與 BaseSelect 一致的設計風格
📋 使用說明：
<BaseInput
  v-model="inputValue"
  label="標籤文字"
  placeholder="提示文字"
  :required="true" // 必填狀態
  type="text" // 輸入類型
  size="md" // 'sm' | 'md' | 'lg'
  error="錯誤訊息" // 可選
  :clearable="true" // 顯示清除按鈕
/>
🔴 必填狀態設計：
標籤顯示： 必填欄位標籤後會顯示紅色星號 (*)
一般狀態： 必填欄位的原始狀態，樣式與基本輸入框相同，標籤顯示紅色星號
已填狀態： 必填欄位有內容時，樣式與基本輸入框相同，只在標籤顯示紅色星號
未填狀態： 當必填欄位為空且失去焦點時，顯示淡紅色邊框 (border-red-200) 和淡紅色背景 (bg-red-50)
錯誤狀態： 當有錯誤訊息時，顯示深紅色邊框和錯誤文字
互動設計： 聚焦時隱藏必填未填樣式，讓使用者專注輸入
優先級： 錯誤狀態 > 必填未填狀態 > 必填已填/一般狀態

BaseSelect

未使用

基礎選擇框元件，提供統一的下拉選單樣式

請選擇...

BaseCheckbox

已使用

自訂複選框元件，使用 #937129 金色樣式，支援多種狀態和尺寸

基本狀態
此選項為必填
不同尺寸
多選項目示例 (物件特色)

已選擇：無

帶提示文字
勾選後地址將不會完整顯示
請仔細閱讀服務條款與隱私政策
💡 功能特色：
  • • 使用 #937129 金色作為選中狀態的主色調
  • • 支援 v-model 雙向綁定
  • • 三種尺寸：sm（小）、md（中）、lg（大）
  • • 多種狀態：一般、必填、禁用、錯誤
  • • 自動生成唯一 ID
  • • 支援錯誤訊息和提示文字
  • • 完整的無障礙支援
  • • 平滑的動畫效果
  • • TypeScript 類型安全
  • • 與整體設計系統一致的金色主題
📋 使用說明：
<BaseCheckbox
  v-model="checkboxValue"
  label="選項文字"
  size="md" // 'sm' | 'md' | 'lg'
  :required="false"
  :disabled="false"
  error="錯誤訊息" // 可選
  hint="提示文字" // 可選
  @change="handleChange"
/>
🔧 Props 參數：
參數類型預設值說明
modelValuebooleanfalse複選框的值
labelstring-標籤文字
size'sm' | 'md' | 'lg''md'元件尺寸
requiredbooleanfalse是否必填
disabledbooleanfalse是否禁用
errorstring-錯誤訊息
hintstring-提示文字
🎨 設計說明：
主色調： 使用 #937129 金色，與整體設計系統一致
狀態顏色： 選中狀態為金色，錯誤狀態為紅色，禁用狀態為灰色
容器邊框： 在 house-sale.vue 中的多選項目使用金色邊框和淡金色背景
無障礙： 完整的鍵盤導航和螢幕閱讀器支援
動畫： 平滑的顏色漸變和聚焦環效果

BaseRadio

新建立

基礎單選按鈕元件，使用 #937129 金色樣式，支援多種狀態和尺寸

基本使用

已選擇：選項二

不同尺寸
特殊狀態
此選項有錯誤
帶提示文字
請仔細閱讀並同意我們的服務條款
您可以選擇不同意，但無法使用我們的服務
💡 功能特色：
  • • 使用 #937129 金色作為選中狀態的主色調
  • • 支援 v-model 雙向綁定
  • • 三種尺寸：sm（小）、md（中）、lg（大）
  • • 多種狀態：一般、必填、禁用、錯誤
  • • 自動生成唯一 ID
  • • 支援錯誤訊息和提示文字
  • • 完整的無障礙支援
  • • 平滑的動畫效果
  • • TypeScript 類型安全
📋 使用說明：
<BaseRadio
  v-model="radioValue"
  value="option1"
  label="選項一"
  name="radio-group" // 同組需相同
  size="md" // 'sm' | 'md' | 'lg'
  :required="false"
  :disabled="false"
  error="錯誤訊息" // 可選
  hint="提示文字" // 可選
  @change="handleChange"
/>

BaseRadioGroup

新建立

單選按鈕群組元件，簡化多個選項的管理，支援不同佈局方式

水平佈局

已選擇：female

垂直佈局

已選擇：4 星

實際案例 - 房屋資訊

邊間通常有更好的採光和通風

車位：是

邊間：否

不同尺寸
💡 功能特色：
  • • 統一管理多個 radio button
  • • 支援水平和垂直佈局
  • • 自定義網格欄數（1-6欄）
  • • 自動處理 name 屬性
  • • 繼承所有 BaseRadio 的功能
  • • 簡潔的 options 配置
  • • 響應式設計
  • • TypeScript 類型安全
📋 使用說明：
<BaseRadioGroup
  v-model="radioValue"
  label="群組標題"
  :options="optionsArray"
  layout="horizontal" // 'horizontal' | 'vertical'
  :cols="2" // 1-6
  size="md" // 'sm' | 'md' | 'lg'
  :required="false"
  error="錯誤訊息" // 可選
  hint="提示文字" // 可選
  @change="handleChange"
/>
// Options 格式：
[
  { label: '選項一', value: 'option1' },
  { label: '選項二', value: 'option2', disabled: true }
]

標準 Checkbox

原生 HTML

原生 HTML checkbox 元件，使用自訂的 CSS 樣式，採用專案的金色主題設計

標準 Checkbox

💡 功能特色：
  • • 使用原生 HTML checkbox 元素
  • • 自訂 CSS 樣式，與專案設計一致
  • • 支援 v-model 雙向綁定
  • • 金色選中狀態 (#937129)
  • • 支援禁用狀態
  • • 簡潔的標籤設計
  • • 完整的點擊區域
  • • 無額外 JavaScript 依賴
📋 使用說明：
<label class="flex items-center space-x-3 cursor-pointer">
  <input
    type="checkbox"
    v-model="checkboxValue"
    class="checkbox-default"
  />
  <span class="text-sm text-navy-700">選項文字</span>
</label>
🎨 CSS 樣式類別：
checkbox-default： 主要的 checkbox 樣式類別
text-navy-700： 深藍色文字 (用於標籤)
text-gray-400： 灰色文字 (用於禁用狀態)
cursor-pointer： 鼠標指標樣式
flex items-center space-x-3： Flexbox 佈局和間距
🔄 與 BaseCheckbox 比較：
標準 Checkbox： 原生 HTML + 自訂 CSS，輕量級，適合簡單場景
BaseCheckbox： Vue 元件，功能完整，支援錯誤狀態、提示文字等進階功能
使用建議： 簡單場景使用標準 Checkbox，複雜表單使用 BaseCheckbox
一致性： 兩者都使用相同的金色主題 (#937129)

UnderConstruction

未使用

建設中頁面元件，用於顯示未完成的功能

頁面製作中

此功能正在開發中，敬請期待！

🚧
開發中
🚧
回到首頁
或者您可以瀏覽其他已完成的功能

開發進度

預計完成時間：開發中，敬請期待

ScrollToTopButton

已使用

置頂功能按鈕，使用與 PropertySearchTabs 相同的金色漸層設計，當頁面向下滾動時顯示，點擊可平滑滾動回頂部

樣式預覽：
金色漸層設計 - 與 PropertySearchTabs 一致
💡 功能特色：
  • • 自動偵測滾動距離，超過 300px 時顯示
  • • 支援平滑滾動效果
  • • 金色漸層背景 + 深藍色 (navy-900) 箭頭
  • • 包含 fade transition 淡入淡出動畫
  • • 懸停時放大效果和漸層變化
  • • 固定顯示在右下角位置
  • • 響應式設計，支援行動裝置
  • • 與 PropertySearchTabs 設計風格一致
📋 使用範例：
<ScrollToTopButton />
// 可選參數：
<ScrollToTopButton :threshold="500" />

📋 總結報告

19
已使用/新建立元件
4
未使用元件
83%
元件使用率

💡 建議

  • • 考慮移除未使用的 Base 元件，或在適當的地方使用它們
  • • PropertySearchTabs 使用頻率高，可考慮進一步優化
  • • UtilityBar 和 NavigationHeader 是核心元件，需要持續維護
  • • UnderConstruction 元件可用於開發中的頁面
  • • 新建立的 BasePagination 元件待重構現有頁面以提高程式碼重用性
  • • PropertyCard 元件成功統一了首頁的物件卡片，可考慮應用到其他頁面
  • • PropertyInfoCard 元件已成功模組化物件詳情頁，可應用於租屋和土地詳情頁
  • • PropertyListCard 元件提供完整的列表頁物件展示，可重構買屋、租屋、土地等列表頁
  • • LandServiceToggle 元件成功模組化土地服務類型切換，可考慮擴展到其他二元選擇場景
  • • PropertySearchBar 元件統一了搜尋表單介面，可重構所有搜尋頁面以提高一致性
  • • PropertySortToolbar 元件整合了統計和排序功能，可重構結果頁面的工具列
  • • PropertySearchBar 和 PropertySortToolbar 元件組合使用可以快速建立完整的搜尋結果頁面
  • • 新建立的 BaseCheckbox 元件成功統一了複選框樣式，使用 #937129 金色與設計系統一致
  • • BaseCheckbox 元件可以取代專案中所有的原生複選框，提升一致性和可維護性
  • • 新建立的 BaseStepperNav 元件統一了步驟導航設計，使用 #192A45 深藍色與專案主色調一致
  • • BaseStepperNav 元件可應用於多步驟表單、流程嚮導等場景，提升用戶體驗