618 lines
22 KiB
HTML
618 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>組件索引 - Drama Ling Component Library</title>
|
|
<link rel="stylesheet" href="assets/styles/layout.css">
|
|
<style>
|
|
/* 組件索引專用樣式 */
|
|
.index-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-xl);
|
|
}
|
|
|
|
.index-card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: all 0.3s;
|
|
border: 1px solid var(--color-gray-200);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.index-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.index-card-header {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
color: white;
|
|
padding: var(--spacing-lg);
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.index-card-body {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.index-card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.index-card-description {
|
|
color: var(--color-gray-600);
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.index-card-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-gray-200);
|
|
}
|
|
|
|
.component-count {
|
|
background: var(--color-gray-100);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.875rem;
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
.status-badge {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-complete {
|
|
background: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
.status-progress {
|
|
background: var(--color-warning);
|
|
color: white;
|
|
}
|
|
|
|
.status-planned {
|
|
background: var(--color-gray-400);
|
|
color: white;
|
|
}
|
|
|
|
.category-header {
|
|
margin-top: var(--spacing-2xl);
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 2px solid var(--color-gray-200);
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 1.5rem;
|
|
color: var(--color-gray-900);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-xl);
|
|
padding: var(--spacing-lg);
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: var(--spacing-md);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: var(--radius-md);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border: 1px solid var(--color-gray-300);
|
|
background: white;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background: var(--color-gray-50);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.stats-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.stat-item {
|
|
background: white;
|
|
padding: var(--spacing-lg);
|
|
border-radius: var(--radius-lg);
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--color-gray-600);
|
|
font-size: 0.9rem;
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="component-library-container">
|
|
<!-- 頂部導航 -->
|
|
<header class="library-header">
|
|
<div class="flex items-center gap-2">
|
|
<span style="font-size: 1.5rem;">🎨</span>
|
|
<h1>Drama Ling 組件庫索引</h1>
|
|
<span class="badge">v1.0</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 側邊欄 -->
|
|
<aside class="library-sidebar">
|
|
<nav>
|
|
<div class="nav-category">
|
|
<div class="nav-category-title">快速導航</div>
|
|
<a href="index.html" class="nav-link">📚 組件展示</a>
|
|
<a href="components-index.html" class="nav-link active">🗂️ 組件索引</a>
|
|
<a href="COMPONENT_LIBRARY_GUIDE.md" class="nav-link">📖 使用指南</a>
|
|
</div>
|
|
|
|
<div class="nav-category">
|
|
<div class="nav-category-title">組件分類</div>
|
|
<a href="#basic" class="nav-link">基礎組件</a>
|
|
<a href="#interactive" class="nav-link">互動組件</a>
|
|
<a href="#input" class="nav-link">輸入組件</a>
|
|
<a href="#display" class="nav-link">展示組件</a>
|
|
<a href="#navigation" class="nav-link">導航組件</a>
|
|
<a href="#gamification" class="nav-link">遊戲化組件</a>
|
|
</div>
|
|
|
|
<div class="nav-category">
|
|
<div class="nav-category-title">頁面範例</div>
|
|
<a href="pages/login-page.html" class="nav-link">登入頁面</a>
|
|
<a href="pages/dashboard.html" class="nav-link">儀表板</a>
|
|
<a href="pages/learning-page.html" class="nav-link">學習頁面</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主內容區 -->
|
|
<main class="library-main">
|
|
<!-- 統計數據 -->
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<div class="stat-value">46</div>
|
|
<div class="stat-label">組件總數</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">33</div>
|
|
<div class="stat-label">已完成</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">72%</div>
|
|
<div class="stat-label">完成度</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">6</div>
|
|
<div class="stat-label">分類數量</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜尋和篩選 -->
|
|
<div class="search-bar">
|
|
<input type="text" class="search-input" placeholder="搜尋組件...">
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active">全部</button>
|
|
<button class="filter-btn">已完成</button>
|
|
<button class="filter-btn">開發中</button>
|
|
<button class="filter-btn">計劃中</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基礎組件 -->
|
|
<section id="basic">
|
|
<div class="category-header">
|
|
<h2 class="category-title">
|
|
<span>🔧</span>
|
|
基礎組件
|
|
</h2>
|
|
</div>
|
|
<div class="index-grid">
|
|
<a href="index.html#buttons" class="index-card">
|
|
<div class="index-card-header">🔘</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">按鈕 Buttons</h3>
|
|
<p class="index-card-description">多種樣式和尺寸的按鈕，支援各種狀態和交互效果</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">12 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#inputs" class="index-card">
|
|
<div class="index-card-header">📝</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">輸入框 Inputs</h3>
|
|
<p class="index-card-description">文字、密碼、搜尋等輸入框，支援驗證狀態</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">8 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#cards" class="index-card">
|
|
<div class="index-card-header">🎴</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">卡片 Cards</h3>
|
|
<p class="index-card-description">內容容器卡片，支援多種布局和樣式</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">6 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#alerts" class="index-card">
|
|
<div class="index-card-header">⚠️</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">警告 Alerts</h3>
|
|
<p class="index-card-description">提示訊息組件，支援不同類型和樣式</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">5 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 互動組件 -->
|
|
<section id="interactive">
|
|
<div class="category-header">
|
|
<h2 class="category-title">
|
|
<span>🎯</span>
|
|
互動組件
|
|
</h2>
|
|
</div>
|
|
<div class="index-grid">
|
|
<a href="components/01-interactive/modals.html" class="index-card">
|
|
<div class="index-card-header">🪟</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">模態框 Modals</h3>
|
|
<p class="index-card-description">彈出視窗組件，支援多種尺寸和動畫效果</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">4 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">💬</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">工具提示 Tooltips</h3>
|
|
<p class="index-card-description">懸浮提示組件，支援多個方向和觸發方式</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">4 個變體</span>
|
|
<span class="status-badge status-progress">開發中</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">📋</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">下拉選單 Dropdowns</h3>
|
|
<p class="index-card-description">選項列表組件，支援搜尋和多選功能</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">3 個變體</span>
|
|
<span class="status-badge status-planned">計劃中</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 輸入組件 -->
|
|
<section id="input">
|
|
<div class="category-header">
|
|
<h2 class="category-title">
|
|
<span>✏️</span>
|
|
輸入組件
|
|
</h2>
|
|
</div>
|
|
<div class="index-grid">
|
|
<a href="components/02-input/forms.html" class="index-card">
|
|
<div class="index-card-header">📋</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">表單 Forms</h3>
|
|
<p class="index-card-description">完整表單系統，包含驗證和錯誤處理</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">10 個組件</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">🎚️</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">滑塊 Sliders</h3>
|
|
<p class="index-card-description">數值選擇滑塊，支援範圍和步進設置</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">3 個變體</span>
|
|
<span class="status-badge status-progress">開發中</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">🔄</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">開關 Switches</h3>
|
|
<p class="index-card-description">切換開關組件，支援多種樣式和狀態</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">2 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 展示組件 -->
|
|
<section id="display">
|
|
<div class="category-header">
|
|
<h2 class="category-title">
|
|
<span>📊</span>
|
|
展示組件
|
|
</h2>
|
|
</div>
|
|
<div class="index-grid">
|
|
<a href="components/03-display/data-display.html" class="index-card">
|
|
<div class="index-card-header">📈</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">數據展示 Data Display</h3>
|
|
<p class="index-card-description">表格、列表、統計卡片等數據展示組件</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">8 個組件</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">📊</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">圖表 Charts</h3>
|
|
<p class="index-card-description">數據可視化圖表，支援多種圖表類型</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">5 個類型</span>
|
|
<span class="status-badge status-planned">計劃中</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#badges" class="index-card">
|
|
<div class="index-card-header">🏷️</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">徽章 Badges</h3>
|
|
<p class="index-card-description">標籤和徽章組件，用於狀態和分類顯示</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">6 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 導航組件 -->
|
|
<section id="navigation">
|
|
<div class="category-header">
|
|
<h2 class="category-title">
|
|
<span>🧭</span>
|
|
導航組件
|
|
</h2>
|
|
</div>
|
|
<div class="index-grid">
|
|
<a href="components/05-navigation/navigation.html" class="index-card">
|
|
<div class="index-card-header">🗺️</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">導航元件 Navigation</h3>
|
|
<p class="index-card-description">導航列、側邊欄、麵包屑等導航組件</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">5 個組件</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">📄</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">分頁 Pagination</h3>
|
|
<p class="index-card-description">頁面切換組件，支援多種樣式</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">3 個變體</span>
|
|
<span class="status-badge status-progress">開發中</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="index-card">
|
|
<div class="index-card-header">📑</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">標籤頁 Tabs</h3>
|
|
<p class="index-card-description">內容切換標籤，支援多種樣式和動畫</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">4 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 遊戲化組件 -->
|
|
<section id="gamification">
|
|
<div class="category-header">
|
|
<h2 class="category-title">
|
|
<span>🎮</span>
|
|
遊戲化組件
|
|
</h2>
|
|
</div>
|
|
<div class="index-grid">
|
|
<a href="components/06-gamification/game-elements.html" class="index-card">
|
|
<div class="index-card-header">🏆</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">遊戲化元件 Game Elements</h3>
|
|
<p class="index-card-description">成就、等級、排行榜等完整遊戲化系統</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">10 個組件</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#life-bar" class="index-card">
|
|
<div class="index-card-header">❤️</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">生命值 Life Bar</h3>
|
|
<p class="index-card-description">生命值和能量條顯示組件</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">3 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#star-rating" class="index-card">
|
|
<div class="index-card-header">⭐</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">星級評分 Stars</h3>
|
|
<p class="index-card-description">評分和評價顯示組件</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">2 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="index.html#progress" class="index-card">
|
|
<div class="index-card-header">📊</div>
|
|
<div class="index-card-body">
|
|
<h3 class="index-card-title">進度條 Progress</h3>
|
|
<p class="index-card-description">學習進度和任務進度顯示</p>
|
|
<div class="index-card-meta">
|
|
<span class="component-count">4 個變體</span>
|
|
<span class="status-badge status-complete">已完成</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// 搜尋功能
|
|
document.querySelector('.search-input').addEventListener('input', function(e) {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const cards = document.querySelectorAll('.index-card');
|
|
|
|
cards.forEach(card => {
|
|
const title = card.querySelector('.index-card-title').textContent.toLowerCase();
|
|
const description = card.querySelector('.index-card-description').textContent.toLowerCase();
|
|
|
|
if (title.includes(searchTerm) || description.includes(searchTerm)) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 篩選功能
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
// 移除所有 active
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const filter = this.textContent;
|
|
const cards = document.querySelectorAll('.index-card');
|
|
|
|
cards.forEach(card => {
|
|
const badge = card.querySelector('.status-badge');
|
|
|
|
if (filter === '全部') {
|
|
card.style.display = '';
|
|
} else if (filter === '已完成' && badge.classList.contains('status-complete')) {
|
|
card.style.display = '';
|
|
} else if (filter === '開發中' && badge.classList.contains('status-progress')) {
|
|
card.style.display = '';
|
|
} else if (filter === '計劃中' && badge.classList.contains('status-planned')) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |