252 lines
10 KiB
HTML
252 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>紫微 · 磁场管理</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||
<script>window.__INITIAL_STATS__ = {{ initial_stats | safe }};</script>
|
||
</head>
|
||
<body>
|
||
{% include "icons.html" %}
|
||
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<!-- 日历同步弹窗 -->
|
||
<div class="sync-modal-overlay" id="sync-modal-overlay" style="display:none">
|
||
<div class="sync-modal">
|
||
<div class="sync-modal-header">
|
||
<h3>📅 日历同步</h3>
|
||
<button class="sync-modal-close" onclick="closeSyncModal()">×</button>
|
||
</div>
|
||
<div class="sync-modal-loading" id="sync-loading">
|
||
<div class="sync-spinner"></div>
|
||
<p>正在从钉钉同步过去4周~未来4周日程…</p>
|
||
</div>
|
||
<div class="sync-modal-results" id="sync-results" style="display:none">
|
||
<div class="sync-summary" id="sync-summary"></div>
|
||
<div class="sync-list" id="sync-list"></div>
|
||
</div>
|
||
<div class="sync-modal-footer">
|
||
<button class="btn-wish-save" onclick="closeSyncModal()">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备注编辑弹窗 -->
|
||
<div class="sync-modal-overlay" id="note-modal" style="display:none">
|
||
<div class="sync-modal" style="max-width:720px">
|
||
<div class="sync-modal-header">
|
||
<h3 id="note-modal-title">备注</h3>
|
||
<button class="sync-modal-close" onclick="closeNoteModal()">×</button>
|
||
</div>
|
||
<div style="padding:16px">
|
||
<textarea id="note-modal-textarea" style="width:100%; min-height:300px; padding:12px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; line-height:1.6; resize:vertical; box-sizing:border-box" placeholder="写点备注…"></textarea>
|
||
</div>
|
||
<div class="sync-modal-footer">
|
||
<button class="btn-wish-cancel" onclick="closeNoteModal()">取消</button>
|
||
<button class="btn-wish-save" onclick="saveNoteModal()">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-layout">
|
||
|
||
<!-- ═══ 左侧边栏 ═══ -->
|
||
<aside class="sidebar">
|
||
|
||
<!-- 用户信息 -->
|
||
<div class="sidebar-user" id="sidebar-user-menu" onclick="toggleUserMenu(event)">
|
||
<div class="user-avatar">{{ username[0] }}</div>
|
||
<span class="user-name">{{ username }}</span>
|
||
<div class="user-dropdown" id="user-dropdown" style="display:none">
|
||
<a class="user-dropdown-item" href="/logout" onclick="return confirm('确定退出登录？')">
|
||
<svg class="icon-sm"><use href="#icon-logout"/></svg> 退出登录
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能入口 -->
|
||
<nav class="sidebar-nav">
|
||
<a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
|
||
<svg class="icon-md"><use href="#icon-calendar"/></svg>
|
||
<span class="nav-label">打卡</span>
|
||
</a>
|
||
<a class="nav-item" data-panel="history" onclick="switchPanel('history')">
|
||
<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-md"><use href="#icon-sun"/></svg>
|
||
<span class="nav-label">蓝图</span>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- ═══ 右侧主内容区 ═══ -->
|
||
<main class="main-content">
|
||
|
||
<!-- ── 每周打卡面板 ── -->
|
||
<section class="panel active" id="panel-daily">
|
||
<div class="panel-header">
|
||
<h2>每周打卡</h2>
|
||
<div class="panel-header-right">
|
||
<input type="week" id="check-date" class="check-date-input" onchange="loadCheckin()">
|
||
<button class="btn-cal-sync" onclick="syncCalendar()" title="同步钉钉日历">
|
||
<svg class="icon-sm"><use href="#icon-calendar"/></svg> 日历同步
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="daily-layout">
|
||
<!-- 左侧：统计 + 日历 -->
|
||
<div class="daily-sidebar">
|
||
<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 inline">
|
||
<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-header cal-month-header">
|
||
<button class="cal-nav" onclick="changeCalMonth(-1)">
|
||
<svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
|
||
</button>
|
||
<span class="cal-month-label" id="cal-month-label">7月</span>
|
||
<button class="cal-nav" onclick="changeCalMonth(1)">
|
||
<svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="cal-week-rows" id="cal-weeks"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧：Tab + 内容 -->
|
||
<div class="daily-main">
|
||
<div class="daily-tabs">
|
||
<button class="daily-tab active" data-tab="morning" onclick="switchDailyTab(this)">
|
||
<svg class="icon-sm"><use href="#icon-sun"/></svg> 本周重点
|
||
</button>
|
||
<button class="daily-tab" data-tab="evening" onclick="switchDailyTab(this)">
|
||
<svg class="icon-sm"><use href="#icon-magnifying-glass"/></svg> 责善改过
|
||
</button>
|
||
<button class="daily-tab" data-tab="study" onclick="switchDailyTab(this)">
|
||
<svg class="icon-sm"><use href="#icon-book-open"/></svg> 勤学打卡
|
||
</button>
|
||
</div>
|
||
<div class="daily-grid">
|
||
<div class="card card-morning daily-card active" data-card="morning">
|
||
<div class="card-head">
|
||
<div class="card-head-left">
|
||
<svg class="icon-h2"><use href="#icon-sun"/></svg>
|
||
<h3>本周重点</h3>
|
||
</div>
|
||
<button class="btn-edit-toggle" onclick="toggleEditMode(this)" title="编辑">
|
||
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="card-desc">本周最重要的事</p>
|
||
<div id="morning-list"></div>
|
||
<button class="btn-add edit-only" onclick="addMorning()">
|
||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
|
||
</button>
|
||
<div class="morning-calendar" id="morning-calendar" style="display:none">
|
||
<div class="morning-calendar-head">
|
||
<svg class="icon-sm"><use href="#icon-calendar"/></svg>
|
||
<span>本周日程</span>
|
||
</div>
|
||
<div id="morning-calendar-list"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card card-evening daily-card" data-card="evening">
|
||
<div class="card-head">
|
||
<div class="card-head-left">
|
||
<svg class="icon-h2"><use href="#icon-magnifying-glass"/></svg>
|
||
<h3>责善 · 改过</h3>
|
||
</div>
|
||
<button class="btn-edit-toggle" onclick="toggleEditMode(this)" title="编辑">
|
||
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="card-desc">本周反思改正（最多5条）</p>
|
||
<div id="evening-list"></div>
|
||
<button class="btn-add edit-only" onclick="addEvening()">
|
||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
|
||
</button>
|
||
</div>
|
||
<div class="card card-study daily-card" data-card="study">
|
||
<div class="card-head">
|
||
<div class="card-head-left">
|
||
<svg class="icon-h2"><use href="#icon-book-open"/></svg>
|
||
<h3>勤学打卡</h3>
|
||
</div>
|
||
<button class="btn-edit-toggle" id="study-edit-toggle" onclick="toggleStudyEdit()" title="编辑">
|
||
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="card-desc">本周修行清单</p>
|
||
<div id="study-cards"></div>
|
||
<button class="btn-add edit-only-study" onclick="addStudyItem()" style="margin-top:10px">
|
||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加习惯
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div><!-- /daily-main -->
|
||
</div><!-- /daily-layout -->
|
||
</section>
|
||
|
||
<!-- ── 历史记录面板 ── -->
|
||
<section class="panel" id="panel-history">
|
||
<div class="panel-header">
|
||
<h2>历史记录</h2>
|
||
</div>
|
||
<div id="history-grid" class="history-grid"></div>
|
||
</section>
|
||
|
||
<!-- ── 蓝图面板 ── -->
|
||
<section class="panel" id="panel-blueprint">
|
||
<div class="panel-header">
|
||
<h2>人生蓝图</h2>
|
||
</div>
|
||
<!-- Tab 筛选 -->
|
||
<div class="bp-tabs">
|
||
<button class="bp-tab active" data-filter="all" onclick="filterBlueprint(this)">
|
||
<svg class="icon-sm"><use href="#icon-list-bullet"/></svg> 全部
|
||
</button>
|
||
<button class="bp-tab" data-filter="morning" onclick="filterBlueprint(this)">
|
||
<svg class="icon-sm"><use href="#icon-bolt"/></svg> 立志
|
||
</button>
|
||
<button class="bp-tab" data-filter="evening" onclick="filterBlueprint(this)">
|
||
<svg class="icon-sm"><use href="#icon-magnifying-glass"/></svg> 责善
|
||
</button>
|
||
<button class="bp-tab" data-filter="study" onclick="filterBlueprint(this)">
|
||
<svg class="icon-sm"><use href="#icon-book-open"/></svg> 勤学
|
||
</button>
|
||
</div>
|
||
<!-- 明细列表 -->
|
||
<div class="bp-list" id="bp-list"></div>
|
||
<div class="bp-list-empty" id="bp-list-empty" style="display:none">暂无记录</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
||
</body>
|
||
</html>
|