v2.0.6 — 侧边栏改为窄列式(OPC风格):图标在上+短文字在下

This commit is contained in:
mac
2026-07-24 17:18:44 +08:00
parent cd90c2d799
commit 0e75326b5f
2 changed files with 46 additions and 72 deletions
+11 -57
View File
@@ -42,81 +42,35 @@
<!-- 用户信息 -->
<div class="sidebar-user">
<div class="user-avatar">{{ username[0] }}</div>
<div class="user-info">
<span class="user-name">{{ username }}</span>
<span class="user-tag">道阁 · 紫微</span>
</div>
<span class="user-name">{{ username }}</span>
<a href="/logout" class="btn-logout-icon" title="退出登录" onclick="return confirm('确定退出登录?')">
<svg class="icon-sm"><use href="#icon-logout"/></svg>
</a>
</div>
<!-- 统计信息 -->
<div class="sidebar-stats" id="sidebar-stats">
<div class="stat-item">
<span class="stat-num" id="stat-days">--</span>
<span class="stat-label">打卡周</span>
</div>
<div class="stat-item">
<span class="stat-num" id="stat-morning">--</span>
<span class="stat-label">立志</span>
</div>
<div class="stat-item">
<span class="stat-num" id="stat-study">--</span>
<span class="stat-label">勤学</span>
</div>
</div>
<!-- 日历(周视图) -->
<div class="calendar-widget">
<div class="cal-header">
<button class="cal-nav" onclick="changeCalYear(-1)">
<svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
</button>
<span class="cal-month-label" id="cal-year-label">2026年</span>
<button class="cal-nav" onclick="changeCalYear(1)">
<svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
</button>
</div>
<div class="cal-week-list" id="cal-week-list"></div>
<div class="cal-legend">
<span class="legend-dot pass"></span> 达标
<span class="legend-dot fail"></span> 未达标
<span class="legend-dot empty"></span> 未打卡
</div>
</div>
<!-- 功能入口 -->
<nav class="sidebar-nav">
<a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
<svg class="icon-sm"><use href="#icon-calendar"/></svg>
每周打卡
<svg class="icon-md"><use href="#icon-calendar"/></svg>
<span class="nav-label">打卡</span>
</a>
<a class="nav-item" data-panel="weekly" onclick="switchPanel('weekly')">
<svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
每周评分
<svg class="icon-md"><use href="#icon-chart-bar"/></svg>
<span class="nav-label">评分</span>
</a>
<a class="nav-item" data-panel="wishes" onclick="switchPanel('wishes')">
<svg class="icon-sm"><use href="#icon-star"/></svg>
心愿清单
<svg class="icon-md"><use href="#icon-star"/></svg>
<span class="nav-label">心愿</span>
</a>
<a class="nav-item" data-panel="history" onclick="switchPanel('history')">
<svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
历史记录
<svg class="icon-md"><use href="#icon-list-bullet"/></svg>
<span class="nav-label">记录</span>
</a>
<a class="nav-item" data-panel="blueprint" onclick="switchPanel('blueprint')">
<svg class="icon-sm"><use href="#icon-sun"/></svg>
人生蓝图
<svg class="icon-md"><use href="#icon-sun"/></svg>
<span class="nav-label">蓝图</span>
</a>
</nav>
<!-- 底部新建按钮 -->
<div class="sidebar-footer">
<button class="btn-new-day" onclick="goToCurrentWeek()">
<svg class="icon-sm"><use href="#icon-sun"/></svg>
回到本周
</button>
</div>
</aside>
<!-- ═══ 右侧主内容区 ═══ -->