355191aaf6
本次提交完成多项核心更新： 1. 新增闲情逸致功能模块，包含时间线、收藏标注、季节主题等基础框架 2. 替换hive为社区维护的hive_ce包，修复依赖兼容问题 3. 统一替换"开发中"提示为"当前设备不支持"，优化用户提示文案 4. 新增多项功能开关与特性标志，统一管理不可用功能提示 5. 完善用户账户洞察系统，新增头像审核中状态检测 6. 优化TTS语音朗读服务，修复Android端引擎初始化问题 7. 重构知识图谱缩放手势逻辑，解决缩放不跟手问题 8. 新增精灵头像组件，替换默认聊天头像样式 9. 新增外部链接跳转确认弹窗，提升使用安全性 10. 升级后端API接口，新增签到配置获取与补签积分规则动态读取 11. 完善多语言翻译覆盖率限制，非中文语言仅显示最高50%进度 12. 新增HTTP缓存拦截器，优化网络请求性能 13. 新增恢复出厂设置选项，完善数据管理功能 同时修复了多处代码细节问题：简化字符串拼接、优化布局代码、移除多余代码等。
477 lines
11 KiB
HTML
477 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>闲情逸致 — 分享卡片</title>
|
|
<style>
|
|
:root {
|
|
--primary: #6C63FF;
|
|
--accent: #4ECDC4;
|
|
--secondary: #FF6B6B;
|
|
--success: #10B981;
|
|
--warning: #F59E0B;
|
|
--info: #3B82F6;
|
|
|
|
--bg-primary: #FAFAFA;
|
|
--bg-card: #FFFFFF;
|
|
--text-primary: #1A1A2E;
|
|
--text-secondary: #6B7280;
|
|
--text-hint: #9CA3AF;
|
|
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-desc {
|
|
font-size: 13px;
|
|
color: var(--text-hint);
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== Share Card Styles ===== */
|
|
.share-card {
|
|
width: 340px;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-lg);
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Style A: Gradient Header */
|
|
.share-card-a {
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.share-card-a .card-gradient {
|
|
height: 120px;
|
|
background: linear-gradient(135deg, #4ECDC4 0%, #44B09E 50%, #2D8B7A 100%);
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.share-card-a .card-gradient::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -20px;
|
|
right: -20px;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.share-card-a .gradient-date {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: white;
|
|
line-height: 1;
|
|
}
|
|
|
|
.share-card-a .gradient-info {
|
|
font-size: 13px;
|
|
color: rgba(255,255,255,0.85);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.share-card-a .card-content {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.share-card-a .card-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.share-card-a .card-desc {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.share-card-a .card-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
font-size: 12px;
|
|
color: var(--text-hint);
|
|
}
|
|
|
|
.share-card-a .card-footer {
|
|
padding: 12px 20px;
|
|
border-top: 0.5px solid rgba(0,0,0,0.06);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.share-card-a .card-brand {
|
|
font-size: 12px;
|
|
color: var(--text-hint);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.share-card-a .card-brand-name {
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Style B: Photo Card */
|
|
.share-card-b {
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.share-card-b .card-photo {
|
|
height: 180px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 64px;
|
|
position: relative;
|
|
}
|
|
|
|
.share-card-b .card-photo-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
background: linear-gradient(transparent, rgba(0,0,0,0.4));
|
|
}
|
|
|
|
.share-card-b .card-photo-date {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: rgba(0,0,0,0.3);
|
|
backdrop-filter: blur(10px);
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.share-card-b .card-content {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.share-card-b .card-season-badge {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
padding: 2px 10px;
|
|
border-radius: 10px;
|
|
background: rgba(78,205,196,0.12);
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.share-card-b .card-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.share-card-b .card-desc {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.share-card-b .card-tags {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.share-card-b .card-tag {
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.share-card-b .card-footer {
|
|
padding: 12px 20px;
|
|
border-top: 0.5px solid rgba(0,0,0,0.06);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.share-card-b .card-brand {
|
|
font-size: 12px;
|
|
color: var(--text-hint);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.share-card-b .card-brand-name {
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Style C: Minimal */
|
|
.share-card-c {
|
|
background: var(--bg-card);
|
|
padding: 24px;
|
|
}
|
|
|
|
.share-card-c .card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.share-card-c .card-date-block {
|
|
text-align: center;
|
|
}
|
|
|
|
.share-card-c .card-date-day {
|
|
font-size: 42px;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.share-card-c .card-date-month {
|
|
font-size: 14px;
|
|
color: var(--text-hint);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.share-card-c .card-season-icon {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.share-card-c .card-divider {
|
|
height: 2px;
|
|
background: linear-gradient(to right, var(--primary), var(--accent));
|
|
border-radius: 1px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.share-card-c .card-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.share-card-c .card-desc {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.share-card-c .card-poem {
|
|
font-size: 13px;
|
|
color: var(--text-hint);
|
|
font-style: italic;
|
|
margin-top: 12px;
|
|
padding-left: 12px;
|
|
border-left: 2px solid var(--accent);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.share-card-c .card-footer {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.share-card-c .card-brand {
|
|
font-size: 12px;
|
|
color: var(--text-hint);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.share-card-c .card-brand-name {
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.action-bar {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
width: 340px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(108,99,255,0.3);
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.style-label {
|
|
font-size: 13px;
|
|
color: var(--text-hint);
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
margin-top: 12px;
|
|
width: 340px;
|
|
}
|
|
|
|
/* Dark Mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-primary: #1A1A2E;
|
|
--bg-card: #2D2D44;
|
|
--text-primary: #E5E5E5;
|
|
--text-secondary: #9CA3AF;
|
|
--text-hint: #6B7280;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-title">📤 分享卡片预览</div>
|
|
<div class="page-desc">点击卡片上的「分享」按钮后，生成以下样式的卡片<br>呼出系统分享面板</div>
|
|
|
|
<!-- Style A -->
|
|
<div class="style-label">方案A: 渐变头图卡片</div>
|
|
<div class="share-card share-card-a">
|
|
<div class="card-gradient">
|
|
<div class="gradient-date">5月27日</div>
|
|
<div class="gradient-info">星期三 · 夏 · ☀️</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-title">🌸 杨梅季</div>
|
|
<div class="card-desc">仙居杨梅·东魁·荸荠种，酸甜多汁，初夏限定美味</div>
|
|
<div class="card-meta">
|
|
<span>📍 浙江·仙居</span>
|
|
<span>🌅 05:12</span>
|
|
<span>🌇 19:02</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="card-brand">🌸 <span class="card-brand-name">闲情逸致</span></div>
|
|
<div style="font-size:11px;color:var(--text-hint)">闲时与你立黄昏</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Style B -->
|
|
<div class="style-label">方案B: 图片卡片</div>
|
|
<div class="share-card share-card-b">
|
|
<div class="card-photo">
|
|
🏔️
|
|
<div class="card-photo-overlay"></div>
|
|
<div class="card-photo-date">5月28日 星期四</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-season-badge">☀️ 夏季</div>
|
|
<div class="card-title">纳木错观星 ✨</div>
|
|
<div class="card-desc">银河拱桥·星空露营·日出金山，世界屋脊上的星空盛宴</div>
|
|
<div class="card-tags">
|
|
<span class="card-tag">🏔️ 海拔4718m</span>
|
|
<span class="card-tag">⚠️ 高原反应</span>
|
|
<span class="card-tag">🌌 观星</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="card-brand">🌸 <span class="card-brand-name">闲情逸致</span></div>
|
|
<div style="font-size:11px;color:var(--text-hint)">灶前笑问粥可温</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Style C -->
|
|
<div class="style-label">方案C: 极简诗意卡片</div>
|
|
<div class="share-card share-card-c">
|
|
<div class="card-top">
|
|
<div class="card-date-block">
|
|
<div class="card-date-day">27</div>
|
|
<div class="card-date-month">5月·星期三</div>
|
|
</div>
|
|
<div class="card-season-icon">☀️</div>
|
|
</div>
|
|
<div class="card-divider"></div>
|
|
<div class="card-title">杨梅季 🍇</div>
|
|
<div class="card-desc">仙居杨梅·东魁·荸荠种<br>📍 浙江·仙居 · 🌅 05:12 · 🌇 19:02</div>
|
|
<div class="card-poem">
|
|
「日啖荔枝三百颗，不辞长作岭南人」<br>
|
|
—— 苏轼
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="card-brand">🌸 <span class="card-brand-name">闲情逸致</span></div>
|
|
<div style="font-size:11px;color:var(--text-hint)">闲时与你立黄昏</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-bar">
|
|
<button class="action-btn secondary" onclick="window.location.href='leisure_timeline.html'">返回</button>
|
|
<button class="action-btn primary" onclick="alert('呼出系统分享')">📤 分享卡片</button>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|