coder/xian-favor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 侧边栏文件夹UI优化 - 折叠式设计

Browse Source 
- 新建文件夹按钮移到类别右侧（文件夹+图标）
- 默认折叠状态，点击类别名称展开/折叠
- 投影箭头指示展开状态（▶折叠，▼展开）
- 按钮hover时显示绿色背景，更明显可见
This commit is contained in:
hubian
2026-04-22 10:44:53 +08:00
parent 4783e9d88e
commit 7af3a7f21d
1 changed files with 93 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
xian_favor/api.py
View File

@@ -929,12 +929,49 @@ INDEX_TEMPLATE = '''
opacity: 0.8;
}
/* 文件夹列表样式 */
.sidebar-section .section-header { font-weight: 500; }
/* 文件夹列表样式 - 折叠式 */
.sidebar-section { margin-bottom: 2px; }
.sidebar-section .section-header {
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 10px;
}
.sidebar-section .section-header .header-left {
display: flex;
align-items: center;
flex: 1;
}
.sidebar-section .section-header .toggle-arrow {
font-size: 10px;
margin-right: 8px;
transition: transform 0.2s;
}
.sidebar-section.expanded .section-header .toggle-arrow {
transform: rotate(90deg);
}
.sidebar-section .section-header .new-folder-btn {
font-size: 14px;
color: #adb5bd;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.2s;
background: rgba(255,255,255,0.1);
}
.sidebar-section .section-header .new-folder-btn:hover {
color: #fff;
background: #28a745;
}
.folder-list {
padding-left: 10px;
max-height: 150px;
max-height: 200px;
overflow-y: auto;
display: none; /* 默认隐藏 */
}
.sidebar-section.expanded .folder-list {
display: block; /* 展开时显示 */
}
.folder-list a {
padding: 6px 20px;
@@ -1041,31 +1078,59 @@ INDEX_TEMPLATE = '''
<a href="#" data-filter="starred"><i class="bi bi-star-fill" style="color:#ffc107;"></i> 重点关注</a>
<!-- 文本类别 -->
<div class="sidebar-section">
<a href="#" data-filter="text" class="section-header"><i class="bi bi-file-text"></i> 文本</a>
<div class="sidebar-section" id="section-text">
<a href="#" class="section-header" onclick="toggleSection('text'); return false;">
<span class="header-left">
<span class="toggle-arrow"><i class="bi bi-chevron-right"></i></span>
<i class="bi bi-file-text"></i> 文本
</span>
<span class="new-folder-btn" onclick="event.stopPropagation(); showNewFolderModal('text'); return false;">
<i class="bi bi-folder-plus"></i>
</span>
</a>
<div class="folder-list" id="folderList-text"></div>
<a href="#" class="folder-action" onclick="showNewFolderModal('text'); return false;"><i class="bi bi-folder-plus"></i> 新建文件夹</a>
</div>
<!-- 链接类别 -->
<div class="sidebar-section">
<a href="#" data-filter="link" class="section-header"><i class="bi bi-link-45deg"></i> 链接</a>
<div class="sidebar-section" id="section-link">
<a href="#" class="section-header" onclick="toggleSection('link'); return false;">
<span class="header-left">
<span class="toggle-arrow"><i class="bi bi-chevron-right"></i></span>
<i class="bi bi-link-45deg"></i> 链接
</span>
<span class="new-folder-btn" onclick="event.stopPropagation(); showNewFolderModal('link'); return false;">
<i class="bi bi-folder-plus"></i>
</span>
</a>
<div class="folder-list" id="folderList-link"></div>
<a href="#" class="folder-action" onclick="showNewFolderModal('link'); return false;"><i class="bi bi-folder-plus"></i> 新建文件夹</a>
</div>
<!-- 专栏类别 -->
<div class="sidebar-section">
<a href="#" data-filter="column" class="section-header"><i class="bi bi-newspaper"></i> 专栏</a>
<div class="sidebar-section" id="section-column">
<a href="#" class="section-header" onclick="toggleSection('column'); return false;">
<span class="header-left">
<span class="toggle-arrow"><i class="bi bi-chevron-right"></i></span>
<i class="bi bi-newspaper"></i> 专栏
</span>
<span class="new-folder-btn" onclick="event.stopPropagation(); showNewFolderModal('column'); return false;">
<i class="bi bi-folder-plus"></i>
</span>
</a>
<div class="folder-list" id="folderList-column"></div>
<a href="#" class="folder-action" onclick="showNewFolderModal('column'); return false;"><i class="bi bi-folder-plus"></i> 新建文件夹</a>
</div>
<!-- 待办类别 -->
<div class="sidebar-section">
<a href="#" data-filter="todo" class="section-header"><i class="bi bi-check2-square"></i> 待办</a>
<div class="sidebar-section" id="section-todo">
<a href="#" class="section-header" onclick="toggleSection('todo'); return false;">
<span class="header-left">
<span class="toggle-arrow"><i class="bi bi-chevron-right"></i></span>
<i class="bi bi-check2-square"></i> 待办
</span>
<span class="new-folder-btn" onclick="event.stopPropagation(); showNewFolderModal('todo'); return false;">
<i class="bi bi-folder-plus"></i>
</span>
</a>
<div class="folder-list" id="folderList-todo"></div>
<a href="#" class="folder-action" onclick="showNewFolderModal('todo'); return false;"><i class="bi bi-folder-plus"></i> 新建文件夹</a>
</div>
<hr class="border-secondary">
@@ -3375,15 +3440,20 @@ async function loadFolders() {
function renderFolderList(type) {
const container = document.getElementById(`folderList-${type}`);
const section = document.getElementById(`section-${type}`);
if (!container) return;
const folders = allFolders[type] || [];
if (folders.length === 0) {
container.innerHTML = '';
if (section) section.classList.remove('expanded');
return;
}
// 默认不展开，保持折叠状态
// if (section) section.classList.add('expanded'); // 已移除
container.innerHTML = folders.map(f => `
<a href="#" data-folder="${f.id}" onclick="filterByFolder('${type}', ${f.id}); return false;">
<i class="bi bi-folder"></i> ${f.name} <small class="text-muted">(${f.item_count || 0})</small>
@@ -3391,6 +3461,14 @@ function renderFolderList(type) {
`).join('');
}
// 切换文件夹区域展开/折叠
function toggleSection(type) {
const section = document.getElementById(`section-${type}`);
if (!section) return;
section.classList.toggle('expanded');
}
async function showNewFolderModal(type) {
// 离线检查
if (!checkOnlineBeforeAction('新建文件夹')) return;