v1.1.1 — 心愿清单移至独立面板

- 从侧边栏移出,改为左侧菜单入口 → 独立页面
- 卡片式布局,对齐每周评分等面板风格
- 拖拽排序、完成勾选、编辑模式切换功能不变
This commit is contained in:
mac
2026-06-03 13:48:20 +08:00
parent 690509bfb3
commit 1d86d7f736
3 changed files with 100 additions and 108 deletions

View File

@@ -68,39 +68,6 @@
</div>
</div>
<!-- 心愿清单 -->
<div class="wishes-panel" id="wishes-panel">
<div class="wishes-header">
<svg class="icon-sm" style="color:var(--primary)"><use href="#icon-star"/></svg>
<span>心愿清单</span>
<button class="wishes-add-btn edit-only" id="wishes-add-btn" onclick="showWishForm()">
<svg class="icon-sm"><use href="#icon-plus"/></svg>
</button>
<button class="btn-edit-toggle" onclick="toggleWishesEdit(this)" title="编辑">
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
</button>
</div>
<!-- 新增表单 -->
<div class="wish-form" id="wish-form" style="display:none">
<input type="text" id="wish-name" placeholder="心愿名称…" maxlength="50">
<div class="wish-form-row">
<select id="wish-priority">
<option value="高">高优先</option>
<option value="中" selected>中优先</option>
<option value="低">低优先</option>
</select>
<input type="date" id="wish-deadline">
</div>
<div class="wish-form-actions">
<button class="btn-wish-save" onclick="addWish()">添加</button>
<button class="btn-wish-cancel" onclick="hideWishForm()">取消</button>
</div>
</div>
<!-- 列表 -->
<div class="wishes-list" id="wishes-list"></div>
<div class="wishes-empty" id="wishes-empty">暂无心愿,点击 + 添加</div>
</div>
<!-- 功能入口 -->
<nav class="sidebar-nav">
<a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
@@ -111,6 +78,10 @@
<svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
每周评分
</a>
<a class="nav-item" data-panel="wishes" onclick="switchPanel('wishes')">
<svg class="icon-sm"><use href="#icon-star"/></svg>
心愿清单
</a>
<a class="nav-item" data-panel="history" onclick="switchPanel('history')">
<svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
历史记录
@@ -222,6 +193,40 @@
<div id="history-grid" class="history-grid"></div>
</section>
<!-- ── 心愿清单面板 ── -->
<section class="panel" id="panel-wishes">
<div class="panel-header">
<h2>心愿清单</h2>
<button class="btn-edit-toggle" id="wishes-edit-toggle" onclick="toggleWishesEdit(this)" title="编辑">
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
</button>
</div>
<!-- 新增表单 -->
<div class="wish-form" id="wish-form" style="display:none">
<input type="text" id="wish-name" placeholder="心愿名称…" maxlength="50">
<div class="wish-form-row">
<select id="wish-priority">
<option value="高">高优先</option>
<option value="中" selected>中优先</option>
<option value="低">低优先</option>
</select>
<input type="date" id="wish-deadline">
</div>
<div class="wish-form-actions">
<button class="btn-wish-save" onclick="addWish()">添加</button>
<button class="btn-wish-cancel" onclick="hideWishForm()">取消</button>
</div>
</div>
<button class="btn-add edit-only" id="wishes-add-btn" onclick="showWishForm()" style="margin-bottom:12px">
<svg class="icon-sm"><use href="#icon-plus"/></svg> 新增心愿
</button>
<!-- 列表 -->
<div class="wishes-grid" id="wishes-grid">
<div class="wishes-list" id="wishes-list"></div>
<div class="wishes-empty" id="wishes-empty">暂无心愿,点击上方按钮添加</div>
</div>
</section>
</main>
</div>