8e3e232278
修复内容:
- 编辑器返回按钮: 所有 context.go('/editor') 改为 context.push()，pop() 加安全守卫 fallback 到 /home
- Tab 导航: Web 平台强制使用移动端底部 TabBar 布局 (kIsWeb 守卫)
- 数据库编码: db.rs 自动追加 client_encoding=utf8 参数，修复中文 display_name 乱码
- AuthBloc token: 清理冗余 TODO，token 注入已在 AuthRepository 中正常工作
- 影响 9 个文件的编辑器导航调用点统一修改
11 KiB
11 KiB
<!doctype html>
<html lang="zh-CN"> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #FFF8F0; --surface: #FFFFFF; --fg: #2D2420; --fg-2: #5C4F47; --muted: #7A6D63; --meta: #8B7E74; --border: #E8DDD4; --border-soft: #F0E8DF; --accent: #E07A5F; --accent-on: #FFF8F0; --accent-hover: #D06A4F; --accent-glow: rgba(224, 122, 95, 0.25); --secondary: #81B29A; --secondary-soft: #D4E8DC; --tertiary: #F2CC8F; --rose: #D4A5A5; --focus-ring: 0 0 0 3px rgba(224, 122, 95, 0.45); --shadow-accent: 0 4px 14px rgba(224, 122, 95, 0.25); --elev-soft: 0 2px 12px rgba(45, 36, 32, 0.06); --elev-medium: 0 4px 20px rgba(45, 36, 32, 0.08); --elev-float: 0 8px 32px rgba(45, 36, 32, 0.12); --font-display: 'Quicksand', 'Nunito', sans-serif; --font-body: 'Nunito', sans-serif; } [data-theme="pine"] { --bg: #F2F3F0; --surface: #FFFFFF; --fg: #23272F; --fg-2: #484E58; --muted: #6E7380; --meta: #8A8F9A; --border: #D5D2CD; --border-soft: #E3E1DC; --accent: #4A7B9D; --accent-on: #FFFFFF; --accent-hover: #3F6A8A; --accent-glow: rgba(74, 123, 157, 0.25); --secondary: #5B9E7A; --secondary-soft: #D6E8DE; --tertiary: #C49A3C; --rose: #7A8B6A; --focus-ring: 0 0 0 3px rgba(74, 123, 157, 0.45); --shadow-accent: 0 4px 14px rgba(74, 123, 157, 0.25); --elev-soft: 0 2px 12px rgba(35, 39, 47, 0.06); --elev-medium: 0 4px 20px rgba(35, 39, 47, 0.08); --elev-float: 0 8px 32px rgba(35, 39, 47, 0.12); } html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { font-family: var(--font-body); background: linear-gradient(180deg, var(--bg) 0%, var(--tertiary-soft, #FFE8D6) 50%, var(--bg) 100%); color: var(--fg); min-height: 100vh; } .hero { text-align: center; padding: 80px 24px 60px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 60%); pointer-events: none; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent); font-size: 13px; font-weight: 600; margin-bottom: 20px; } .hero h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; } .hero h1 span { color: var(--accent); } .hero .subtitle { font-size: clamp(15px, 2vw, 18px); color: var(--muted); max-width: 500px; margin: 0 auto 32px; line-height: 1.6; } .hero-meta { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .hero-meta span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg-2); } .hero-meta .dot { width: 8px; height: 8px; border-radius: 50%; } .section { max-width: 1400px; margin: 0 auto; padding: 40px 24px; } .section-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-bottom: 8px; } .section-desc { font-size: 15px; color: var(--muted); margin-bottom: 32px; } .screen-gallery { display: flex; gap: 32px; overflow-x: auto; padding-bottom: 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .screen-gallery::-webkit-scrollbar { height: 6px; } .screen-gallery::-webkit-scrollbar-track { background: transparent; } .screen-gallery::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .screen-card { flex-shrink: 0; scroll-snap-align: start; width: 240px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .screen-card:hover { transform: translateY(-8px); } .screen-frame { width: 240px; height: 520px; border-radius: 28px; overflow: hidden; box-shadow: 0 8px 32px rgba(45,36,32,0.12), 0 0 0 1px var(--border-soft); position: relative; background: white; transition: box-shadow 0.3s; } .screen-card:hover .screen-frame { box-shadow: var(--shadow-accent), 0 0 0 1px var(--accent); } .screen-frame iframe { width: 390px; height: 844px; border: none; transform: scale(0.615); transform-origin: top left; pointer-events: none; } .screen-label { margin-top: 16px; text-align: center; } .screen-label .name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg); } .screen-label .desc { font-size: 12px; color: var(--muted); margin-top: 2px; } .tokens-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: 24px; } .token-card { background: var(--surface); border-radius: 14px; padding: 16px; border: 1px solid var(--border-soft); box-shadow: 0 2px 8px rgba(45,36,32,0.04); } .token-swatch { width: 100%; aspect-ratio: 1.4; border-radius: 10px; margin-bottom: 10px; } .token-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 2px; } .token-value { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; } footer { text-align: center; padding: 60px 24px 40px; color: var(--muted); font-size: 14px; } @media (max-width: 768px) { .hero { padding: 60px 20px 40px; } .section { padding: 24px 16px; } .screen-gallery { gap: 20px; } .screen-card { width: 200px; } .screen-frame { width: 200px; height: 434px; } .screen-frame iframe { transform: scale(0.513); } } </style> </head>Design System v1.0
暖记 · 手账日记
用温暖的方式，记录每一天。面向学生的多终端手账日记App，融合日记记录、贴纸装饰、模板系统和心情追踪。
温暖治愈风
iOS / Android / iPad / Desktop
11 核心页面
学生向
全部页面
11个核心页面覆盖完整用户流程 — 从启动到日常使用
启动页
品牌展示 · 进入引导
引导页
3步了解核心功能
首页 · 日记流
心情 · 今日日记 · 历史
手账编辑器
文字 · 贴纸 · 画笔 · 照片
日历视图
月历 · 心情 · 时间轴
心情追踪
心情趋势 · 天气 · 洞察
贴纸素材库
分类浏览 · 素材包 · 收藏
模板画廊
日/周/月视图模板
周概览
一周七天 · 总结统计
月度概览
心情色彩日历 · 精选
个人中心
成就 · 设置 · 同步
视觉系统
暖记的色彩体系
Background
#FFF8F0
Accent
#E07A5F
Secondary
#81B29A
Tertiary
#F2CC8F
Rose
#D4A5A5
Foreground
#2D2420
Muted
#8B7E74
Border
#E8DDD4
暖记 Warm Notes — 多终端手账日记App设计稿
11 核心页面 · iOS / Android / iPad / Desktop · 温暖治愈视觉系统
<script src="js/theme-switcher.js"></script> </html>