feat: Implement sidebar navigation with folder tree and controls

This commit is contained in:
Will Miao
2025-08-26 09:40:17 +08:00
parent c2a8508513
commit 4dc80e7f6e
8 changed files with 780 additions and 257 deletions

View File

@@ -1,14 +1,4 @@
<div class="controls">
{% if folders|length > 1 %}
<div class="folder-tags-container">
<div class="folder-tags">
{% for folder in folders %}
<div class="tag" data-folder="{{ folder }}">{{ folder }}</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="actions">
<div class="action-buttons">
<div title="Sort models by..." class="control-group">
@@ -75,9 +65,9 @@
</div>
<div class="controls-right">
<div class="toggle-folders-container">
<button class="toggle-folders-btn icon-only" title="Toggle folder tags">
<i class="fas fa-tags"></i>
<div class="sidebar-toggle-container">
<button class="sidebar-toggle-btn icon-only" title="Toggle folder sidebar">
<i class="fas fa-folder-tree"></i>
</button>
</div>
@@ -107,6 +97,13 @@
</div>
</div>
</div>
<!-- Breadcrumb Navigation -->
<div id="breadcrumbContainer" class="breadcrumb-container hidden">
<nav class="breadcrumb-nav" id="breadcrumbNav">
<!-- Breadcrumbs will be populated by JavaScript -->
</nav>
</div>
</div>
<!-- Add bulk operations panel (initially hidden) -->

View File

@@ -15,13 +15,35 @@
{% block content %}
{% include 'components/controls.html' %}
{% include 'components/alphabet_bar.html' %}
{% include 'components/duplicates_banner.html' %}
<!-- Lora卡片容器 -->
<div class="card-grid" id="modelGrid">
<!-- Cards will be dynamically inserted here -->
<div class="main-layout">
<!-- Folder Navigation Sidebar -->
<div class="folder-sidebar" id="folderSidebar">
<div class="sidebar-header">
<h3><i class="fas fa-folder-tree"></i> Folders</h3>
<button class="sidebar-close-btn" id="sidebarCloseBtn">
<i class="fas fa-times"></i>
</button>
</div>
<div class="sidebar-content">
<div class="folder-tree-container">
<div class="folder-tree" id="sidebarFolderTree">
<!-- Tree will be populated by JavaScript -->
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="content-area">
<!-- Lora卡片容器 -->
<div class="card-grid" id="modelGrid">
<!-- Cards will be dynamically inserted here -->
</div>
</div>
</div>
<!-- Bulk operations panel will be inserted here by JavaScript -->
{% endblock %}