b320641d9c
前端修复: - calendar_page: 移除不存在的 JournalEntry.content getter - responsive_scaffold: 移除不存在的 notchThickness 参数 - splash_page: SingleTickerProvider → TickerProvider (多 AnimationController) - profile_page: UserRoleType.name → .code (修复运行时崩溃) - 导入缺失的 user.dart 后端修复: - class_service: generate_class_code 取 UUID 后6位(随机部分)避免碰撞 - diary_role_seed: 移除不存在的 id 列,使用复合主键 ON CONFLICT 基础设施: - config/default.toml: CORS 改为通配符(开发模式) - scripts/dev.sh: 统一启动脚本(自动清理端口) - docs/opendesign/: Open Design 设计规格 HTML 原型稿 验证结果: flutter analyze 0 error, cargo test 77/77 通过, 17个页面全部渲染正常
515 lines
18 KiB
HTML
515 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, height=844, initial-scale=1, viewport-fit=cover">
|
|
<title>暖记 — 日历视图</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/tokens.css">
|
|
<link rel="stylesheet" href="../css/components.css">
|
|
<style>
|
|
body {
|
|
width: 390px;
|
|
height: 844px;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
position: relative;
|
|
}
|
|
|
|
/* Global focus styles */
|
|
button:focus-visible, a:focus-visible, [role="tab"]:focus-visible {
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
outline: none;
|
|
}
|
|
|
|
.content-area {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: calc(var(--tab-height) + var(--safe-bottom));
|
|
overflow-y: auto;
|
|
padding: 0 var(--space-5);
|
|
padding-top: calc(var(--safe-top) + var(--space-2));
|
|
scrollbar-width: none;
|
|
}
|
|
.content-area::-webkit-scrollbar { display: none; }
|
|
|
|
/* Month header */
|
|
.month-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
.month-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
}
|
|
.month-nav {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
.month-nav button {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--border);
|
|
background: var(--surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: var(--fg);
|
|
transition: all var(--motion-fast);
|
|
}
|
|
.month-nav button:hover { border-color: var(--accent); color: var(--accent); }
|
|
.month-nav button svg { width: 18px; height: 18px; }
|
|
|
|
/* View toggle */
|
|
.view-toggle {
|
|
display: flex;
|
|
background: var(--surface);
|
|
border-radius: var(--radius-pill);
|
|
padding: 3px;
|
|
margin-bottom: var(--space-5);
|
|
border: 1px solid var(--border-soft);
|
|
}
|
|
.view-toggle button {
|
|
flex: 1;
|
|
padding: 8px 0;
|
|
min-height: 44px;
|
|
border: none;
|
|
border-radius: var(--radius-pill);
|
|
background: transparent;
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
transition: all var(--motion-fast);
|
|
}
|
|
.view-toggle button.active {
|
|
background: var(--accent);
|
|
color: var(--accent-on);
|
|
box-shadow: var(--elev-soft);
|
|
}
|
|
|
|
/* Calendar grid */
|
|
.weekday-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
text-align: center;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.weekday-row span {
|
|
font-size: var(--text-xs);
|
|
color: var(--meta);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.calendar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 4px;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.cal-day {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all var(--motion-fast);
|
|
background: transparent;
|
|
border: none;
|
|
font-size: var(--text-sm);
|
|
color: var(--fg);
|
|
gap: 2px;
|
|
min-height: 44px;
|
|
}
|
|
.cal-day:hover { background: var(--surface-warm); }
|
|
.cal-day.empty { cursor: default; }
|
|
.cal-day.empty:hover { background: transparent; }
|
|
.cal-day.other-month { color: var(--meta); }
|
|
.cal-day.today {
|
|
background: var(--accent);
|
|
color: var(--accent-on);
|
|
font-weight: 700;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.cal-day.selected {
|
|
background: var(--surface-warm);
|
|
border: 2px solid var(--accent);
|
|
}
|
|
.cal-day.today.selected {
|
|
background: var(--accent);
|
|
border: 2px solid var(--accent);
|
|
}
|
|
.mood-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
}
|
|
.mood-dot.happy { background: var(--secondary); }
|
|
.mood-dot.love { background: var(--accent); }
|
|
.mood-dot.calm { background: var(--tertiary); }
|
|
.mood-dot.sad { background: #5B7DB1; }
|
|
.mood-dot.tired { background: #8B7E74; }
|
|
|
|
/* Entry indicator dot */
|
|
.entry-indicator {
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 5px;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
}
|
|
.cal-day.today .entry-indicator { background: var(--accent-on); }
|
|
|
|
/* Timeline section */
|
|
.timeline-section {
|
|
margin-top: var(--space-2);
|
|
}
|
|
.timeline-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.timeline-header h3 {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
}
|
|
.timeline-count {
|
|
font-size: var(--text-sm);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
position: relative;
|
|
}
|
|
.timeline-line {
|
|
width: 2px;
|
|
background: var(--border);
|
|
position: absolute;
|
|
left: 19px;
|
|
top: 36px;
|
|
bottom: -16px;
|
|
}
|
|
.timeline-item:last-child .timeline-line { display: none; }
|
|
|
|
.timeline-dot {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
background: var(--surface);
|
|
border: 2px solid var(--border-soft);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-content {
|
|
flex: 1;
|
|
background: var(--surface);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4);
|
|
box-shadow: var(--elev-soft);
|
|
border: 1px solid var(--border-soft);
|
|
cursor: pointer;
|
|
transition: transform var(--motion-fast);
|
|
}
|
|
.timeline-content:hover { transform: translateY(-1px); }
|
|
|
|
.tl-time {
|
|
font-size: var(--text-xs);
|
|
color: var(--muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
.tl-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
margin-bottom: 4px;
|
|
}
|
|
.tl-excerpt {
|
|
font-size: var(--text-sm);
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Mood summary */
|
|
.mood-summary {
|
|
background: var(--surface);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-5);
|
|
margin-bottom: var(--space-5);
|
|
box-shadow: var(--elev-soft);
|
|
border: 1px solid var(--border-soft);
|
|
}
|
|
.mood-summary h4 {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--fg);
|
|
}
|
|
.mood-bar-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-3);
|
|
height: 80px;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.mood-bar {
|
|
flex: 1;
|
|
border-radius: 6px 6px 0 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
padding-bottom: 4px;
|
|
font-size: 16px;
|
|
transition: height var(--motion-base) var(--ease-bounce);
|
|
}
|
|
.mood-labels {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
}
|
|
.mood-labels span {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* Empty state for no entries on a day */
|
|
.empty-day {
|
|
display: none; /* Shown via JS when no entries exist */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-8) var(--space-5);
|
|
text-align: center;
|
|
}
|
|
.empty-day .empty-circle {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
border: 2px dashed var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: var(--space-3);
|
|
font-size: 24px;
|
|
opacity: 0.6;
|
|
}
|
|
.empty-day .empty-text {
|
|
font-size: var(--text-base);
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.empty-day .empty-hint {
|
|
font-size: var(--text-sm);
|
|
color: var(--meta);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="content-area">
|
|
|
|
<!-- Month header -->
|
|
<div class="month-header anim-fade">
|
|
<div class="month-title">2026年5月</div>
|
|
<div class="month-nav">
|
|
<button aria-label="上个月"><svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M11 14l-5-5 5-5"/></svg></button>
|
|
<button aria-label="下个月"><svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M7 4l5 5-5 5"/></svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View toggle -->
|
|
<div class="view-toggle anim-fade" style="animation-delay: 0.1s" role="tablist">
|
|
<button class="active" role="tab" aria-label="月视图" aria-selected="true">月视图</button>
|
|
<button role="tab" aria-label="周视图" aria-selected="false">周视图</button>
|
|
<button role="tab" aria-label="时间轴" aria-selected="false">时间轴</button>
|
|
</div>
|
|
|
|
<!-- Mood summary - using standardized 5 moods -->
|
|
<div class="mood-summary anim-fade" style="animation-delay: 0.15s">
|
|
<h4>本月心情概览</h4>
|
|
<div class="mood-bar-chart">
|
|
<div class="mood-bar" style="height:65%;background:var(--secondary)">😊</div>
|
|
<div class="mood-bar" style="height:45%;background:var(--tertiary)">😐</div>
|
|
<div class="mood-bar" style="height:20%;background:#5B7DB1">😢</div>
|
|
<div class="mood-bar" style="height:10%;background:var(--accent)">😡</div>
|
|
<div class="mood-bar" style="height:15%;background:#8B7E74">🤔</div>
|
|
</div>
|
|
<div class="mood-labels">
|
|
<span>开心 12天</span>
|
|
<span>平静 8天</span>
|
|
<span>难过 2天</span>
|
|
<span>生气 1天</span>
|
|
<span>思考 3天</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weekday row -->
|
|
<div class="weekday-row anim-fade" style="animation-delay: 0.2s" aria-hidden="true">
|
|
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
|
|
</div>
|
|
|
|
<!-- Calendar grid -->
|
|
<div class="calendar-grid anim-fade" style="animation-delay: 0.25s">
|
|
<!-- Row 1: May starts on Friday -->
|
|
<div class="cal-day empty"></div>
|
|
<div class="cal-day empty"></div>
|
|
<div class="cal-day empty"></div>
|
|
<div class="cal-day empty"></div>
|
|
<div class="cal-day empty"></div>
|
|
<div class="cal-day" data-day="1"><span>1</span><div class="mood-dot happy"></div></div>
|
|
<div class="cal-day" data-day="2"><span>2</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
|
|
<!-- Row 2 -->
|
|
<div class="cal-day" data-day="3"><span>3</span><div class="mood-dot calm"></div></div>
|
|
<div class="cal-day" data-day="4"><span>4</span><div class="mood-dot love"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="5"><span>5</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="6"><span>6</span><div class="mood-dot happy"></div></div>
|
|
<div class="cal-day" data-day="7"><span>7</span><div class="mood-dot tired"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="8"><span>8</span><div class="mood-dot happy"></div></div>
|
|
<div class="cal-day" data-day="9"><span>9</span><div class="mood-dot love"></div><div class="entry-indicator"></div></div>
|
|
|
|
<!-- Row 3 -->
|
|
<div class="cal-day" data-day="10"><span>10</span><div class="mood-dot calm"></div></div>
|
|
<div class="cal-day" data-day="11"><span>11</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="12"><span>12</span><div class="mood-dot tired"></div></div>
|
|
<div class="cal-day" data-day="13"><span>13</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="14"><span>14</span><div class="mood-dot love"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="15"><span>15</span><div class="mood-dot calm"></div></div>
|
|
<div class="cal-day" data-day="16"><span>16</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
|
|
<!-- Row 4 -->
|
|
<div class="cal-day" data-day="17"><span>17</span><div class="mood-dot sad"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="18"><span>18</span><div class="mood-dot calm"></div></div>
|
|
<div class="cal-day" data-day="19"><span>19</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="20"><span>20</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="21"><span>21</span><div class="mood-dot love"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="22"><span>22</span><div class="mood-dot tired"></div></div>
|
|
<div class="cal-day" data-day="23"><span>23</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
|
|
<!-- Row 5 -->
|
|
<div class="cal-day" data-day="24"><span>24</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="25"><span>25</span><div class="mood-dot calm"></div></div>
|
|
<div class="cal-day" data-day="26"><span>26</span><div class="mood-dot love"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="27"><span>27</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="28"><span>28</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="29"><span>29</span><div class="mood-dot love"></div><div class="entry-indicator"></div></div>
|
|
<div class="cal-day" data-day="30"><span>30</span><div class="mood-dot happy"></div><div class="entry-indicator"></div></div>
|
|
|
|
<!-- Row 6 -->
|
|
<div class="cal-day today selected" data-day="31"><span>31</span><div class="mood-dot love" style="background:var(--accent-on)"></div></div>
|
|
</div>
|
|
|
|
<!-- Today's timeline -->
|
|
<div class="timeline-section">
|
|
<div class="timeline-header">
|
|
<h3>5月31日 · 今天</h3>
|
|
<span class="timeline-count">3条记录</span>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-line" aria-hidden="true"></div>
|
|
<div class="timeline-dot" aria-hidden="true">😊</div>
|
|
<div class="timeline-content">
|
|
<div class="tl-time">14:30 · 心情: 开心</div>
|
|
<div class="tl-title">图书馆的午后时光</div>
|
|
<div class="tl-excerpt">今天下午去图书馆自习，阳光从窗外洒进来，暖暖的...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-line" aria-hidden="true"></div>
|
|
<div class="timeline-dot" aria-hidden="true">😊</div>
|
|
<div class="timeline-content">
|
|
<div class="tl-time">09:15 · 心情: 开心</div>
|
|
<div class="tl-title">周末早起的奖励</div>
|
|
<div class="tl-excerpt">难得周末早起，去食堂吃了喜欢的豆浆油条，还买了一束花...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-line" aria-hidden="true"></div>
|
|
<div class="timeline-dot" aria-hidden="true">😐</div>
|
|
<div class="timeline-content">
|
|
<div class="tl-time">07:00 · 心情: 平静</div>
|
|
<div class="tl-title">晨跑记录</div>
|
|
<div class="tl-excerpt">早起跑了两圈操场，空气很清新。看到有人在遛小狗...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state for no entries on a day (hidden by default) -->
|
|
<div class="empty-day" id="emptyDay">
|
|
<div class="empty-circle">📝</div>
|
|
<div class="empty-text">这一天没有记录</div>
|
|
<div class="empty-hint">点击 + 开始记录这一天的心情和故事</div>
|
|
</div>
|
|
|
|
<div style="height: var(--space-8)"></div>
|
|
</div>
|
|
|
|
<!-- Tab bar -->
|
|
<nav class="tab-bar" role="tablist">
|
|
<button class="tab-item" role="tab" aria-label="首页" aria-selected="false">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
<span>首页</span>
|
|
</button>
|
|
<button class="tab-item active" role="tab" aria-label="日历" aria-selected="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
<span>日历</span>
|
|
</button>
|
|
<button class="tab-item" role="tab" aria-label="写日记" aria-selected="false" style="position:relative">
|
|
<div style="width:44px;height:44px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-top:-16px;box-shadow:0 4px 12px var(--shadow-accent)">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" style="width:22px;height:22px;stroke:var(--accent-on)" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
|
|
</div>
|
|
<span style="margin-top:2px">写日记</span>
|
|
</button>
|
|
<button class="tab-item" role="tab" aria-label="发现" aria-selected="false">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<span>发现</span>
|
|
</button>
|
|
<button class="tab-item" role="tab" aria-label="我的" aria-selected="false">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
<span>我的</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="dynamic-island" aria-hidden="true"></div>
|
|
<div class="home-indicator" style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:101" aria-hidden="true"></div>
|
|
|
|
<script src="../js/theme-switcher.js"></script>
|
|
</body>
|
|
</html>
|