mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
Refactor code structure for improved readability and maintainability
This commit is contained in:
catlog22
3963
ccw/src/templates/dashboard.css
Normal file
3963
ccw/src/templates/dashboard.css
Normal file
File diff suppressed because it is too large
Load Diff
182
ccw/src/templates/dashboard.html
Normal file
182
ccw/src/templates/dashboard.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CCW Dashboard</title>
|
||||
<style>
|
||||
{{CSS_CONTENT}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<!-- Top Bar -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<button class="menu-toggle" id="menuToggle">☰</button>
|
||||
<div class="logo">
|
||||
<span class="logo-icon">⚡</span>
|
||||
<span class="logo-text">Claude Code Workflow</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Path Selector -->
|
||||
<div class="path-selector">
|
||||
<label>Project:</label>
|
||||
<div class="path-dropdown">
|
||||
<button class="path-current" id="pathButton">
|
||||
<span class="path-text" id="currentPath">{{PROJECT_PATH}}</span>
|
||||
<span class="dropdown-arrow">▼</span>
|
||||
</button>
|
||||
<div class="path-menu" id="pathMenu">
|
||||
<div class="menu-label">Recent Projects</div>
|
||||
<div id="recentPaths">
|
||||
<!-- Dynamic recent paths -->
|
||||
</div>
|
||||
<div class="path-actions">
|
||||
<button class="path-browse" id="browsePath">
|
||||
📂 Browse...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Actions -->
|
||||
<div class="header-actions">
|
||||
<button class="theme-toggle" id="themeToggle" title="Toggle theme">🌙</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Sidebar Overlay (mobile) -->
|
||||
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
||||
|
||||
<!-- Main Layout -->
|
||||
<div class="main-layout">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<!-- Sessions Section -->
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-header">
|
||||
<span class="nav-icon">📁</span>
|
||||
<span class="nav-section-title">Sessions</span>
|
||||
</div>
|
||||
<ul class="nav-items">
|
||||
<li class="nav-item active tooltip" data-filter="all" data-tooltip="All Sessions">
|
||||
<span class="nav-icon">📋</span>
|
||||
<span class="nav-text">All</span>
|
||||
<span class="badge" id="badgeAll">0</span>
|
||||
</li>
|
||||
<li class="nav-item tooltip" data-filter="active" data-tooltip="Active Sessions">
|
||||
<span class="nav-icon">🟢</span>
|
||||
<span class="nav-text">Active</span>
|
||||
<span class="badge success" id="badgeActive">0</span>
|
||||
</li>
|
||||
<li class="nav-item tooltip" data-filter="archived" data-tooltip="Archived Sessions">
|
||||
<span class="nav-icon">📦</span>
|
||||
<span class="nav-text">Archived</span>
|
||||
<span class="badge" id="badgeArchived">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Lite Tasks Section -->
|
||||
<div class="nav-section" id="liteTasksNav">
|
||||
<div class="nav-section-header">
|
||||
<span class="nav-icon">⚡</span>
|
||||
<span class="nav-section-title">Lite Tasks</span>
|
||||
</div>
|
||||
<ul class="nav-items">
|
||||
<li class="nav-item tooltip" data-lite="lite-plan" data-tooltip="Lite Plan Sessions">
|
||||
<span class="nav-icon">📝</span>
|
||||
<span class="nav-text">lite-plan</span>
|
||||
<span class="badge" id="badgeLitePlan">0</span>
|
||||
</li>
|
||||
<li class="nav-item tooltip" data-lite="lite-fix" data-tooltip="Lite Fix Sessions">
|
||||
<span class="nav-icon">🔧</span>
|
||||
<span class="nav-text">lite-fix</span>
|
||||
<span class="badge" id="badgeLiteFix">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="sidebar-footer">
|
||||
<button class="sidebar-toggle" id="sidebarToggle">
|
||||
<span class="toggle-icon">◀</span>
|
||||
<span class="toggle-text">Collapse</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Content Area -->
|
||||
<main class="content">
|
||||
<!-- Stats Grid -->
|
||||
<section class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📊</div>
|
||||
<div class="stat-value" id="statTotalSessions">0</div>
|
||||
<div class="stat-label">Total Sessions</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🟢</div>
|
||||
<div class="stat-value" id="statActiveSessions">0</div>
|
||||
<div class="stat-label">Active Sessions</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📋</div>
|
||||
<div class="stat-value" id="statTotalTasks">0</div>
|
||||
<div class="stat-label">Total Tasks</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">✅</div>
|
||||
<div class="stat-value" id="statCompletedTasks">0</div>
|
||||
<div class="stat-label">Completed Tasks</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Header -->
|
||||
<div class="content-header">
|
||||
<h2 class="content-title" id="contentTitle">All Sessions</h2>
|
||||
<div class="search-box">
|
||||
<input type="text" placeholder="Search..." id="searchInput">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<section class="main-content" id="mainContent">
|
||||
<!-- Dynamic content: sessions grid or session detail page -->
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bottom-bar">
|
||||
<div>Generated: <span id="generatedAt">-</span></div>
|
||||
<div>CCW Dashboard v1.0</div>
|
||||
</footer>
|
||||
|
||||
<!-- Task Detail Drawer -->
|
||||
<div class="task-detail-drawer" id="taskDetailDrawer">
|
||||
<div class="drawer-header">
|
||||
<h3 class="drawer-title" id="drawerTaskTitle">Task Details</h3>
|
||||
<button class="drawer-close" onclick="closeTaskDrawer()">×</button>
|
||||
</div>
|
||||
<div class="drawer-content" id="drawerContent">
|
||||
<!-- Dynamic content -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer-overlay" id="drawerOverlay" onclick="closeTaskDrawer()"></div>
|
||||
</div>
|
||||
|
||||
<!-- D3.js for Flowchart -->
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
|
||||
<script>
|
||||
{{JS_CONTENT}}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2763
ccw/src/templates/dashboard.js
Normal file
2763
ccw/src/templates/dashboard.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user