Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5e97f6d6d8 | ||
|
|
99bc6d3c6c | ||
|
|
5d3192dfaf | ||
|
|
9c9511e817 | ||
|
|
b5dbb13956 | ||
|
|
5ef340cb08 | ||
|
|
073b570681 | ||
|
|
ce0e374e86 | ||
|
|
f7bbc505b9 | ||
|
|
351e1f18ae | ||
|
|
0e75326b5f | ||
|
|
cd90c2d799 | ||
|
|
c2cbbdb12a | ||
|
|
8223f72544 | ||
|
|
36b58a8b73 | ||
|
|
5b73fc0eae |
87
database.py
87
database.py
@@ -224,3 +224,90 @@ def reorder_wishes(order_list):
|
||||
conn.execute('UPDATE wishes SET sort_order = ? WHERE id = ?', (idx, wid))
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
|
||||
def get_weeks_list():
|
||||
"""返回所有已有打卡记录的周号列表"""
|
||||
conn = get_conn()
|
||||
rows = conn.execute('SELECT DISTINCT date FROM checkins ORDER BY date').fetchall()
|
||||
conn.close()
|
||||
return [r['date'] for r in rows]
|
||||
|
||||
|
||||
def get_daily_backup(week_str):
|
||||
"""获取某周的原始日记录(从备份表)"""
|
||||
from datetime import datetime as _dt, timedelta
|
||||
if '-W' not in week_str:
|
||||
return []
|
||||
year_part, week_part = week_str.split('-W')
|
||||
try:
|
||||
year = int(year_part)
|
||||
week = int(week_part)
|
||||
except (ValueError, IndexError):
|
||||
return []
|
||||
jan1 = _dt(year, 1, 1)
|
||||
delta = timedelta(days=(week - 1) * 7 - jan1.weekday())
|
||||
monday = jan1 + delta
|
||||
dates = [monday.strftime('%Y-%m-%d')]
|
||||
for i in range(1, 7):
|
||||
dates.append((monday + timedelta(days=i)).strftime('%Y-%m-%d'))
|
||||
conn = get_conn()
|
||||
placeholders = ','.join('?' for _ in dates)
|
||||
exists = conn.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='checkins_daily_backup'").fetchone()
|
||||
if not exists:
|
||||
conn.close()
|
||||
return []
|
||||
rows = conn.execute(
|
||||
f"SELECT date, data FROM checkins_daily_backup WHERE date IN ({placeholders}) ORDER BY date",
|
||||
dates
|
||||
).fetchall()
|
||||
conn.close()
|
||||
results = []
|
||||
for row in rows:
|
||||
results.append({'date': row['date'], 'data': json.loads(row['data'])})
|
||||
return results
|
||||
|
||||
|
||||
def _aggregate_daily_to_weekly(conn):
|
||||
"""将 checkins_daily_backup 的日数据聚合为周数据,写入 checkins"""
|
||||
from datetime import datetime as _dt
|
||||
rows = conn.execute('SELECT date, data FROM checkins_daily_backup ORDER BY date').fetchall()
|
||||
weekly = {}
|
||||
for row in rows:
|
||||
try:
|
||||
d = _dt.strptime(row['date'], '%Y-%m-%d')
|
||||
except ValueError:
|
||||
continue
|
||||
iso_year, iso_week, _ = d.isocalendar()
|
||||
week_key = f"{iso_year}-W{iso_week:02d}"
|
||||
if week_key not in weekly:
|
||||
weekly[week_key] = {'morning': [], 'evening': [], 'study': []}
|
||||
data = json.loads(row['data'])
|
||||
for mi in data.get('morning', []):
|
||||
text = mi if isinstance(mi, str) else mi.get('text', '')
|
||||
if text:
|
||||
existing_texts = {x if isinstance(x, str) else x.get('text', '') for x in weekly[week_key]['morning']}
|
||||
if text not in existing_texts:
|
||||
weekly[week_key]['morning'].append(mi)
|
||||
for ei in data.get('evening', []):
|
||||
mst = ei.get('mistake', '') if isinstance(ei, dict) else ''
|
||||
if mst:
|
||||
existing = {x.get('mistake', '') if isinstance(x, dict) else x for x in weekly[week_key]['evening']}
|
||||
if mst not in existing:
|
||||
weekly[week_key]['evening'].append(ei if isinstance(ei, dict) else {'mistake': ei, 'improvement': ''})
|
||||
existing_names = {}
|
||||
for si in weekly[week_key]['study']:
|
||||
nm = si.get('name', '') if isinstance(si, dict) else str(si)
|
||||
if nm:
|
||||
existing_names[nm] = si
|
||||
for si in data.get('study', []):
|
||||
nm = si.get('name', '') if isinstance(si, dict) else str(si)
|
||||
if nm and nm not in existing_names:
|
||||
weekly[week_key]['study'].append(si)
|
||||
existing_names[nm] = si
|
||||
now = _dt.now().isoformat()
|
||||
for week_key in sorted(weekly.keys()):
|
||||
conn.execute(
|
||||
'INSERT INTO checkins (date, data, created_at, updated_at) VALUES (?, ?, ?, ?)',
|
||||
(week_key, json.dumps(weekly[week_key], ensure_ascii=False), now, now)
|
||||
)
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
State
|
||||
================================================================ */
|
||||
var calendarStatus = {}; // { "2026-W30": "pass", ... }
|
||||
var calYear; // 日历显示的年
|
||||
var calYear;
|
||||
var calMonth = new Date().getMonth(); // 月份索引 0-11
|
||||
var activePanel = 'daily';
|
||||
var weekOffset = 0;
|
||||
var lastSavedData = null;
|
||||
@@ -145,35 +146,51 @@
|
||||
renderCalendar();
|
||||
};
|
||||
|
||||
/** 渲染周历 */
|
||||
/** 切换月份 */
|
||||
window.changeCalMonth = function(dir) {
|
||||
calMonth += dir;
|
||||
if (calMonth > 11) { calMonth = 0; calYear++; }
|
||||
if (calMonth < 0) { calMonth = 11; calYear--; }
|
||||
renderCalendar();
|
||||
};
|
||||
|
||||
/** 渲染年-月-周选择器 */
|
||||
function renderCalendar() {
|
||||
document.getElementById('cal-year-label').textContent = calYear + '年';
|
||||
var yearStart = new Date(calYear, 0, 1);
|
||||
var yearEnd = new Date(calYear, 11, 31);
|
||||
document.getElementById('cal-month-label').textContent = (calMonth + 1) + '月';
|
||||
|
||||
// 计算该月包含的周
|
||||
var firstDay = new Date(calYear, calMonth, 1);
|
||||
var lastDay = new Date(calYear, calMonth + 1, 0);
|
||||
var monday = new Date(firstDay);
|
||||
monday.setDate(monday.getDate() - monday.getDay() + (monday.getDay() === 0 ? -6 : 1));
|
||||
var weeks = [];
|
||||
var d = new Date(yearStart);
|
||||
// 推进到第一个周一
|
||||
d.setDate(d.getDate() - d.getDay() + (d.getDay() === 0 ? -6 : 1));
|
||||
while (d <= yearEnd) {
|
||||
var wk = fmtWeek(d);
|
||||
weeks.push(wk);
|
||||
d.setDate(d.getDate() + 7);
|
||||
while (monday <= lastDay) {
|
||||
weeks.push(fmtWeek(monday));
|
||||
monday.setDate(monday.getDate() + 7);
|
||||
}
|
||||
// 确保至少有4周显示
|
||||
while (weeks.length < 4) {
|
||||
var w = fmtWeek(monday);
|
||||
if (weeks.indexOf(w) < 0) weeks.push(w);
|
||||
monday.setDate(monday.getDate() + 7);
|
||||
}
|
||||
|
||||
var todayWk = fmtWeek(new Date());
|
||||
var el = document.getElementById('cal-week-list');
|
||||
var html = '';
|
||||
for (var i = 0; i < weeks.length; i++) {
|
||||
var w = weeks[i];
|
||||
var wHtml = '';
|
||||
for (var i2 = 0; i2 < weeks.length; i2++) {
|
||||
var w = weeks[i2];
|
||||
var cls = 'cal-week-cell';
|
||||
var status = calendarStatus[w];
|
||||
if (status) cls += ' ' + status;
|
||||
if (w === todayWk) cls += ' today';
|
||||
if (w === selectedWeek) cls += ' selected';
|
||||
html += '<div class="' + cls + '" data-week="' + w + '" title="' + w + '">' +
|
||||
'W' + w.split('-W')[1] + '</div>';
|
||||
wHtml += '<div class="' + cls + '" data-week="' + w + '" title="' + w + '">' +
|
||||
'第' + w.split('-W')[1].replace(/^0/, '') + '周</div>';
|
||||
}
|
||||
el.innerHTML = html;
|
||||
el.querySelectorAll('.cal-week-cell').forEach(function(cell) {
|
||||
var we = document.getElementById('cal-weeks');
|
||||
we.innerHTML = wHtml;
|
||||
we.querySelectorAll('.cal-week-cell').forEach(function(cell) {
|
||||
cell.addEventListener('click', function() {
|
||||
var wk = this.dataset.week;
|
||||
if (wk) navigateToWeek(wk);
|
||||
@@ -190,10 +207,11 @@
|
||||
}
|
||||
|
||||
window.goToCurrentWeek = function() {
|
||||
var now = fmtWeek(new Date());
|
||||
calYear = new Date().getFullYear();
|
||||
var now = new Date();
|
||||
calYear = now.getFullYear();
|
||||
calMonth = now.getMonth();
|
||||
renderCalendar();
|
||||
navigateToWeek(now);
|
||||
navigateToWeek(fmtWeek(now));
|
||||
};
|
||||
|
||||
/* ================================================================
|
||||
@@ -441,6 +459,27 @@
|
||||
btn.classList.toggle('active', editing);
|
||||
};
|
||||
|
||||
/* 切换每周打卡 Tab */
|
||||
window.switchDailyTab = function(btn) {
|
||||
var tab = btn.dataset.tab;
|
||||
document.querySelectorAll('.daily-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
document.querySelectorAll('.daily-card').forEach(function(c){ c.classList.remove('active'); });
|
||||
var card = document.querySelector('.daily-card[data-card="' + tab + '"]');
|
||||
if (card) card.classList.add('active');
|
||||
};
|
||||
|
||||
/* 头像菜单 */
|
||||
window.toggleUserMenu = function(e) {
|
||||
e.stopPropagation();
|
||||
var dd = document.getElementById('user-dropdown');
|
||||
if (dd) dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
|
||||
};
|
||||
document.addEventListener('click', function() {
|
||||
var dd = document.getElementById('user-dropdown');
|
||||
if (dd) dd.style.display = 'none';
|
||||
});
|
||||
|
||||
/* ================================================================
|
||||
Load & Auto Save Checkin
|
||||
================================================================ */
|
||||
|
||||
335
static/style.css
335
static/style.css
@@ -18,7 +18,7 @@
|
||||
--radius-sm: 8px;
|
||||
--shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(74,108,247,0.05);
|
||||
--shadow-hover: 0 2px 6px rgba(0,0,0,0.04), 0 6px 18px rgba(74,108,247,0.08);
|
||||
--sidebar-w: 280px;
|
||||
--sidebar-w: 100px;
|
||||
}
|
||||
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
@@ -66,14 +66,64 @@ body {
|
||||
|
||||
.sidebar-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 20px 16px;
|
||||
gap: 8px;
|
||||
padding: 24px 12px 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-user .user-avatar {
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.sidebar-user:hover .user-avatar { transform: scale(1.05); }
|
||||
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-hover);
|
||||
z-index: 100;
|
||||
min-width: 120px;
|
||||
padding: 4px;
|
||||
}
|
||||
.user-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.user-dropdown-item:hover {
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.sidebar-user .user-name {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-user .btn-logout-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
color: #FFF;
|
||||
@@ -131,6 +181,10 @@ body {
|
||||
gap: 8px;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
.daily-sidebar .sidebar-stats {
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: var(--bg);
|
||||
@@ -155,6 +209,45 @@ body {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
Sidebar Dark Theme(左侧导航栏专属)
|
||||
═══════════════════════════════════════════ */
|
||||
.sidebar {
|
||||
background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
|
||||
border-right: 1px solid #334155;
|
||||
}
|
||||
.sidebar .user-name {
|
||||
color: #94A3B8;
|
||||
}
|
||||
.sidebar .user-avatar {
|
||||
background: #4F46E5;
|
||||
color: #FFF;
|
||||
}
|
||||
.sidebar .btn-logout-icon {
|
||||
color: #64748B;
|
||||
}
|
||||
.sidebar .btn-logout-icon:hover {
|
||||
background: rgba(248,113,113,0.15);
|
||||
color: #FCA5A5;
|
||||
}
|
||||
.sidebar .nav-item {
|
||||
color: #94A3B8;
|
||||
}
|
||||
.sidebar .nav-item:hover {
|
||||
background: rgba(99,102,241,0.08);
|
||||
color: #E2E8F0;
|
||||
}
|
||||
.sidebar .nav-item .icon-md {
|
||||
color: #6366F1;
|
||||
}
|
||||
.sidebar .nav-item:hover .icon-md { color: #818CF8; }
|
||||
.sidebar .nav-item.active {
|
||||
background: rgba(99,102,241,0.15);
|
||||
color: #FFF;
|
||||
border: 1px solid rgba(99,102,241,0.3);
|
||||
}
|
||||
.sidebar .nav-item.active .icon-md { color: #818CF8; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
Calendar Widget
|
||||
═══════════════════════════════════════════ */
|
||||
@@ -162,6 +255,73 @@ body {
|
||||
.calendar-widget {
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
.calendar-widget.inline {
|
||||
margin: 0 0 16px;
|
||||
padding: 12px 0;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--card);
|
||||
}
|
||||
.calendar-widget.inline .cal-header {
|
||||
padding: 0 14px 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cal-nav-group { display: flex; gap: 4px; }
|
||||
.cal-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--card);
|
||||
cursor: pointer;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.cal-nav:hover { background: var(--bg); color: var(--text); }
|
||||
/* 月份翻页行 */
|
||||
.cal-month-header {
|
||||
padding: 4px 14px 8px;
|
||||
}
|
||||
.cal-month-header .cal-month-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 周选择 */
|
||||
.cal-weeks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
padding: 8px 14px 10px;
|
||||
}
|
||||
.cal-week-cell {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
border: 1.5px solid var(--border);
|
||||
background: var(--card);
|
||||
}
|
||||
.cal-week-cell:hover { border-color: var(--primary); color: var(--primary); }
|
||||
.cal-week-cell.pass { background: var(--success-light); border-color: var(--success); color: var(--success); }
|
||||
.cal-week-cell.fail { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
|
||||
.cal-week-cell.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
|
||||
.cal-week-cell.selected { background: var(--primary); color: #FFF; border-color: var(--primary); }
|
||||
|
||||
/* 旧样式清理 */
|
||||
.cal-week-list { display: none; }
|
||||
.cal-week-cell .wk-num, .cal-week-cell .wk-dot { display: none; }
|
||||
|
||||
.cal-header {
|
||||
display: flex;
|
||||
@@ -209,14 +369,15 @@ body {
|
||||
|
||||
.cal-week-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 3px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cal-week-cell {
|
||||
aspect-ratio: 1;
|
||||
aspect-ratio: 1.4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
@@ -225,7 +386,10 @@ body {
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
border: 1.5px solid transparent;
|
||||
border: 1.5px solid var(--border);
|
||||
background: var(--card);
|
||||
padding: 2px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cal-week-cell:hover {
|
||||
@@ -234,28 +398,51 @@ body {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.cal-week-cell .wk-num { font-weight: 600; line-height: 1; }
|
||||
.cal-week-cell .wk-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.cal-week-cell.pass {
|
||||
background: var(--success-light);
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
color: var(--success);
|
||||
}
|
||||
.cal-week-cell.pass .wk-dot { background: var(--success); }
|
||||
|
||||
.cal-week-cell.fail {
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
.cal-week-cell.fail .wk-dot { background: var(--danger); }
|
||||
|
||||
.cal-week-cell.today {
|
||||
font-weight: 700;
|
||||
border-color: var(--primary);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
.cal-week-cell.selected {
|
||||
font-weight: 600;
|
||||
border-color: var(--primary-dark);
|
||||
background: #DDE3FD;
|
||||
color: var(--primary-dark);
|
||||
background: var(--primary);
|
||||
color: #FFF;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.cal-week-cell.selected .wk-dot { background: #FFF; }
|
||||
|
||||
/* 月份标识 */
|
||||
.cal-week-cell.month-start::before {
|
||||
content: attr(data-month);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 保留旧 cal-cell 样式(由月历代码生成,但现已不使用) */
|
||||
@@ -332,34 +519,45 @@ body {
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
gap: 4px;
|
||||
padding: 10px 4px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-label { line-height: 1.2; }
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-item .icon-md {
|
||||
flex-shrink: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--text-muted);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.nav-item:hover .icon-md { color: var(--primary); }
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-item.active .icon-md { color: var(--primary); }
|
||||
|
||||
.nav-item .icon-sm {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.icon-md { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
/* ── Sidebar Footer ── */
|
||||
|
||||
@@ -452,33 +650,78 @@ body {
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
Daily Grid — 三栏
|
||||
Daily Panel — 左右两栏布局
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
.daily-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.daily-layout {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* 左侧栏 */
|
||||
.daily-sidebar {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.daily-sidebar .sidebar-stats {
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.daily-sidebar .stat-item {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.daily-sidebar .calendar-widget.inline {
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
/* 右侧主区 */
|
||||
.daily-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 立志 — 左上 */
|
||||
.card-morning {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
.daily-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 1.5px solid var(--border);
|
||||
}
|
||||
.daily-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1.5px;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.daily-tab:hover { color: var(--text); }
|
||||
.daily-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
|
||||
|
||||
/* 改过 — 左下 */
|
||||
.card-evening {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
/* 勤学 — 右列跨2行 */
|
||||
.card-study {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.daily-grid { display: block; }
|
||||
.card.daily-card { display: none; }
|
||||
.card.daily-card.active { display: flex; }
|
||||
|
||||
/* ── Cards ── */
|
||||
|
||||
@@ -1401,11 +1644,9 @@ body {
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.sidebar { width: 240px; min-width: 240px; }
|
||||
:root { --sidebar-w: 240px; }
|
||||
.main-content { padding: 20px 24px; }
|
||||
.daily-grid { grid-template-columns: 1fr; }
|
||||
.card-morning, .card-evening, .card-study { grid-column: 1; grid-row: auto; }
|
||||
.weekly-overview { flex-direction: column; gap: 16px; text-align: center; }
|
||||
.week-days-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
.history-grid { grid-template-columns: 1fr; }
|
||||
|
||||
@@ -40,83 +40,39 @@
|
||||
<aside class="sidebar">
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<div class="sidebar-user">
|
||||
<div class="sidebar-user" id="sidebar-user-menu" onclick="toggleUserMenu(event)">
|
||||
<div class="user-avatar">{{ username[0] }}</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">{{ username }}</span>
|
||||
<span class="user-tag">道阁 · 紫微</span>
|
||||
</div>
|
||||
<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> 未打卡
|
||||
<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-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>
|
||||
|
||||
<!-- ═══ 右侧主内容区 ═══ -->
|
||||
@@ -133,8 +89,60 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="daily-grid">
|
||||
<div class="card card-morning">
|
||||
<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-weeks" 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>
|
||||
@@ -150,7 +158,7 @@
|
||||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
|
||||
</button>
|
||||
</div>
|
||||
<div class="card card-evening">
|
||||
<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>
|
||||
@@ -166,7 +174,7 @@
|
||||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
|
||||
</button>
|
||||
</div>
|
||||
<div class="card card-study">
|
||||
<div class="card card-study daily-card" data-card="study">
|
||||
<div class="card-head">
|
||||
<svg class="icon-h2"><use href="#icon-book-open"/></svg>
|
||||
<h3>勤学打卡</h3>
|
||||
@@ -175,6 +183,8 @@
|
||||
<div id="study-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /daily-main -->
|
||||
</div><!-- /daily-layout -->
|
||||
</section>
|
||||
|
||||
<!-- ── 每周评分面板 ── -->
|
||||
|
||||
Reference in New Issue
Block a user