5a49d20c8a
本次提交包含多项核心更新： 1. 全量替换项目内所有xianyan.app域名变更为s2ss.com，包含配置文件、路由、隐私政策等 2. 重构图表库从fl_chart迁移至syncfusion_flutter_charts，优化图表渲染效果 3. 新增宽屏分屏布局支持，包含右侧面板注册表与可拖拽分割线 4. 完善触觉反馈服务与认证感知Mixin，修复多处内存泄漏问题 5. 合并勋章墙与金币记录入口至成就中心，简化个人中心导航 6. 新增收藏与时间线数据合并导入功能 7. 修复多处UI样式问题，统一主题颜色使用规范 8. 新增日历同步与跨平台触觉反馈依赖库 9. 修复BotToast初始化流程，避免路由切换时的弹窗崩溃
871 lines
40 KiB
HTML
871 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1440">
|
||
<title>闲言 - 我的页面宽屏布局</title>
|
||
<style>
|
||
:root {
|
||
--primary: #007AFF;
|
||
--primary-light: rgba(0,122,255,0.12);
|
||
--secondary: #5856D6;
|
||
--background: #FAFAFA;
|
||
--surface: #FFFFFF;
|
||
--surface-secondary: #F2F2F7;
|
||
--text: #1C1C1E;
|
||
--text-secondary: #8E8E93;
|
||
--text-tertiary: #AEAEB2;
|
||
--separator: rgba(60,60,67,0.12);
|
||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 16px;
|
||
--space-4: 24px;
|
||
--space-5: 32px;
|
||
--font-family: -apple-system, system-ui, 'SF Pro Display', 'Segoe UI', sans-serif;
|
||
--nav-width: 72px;
|
||
--glass-bg: rgba(255,255,255,0.72);
|
||
--glass-border: rgba(255,255,255,0.36);
|
||
--glass-blur: 20px;
|
||
--card-bg: rgba(255,255,255,0.8);
|
||
--red: #FF3B30;
|
||
--orange: #FF9500;
|
||
--green: #34C759;
|
||
--teal: #5AC8FA;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--background: #1A1A2E;
|
||
--surface: #16213E;
|
||
--surface-secondary: #0F3460;
|
||
--text: #F5F5F7;
|
||
--text-secondary: #98989D;
|
||
--text-tertiary: #636366;
|
||
--separator: rgba(84,84,88,0.65);
|
||
--glass-bg: rgba(30,30,50,0.72);
|
||
--glass-border: rgba(60,60,80,0.36);
|
||
--card-bg: rgba(30,30,50,0.8);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
background: var(--background);
|
||
color: var(--text);
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
transition: background 0.3s, color 0.3s;
|
||
}
|
||
|
||
.app-shell { display: flex; height: 100vh; width: 100%; }
|
||
|
||
.nav-sidebar {
|
||
width: var(--nav-width);
|
||
min-width: var(--nav-width);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||
border-right: 1px solid var(--separator);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: var(--space-4) 0;
|
||
gap: var(--space-2);
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-logo {
|
||
width: 40px; height: 40px;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; color: #fff;
|
||
margin-bottom: var(--space-4);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.nav-item {
|
||
width: 48px; height: 48px;
|
||
border-radius: var(--radius-lg);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
cursor: pointer; transition: all 0.2s ease;
|
||
font-size: 10px; color: var(--text-secondary); gap: 2px;
|
||
text-decoration: none; position: relative;
|
||
}
|
||
.nav-item .nav-icon { font-size: 22px; line-height: 1; }
|
||
.nav-item .nav-label { font-size: 9px; font-weight: 500; }
|
||
.nav-item:hover { background: var(--primary-light); color: var(--primary); }
|
||
.nav-item.active { background: var(--primary-light); color: var(--primary); }
|
||
.nav-item.active::before {
|
||
content: ''; position: absolute; left: -12px;
|
||
width: 3px; height: 20px; background: var(--primary);
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.nav-spacer { flex: 1; }
|
||
|
||
.nav-theme-btn {
|
||
width: 40px; height: 40px; border-radius: 50%;
|
||
border: none; background: var(--surface-secondary);
|
||
color: var(--text); font-size: 18px; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
.nav-theme-btn:hover { background: var(--primary-light); }
|
||
|
||
.content-area { flex: 1; display: flex; overflow: hidden; position: relative; }
|
||
|
||
.master-panel {
|
||
width: 40%; min-width: 320px; max-width: 600px;
|
||
background: var(--background);
|
||
border-right: 1px solid var(--separator);
|
||
display: flex; flex-direction: column; overflow: hidden;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.master-header {
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||
border-bottom: 1px solid var(--separator);
|
||
}
|
||
|
||
.profile-card {
|
||
display: flex; align-items: center; gap: var(--space-3);
|
||
padding: var(--space-3) 0;
|
||
}
|
||
|
||
.profile-avatar {
|
||
width: 56px; height: 56px; border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 28px; color: #fff;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.profile-info { flex: 1; }
|
||
.profile-name { font-size: 18px; font-weight: 700; }
|
||
.profile-id { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
|
||
|
||
.profile-stats {
|
||
display: flex; gap: var(--space-4);
|
||
padding: var(--space-2) 0 var(--space-3);
|
||
}
|
||
.stat-item { text-align: center; }
|
||
.stat-value { font-size: 16px; font-weight: 700; }
|
||
.stat-label { font-size: 11px; color: var(--text-secondary); }
|
||
|
||
.settings-list {
|
||
flex: 1; overflow-y: auto;
|
||
padding: var(--space-2) var(--space-3);
|
||
}
|
||
|
||
.settings-group {
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.settings-group-title {
|
||
font-size: 12px; font-weight: 600;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
padding: var(--space-2) var(--space-3);
|
||
}
|
||
|
||
.settings-group-card {
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid var(--separator);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex; align-items: center; gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
cursor: pointer; transition: background 0.15s;
|
||
border-bottom: 1px solid var(--separator);
|
||
}
|
||
.setting-item:last-child { border-bottom: none; }
|
||
.setting-item:hover { background: var(--primary-light); }
|
||
.setting-item.selected { background: var(--primary-light); }
|
||
|
||
.setting-icon {
|
||
width: 32px; height: 32px; border-radius: var(--radius-md);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px; color: #fff; flex-shrink: 0;
|
||
}
|
||
|
||
.setting-text { flex: 1; }
|
||
.setting-name { font-size: 15px; font-weight: 500; }
|
||
.setting-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
|
||
|
||
.setting-arrow { color: var(--text-tertiary); font-size: 14px; }
|
||
|
||
.setting-badge {
|
||
padding: 2px var(--space-2); border-radius: 10px;
|
||
font-size: 11px; font-weight: 600;
|
||
background: var(--red); color: #fff;
|
||
}
|
||
|
||
.divider-handle {
|
||
width: 6px; cursor: col-resize;
|
||
background: var(--separator);
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: background 0.2s; flex-shrink: 0;
|
||
}
|
||
.divider-handle:hover { background: var(--primary); }
|
||
.divider-handle::after {
|
||
content: '···'; color: var(--text-tertiary);
|
||
font-size: 10px; writing-mode: vertical-lr; letter-spacing: 2px;
|
||
}
|
||
|
||
.detail-panel {
|
||
flex: 1; min-width: 400px;
|
||
background: var(--background);
|
||
display: flex; flex-direction: column; overflow: hidden;
|
||
}
|
||
|
||
.detail-header {
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||
border-bottom: 1px solid var(--separator);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
|
||
.detail-title { font-size: 17px; font-weight: 600; }
|
||
|
||
.detail-content {
|
||
flex: 1; overflow-y: auto;
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.dashboard-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.dash-card {
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-4);
|
||
border: 1px solid var(--separator);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.dash-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.dash-card-icon {
|
||
width: 40px; height: 40px; border-radius: var(--radius-lg);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.dash-card-value { font-size: 24px; font-weight: 700; }
|
||
.dash-card-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
|
||
.dash-card-trend { font-size: 11px; color: var(--green); margin-top: var(--space-1); }
|
||
|
||
.section-title {
|
||
font-size: 16px; font-weight: 600;
|
||
margin-bottom: var(--space-3);
|
||
padding-bottom: var(--space-2);
|
||
border-bottom: 1px solid var(--separator);
|
||
}
|
||
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.quick-action {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
gap: var(--space-1); padding: var(--space-3);
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid var(--separator);
|
||
cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.quick-action:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
.quick-action-icon {
|
||
width: 44px; height: 44px; border-radius: var(--radius-lg);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
}
|
||
.quick-action-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
|
||
|
||
.recent-list { margin-bottom: var(--space-4); }
|
||
|
||
.recent-item {
|
||
display: flex; align-items: center; gap: var(--space-3);
|
||
padding: var(--space-3);
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--separator);
|
||
margin-bottom: var(--space-2);
|
||
cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.recent-item:hover { background: var(--primary-light); }
|
||
|
||
.recent-icon {
|
||
width: 36px; height: 36px; border-radius: var(--radius-md);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px; flex-shrink: 0;
|
||
}
|
||
|
||
.recent-info { flex: 1; min-width: 0; }
|
||
.recent-title { font-size: 14px; font-weight: 500; }
|
||
.recent-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
|
||
.recent-time { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
|
||
|
||
.setting-detail-page { display: none; }
|
||
.setting-detail-page.active { display: block; }
|
||
|
||
.form-group {
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.form-label {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-2);
|
||
display: block;
|
||
}
|
||
.form-input {
|
||
width: 100%; height: 44px;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--separator);
|
||
background: var(--surface-secondary);
|
||
color: var(--text);
|
||
padding: 0 var(--space-3);
|
||
font-size: 15px; font-family: var(--font-family);
|
||
outline: none; transition: border-color 0.2s;
|
||
}
|
||
.form-input:focus { border-color: var(--primary); }
|
||
|
||
.toggle-row {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: var(--space-3) 0;
|
||
border-bottom: 1px solid var(--separator);
|
||
}
|
||
.toggle-row:last-child { border-bottom: none; }
|
||
.toggle-label { font-size: 15px; }
|
||
.toggle-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
|
||
|
||
.toggle-switch {
|
||
width: 51px; height: 31px;
|
||
border-radius: 16px;
|
||
background: var(--surface-secondary);
|
||
border: 1px solid var(--separator);
|
||
position: relative; cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.toggle-switch.on {
|
||
background: var(--green);
|
||
border-color: var(--green);
|
||
}
|
||
.toggle-switch::after {
|
||
content: '';
|
||
width: 27px; height: 27px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
position: absolute; top: 1px; left: 1px;
|
||
transition: transform 0.3s;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||
}
|
||
.toggle-switch.on::after { transform: translateX(20px); }
|
||
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
|
||
</style>
|
||
</head>
|
||
<body data-theme="light">
|
||
|
||
<div class="app-shell">
|
||
<nav class="nav-sidebar">
|
||
<div class="nav-logo">💬</div>
|
||
<a class="nav-item" href="widescreen-home.html" title="闲言">
|
||
<span class="nav-icon">💬</span>
|
||
<span class="nav-label">闲言</span>
|
||
</a>
|
||
<a class="nav-item" href="widescreen-discover.html" title="发现">
|
||
<span class="nav-icon">🧭</span>
|
||
<span class="nav-label">发现</span>
|
||
</a>
|
||
<a class="nav-item active" href="widescreen-profile.html" title="我的">
|
||
<span class="nav-icon">👤</span>
|
||
<span class="nav-label">我的</span>
|
||
</a>
|
||
<div class="nav-spacer"></div>
|
||
<button class="nav-theme-btn" onclick="toggleTheme()" title="切换主题">🌙</button>
|
||
</nav>
|
||
|
||
<div class="content-area">
|
||
<div class="master-panel" id="masterPanel">
|
||
<div class="master-header">
|
||
<div class="profile-card">
|
||
<div class="profile-avatar">🌸</div>
|
||
<div class="profile-info">
|
||
<div class="profile-name">诗意栖居</div>
|
||
<div class="profile-id">@shiyi_qiju · VIP会员</div>
|
||
</div>
|
||
</div>
|
||
<div class="profile-stats">
|
||
<div class="stat-item"><div class="stat-value">128</div><div class="stat-label">收藏</div></div>
|
||
<div class="stat-item"><div class="stat-value">56</div><div class="stat-label">原创</div></div>
|
||
<div class="stat-item"><div class="stat-value">1.2k</div><div class="stat-label">获赞</div></div>
|
||
<div class="stat-item"><div class="stat-value">89</div><div class="stat-label">关注</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-list">
|
||
<div class="settings-group">
|
||
<div class="settings-group-title">个人信息</div>
|
||
<div class="settings-group-card">
|
||
<div class="setting-item" onclick="showDetail('profile-info')">
|
||
<div class="setting-icon" style="background:var(--primary)">👤</div>
|
||
<div class="setting-text"><div class="setting-name">个人资料</div><div class="setting-desc">头像、昵称、签名</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('account-security')">
|
||
<div class="setting-icon" style="background:var(--red)">🔒</div>
|
||
<div class="setting-text"><div class="setting-name">账号与安全</div><div class="setting-desc">密码、绑定手机、登录设备</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<div class="settings-group-title">收藏 / 历史</div>
|
||
<div class="settings-group-card">
|
||
<div class="setting-item" onclick="showDetail('favorites')">
|
||
<div class="setting-icon" style="background:var(--orange)">⭐</div>
|
||
<div class="setting-text"><div class="setting-name">我的收藏</div><div class="setting-desc">128 条收藏</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('history')">
|
||
<div class="setting-icon" style="background:var(--teal)">🕐</div>
|
||
<div class="setting-text"><div class="setting-name">浏览历史</div><div class="setting-desc">最近 7 天记录</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('readlater')">
|
||
<div class="setting-icon" style="background:var(--secondary)">📖</div>
|
||
<div class="setting-text"><div class="setting-name">稍后阅读</div><div class="setting-desc">12 条待读</div></div>
|
||
<span class="setting-badge">12</span>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<div class="settings-group-title">账号 / 数据</div>
|
||
<div class="settings-group-card">
|
||
<div class="setting-item" onclick="showDetail('data-manage')">
|
||
<div class="setting-icon" style="background:var(--green)">📊</div>
|
||
<div class="setting-text"><div class="setting-name">数据管理</div><div class="setting-desc">导出、备份、清理缓存</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('vip')">
|
||
<div class="setting-icon" style="background:linear-gradient(135deg,#FFD700,#FF9500)">👑</div>
|
||
<div class="setting-text"><div class="setting-name">会员中心</div><div class="setting-desc">VIP 到期：2027-01-01</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<div class="settings-group-title">语言 / 主题 / 通用</div>
|
||
<div class="settings-group-card">
|
||
<div class="setting-item" onclick="showDetail('language')">
|
||
<div class="setting-icon" style="background:var(--teal)">🌐</div>
|
||
<div class="setting-text"><div class="setting-name">语言设置</div><div class="setting-desc">简体中文</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('theme')">
|
||
<div class="setting-icon" style="background:var(--secondary)">🎨</div>
|
||
<div class="setting-text"><div class="setting-name">主题与外观</div><div class="setting-desc">浅色模式</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('general')">
|
||
<div class="setting-icon" style="background:var(--orange)">⚙️</div>
|
||
<div class="setting-text"><div class="setting-name">通用设置</div><div class="setting-desc">导航栏位置、通知、缓存</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<div class="settings-group-title">关于</div>
|
||
<div class="settings-group-card">
|
||
<div class="setting-item" onclick="showDetail('about')">
|
||
<div class="setting-icon" style="background:var(--text-secondary)">ℹ️</div>
|
||
<div class="setting-text"><div class="setting-name">关于闲言</div><div class="setting-desc">版本 2.6.0</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
<div class="setting-item" onclick="showDetail('feedback')">
|
||
<div class="setting-icon" style="background:var(--green)">💬</div>
|
||
<div class="setting-text"><div class="setting-name">意见反馈</div><div class="setting-desc">帮助我们变得更好</div></div>
|
||
<span class="setting-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider-handle" id="divider"></div>
|
||
|
||
<div class="detail-panel" id="detailPanel">
|
||
<div class="detail-header">
|
||
<span class="detail-title" id="detailTitle">概览</span>
|
||
<button class="nav-theme-btn" style="width:32px;height:32px;font-size:14px" onclick="showDetail('dashboard')" title="返回概览">🏠</button>
|
||
</div>
|
||
|
||
<div class="detail-content" id="detailContent">
|
||
<div class="setting-detail-page active" id="page-dashboard">
|
||
<div class="dashboard-grid">
|
||
<div class="dash-card">
|
||
<div class="dash-card-icon" style="background:var(--primary-light)">📖</div>
|
||
<div class="dash-card-value">1,286</div>
|
||
<div class="dash-card-label">总阅读量</div>
|
||
<div class="dash-card-trend">↑ 12% 较上周</div>
|
||
</div>
|
||
<div class="dash-card">
|
||
<div class="dash-card-icon" style="background:rgba(255,59,48,0.1)">❤️</div>
|
||
<div class="dash-card-value">456</div>
|
||
<div class="dash-card-label">获赞总数</div>
|
||
<div class="dash-card-trend">↑ 8% 较上周</div>
|
||
</div>
|
||
<div class="dash-card">
|
||
<div class="dash-card-icon" style="background:rgba(255,149,0,0.1)">⭐</div>
|
||
<div class="dash-card-value">128</div>
|
||
<div class="dash-card-label">收藏句子</div>
|
||
<div class="dash-card-trend">↑ 5 本周新增</div>
|
||
</div>
|
||
<div class="dash-card">
|
||
<div class="dash-card-icon" style="background:rgba(52,199,89,0.1)">✍️</div>
|
||
<div class="dash-card-value">56</div>
|
||
<div class="dash-card-label">原创句子</div>
|
||
<div class="dash-card-trend">↑ 3 本周新增</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title">⚡ 快捷操作</div>
|
||
<div class="quick-actions">
|
||
<div class="quick-action" onclick="showDetail('favorites')">
|
||
<div class="quick-action-icon" style="background:rgba(255,149,0,0.1)">⭐</div>
|
||
<span class="quick-action-label">我的收藏</span>
|
||
</div>
|
||
<div class="quick-action" onclick="showDetail('history')">
|
||
<div class="quick-action-icon" style="background:rgba(90,200,250,0.1)">🕐</div>
|
||
<span class="quick-action-label">浏览历史</span>
|
||
</div>
|
||
<div class="quick-action" onclick="showDetail('readlater')">
|
||
<div class="quick-action-icon" style="background:rgba(88,86,214,0.1)">📖</div>
|
||
<span class="quick-action-label">稍后阅读</span>
|
||
</div>
|
||
<div class="quick-action" onclick="showDetail('theme')">
|
||
<div class="quick-action-icon" style="background:rgba(0,122,255,0.1)">🎨</div>
|
||
<span class="quick-action-label">主题设置</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title">🕐 最近浏览</div>
|
||
<div class="recent-list">
|
||
<div class="recent-item">
|
||
<div class="recent-icon" style="background:rgba(0,122,255,0.1)">🌙</div>
|
||
<div class="recent-info">
|
||
<div class="recent-title">长风破浪会有时</div>
|
||
<div class="recent-subtitle">李白 · 古诗词</div>
|
||
</div>
|
||
<span class="recent-time">3分钟前</span>
|
||
</div>
|
||
<div class="recent-item">
|
||
<div class="recent-icon" style="background:rgba(255,149,0,0.1)">🍂</div>
|
||
<div class="recent-info">
|
||
<div class="recent-title">一蓑烟雨任平生</div>
|
||
<div class="recent-subtitle">苏轼 · 宋词</div>
|
||
</div>
|
||
<span class="recent-time">15分钟前</span>
|
||
</div>
|
||
<div class="recent-item">
|
||
<div class="recent-icon" style="background:rgba(52,199,89,0.1)">🌿</div>
|
||
<div class="recent-info">
|
||
<div class="recent-title">行到水穷处</div>
|
||
<div class="recent-subtitle">王维 · 禅意</div>
|
||
</div>
|
||
<span class="recent-time">1小时前</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-profile-info">
|
||
<div class="section-title">个人资料</div>
|
||
<div class="form-group">
|
||
<label class="form-label">头像</label>
|
||
<div style="display:flex;align-items:center;gap:16px">
|
||
<div class="profile-avatar" style="width:64px;height:64px;font-size:32px">🌸</div>
|
||
<button style="padding:8px 16px;border-radius:20px;border:1px solid var(--primary);background:transparent;color:var(--primary);font-family:var(--font-family);cursor:pointer">更换头像</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">昵称</label>
|
||
<input class="form-input" type="text" value="诗意栖居">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">个性签名</label>
|
||
<input class="form-input" type="text" value="在文字中寻找生活的诗意">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">性别</label>
|
||
<input class="form-input" type="text" value="保密" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">地区</label>
|
||
<input class="form-input" type="text" value="中国 · 杭州">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-theme">
|
||
<div class="section-title">主题与外观</div>
|
||
<div class="toggle-row">
|
||
<div><div class="toggle-label">深色模式</div><div class="toggle-desc">跟随系统或手动切换</div></div>
|
||
<div class="toggle-switch" onclick="this.classList.toggle('on');toggleTheme()"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div><div class="toggle-label">毛玻璃效果</div><div class="toggle-desc">开启界面毛玻璃模糊效果</div></div>
|
||
<div class="toggle-switch on" onclick="this.classList.toggle('on')"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div><div class="toggle-label">动态效果</div><div class="toggle-desc">界面切换动画效果</div></div>
|
||
<div class="toggle-switch on" onclick="this.classList.toggle('on')"></div>
|
||
</div>
|
||
<div class="form-group" style="margin-top:24px">
|
||
<label class="form-label">主题色</label>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#007AFF;cursor:pointer;border:3px solid var(--primary);box-shadow:0 0 0 2px #fff"></div>
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#5856D6;cursor:pointer;border:3px solid transparent" onclick="this.parentElement.querySelectorAll('div').forEach(d=>d.style.borderColor='transparent');this.style.borderColor='#5856D6'"></div>
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#FF2D55;cursor:pointer;border:3px solid transparent" onclick="this.parentElement.querySelectorAll('div').forEach(d=>d.style.borderColor='transparent');this.style.borderColor='#FF2D55'"></div>
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#FF9500;cursor:pointer;border:3px solid transparent" onclick="this.parentElement.querySelectorAll('div').forEach(d=>d.style.borderColor='transparent');this.style.borderColor='#FF9500'"></div>
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#34C759;cursor:pointer;border:3px solid transparent" onclick="this.parentElement.querySelectorAll('div').forEach(d=>d.style.borderColor='transparent');this.style.borderColor='#34C759'"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-general">
|
||
<div class="section-title">通用设置</div>
|
||
<div class="toggle-row">
|
||
<div><div class="toggle-label">推送通知</div><div class="toggle-desc">接收每日推荐推送</div></div>
|
||
<div class="toggle-switch on" onclick="this.classList.toggle('on')"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div><div class="toggle-label">自动播放</div><div class="toggle-desc">会话流自动播放语音</div></div>
|
||
<div class="toggle-switch" onclick="this.classList.toggle('on')"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div><div class="toggle-label">Wi-Fi 下载</div><div class="toggle-desc">仅 Wi-Fi 下下载资源</div></div>
|
||
<div class="toggle-switch on" onclick="this.classList.toggle('on')"></div>
|
||
</div>
|
||
<div class="form-group" style="margin-top:24px">
|
||
<label class="form-label">导航栏位置</label>
|
||
<div style="display:flex;gap:12px">
|
||
<button style="flex:1;padding:12px;border-radius:12px;border:2px solid var(--primary);background:var(--primary-light);color:var(--primary);font-family:var(--font-family);cursor:pointer;font-weight:600">⬅️ 左侧</button>
|
||
<button style="flex:1;padding:12px;border-radius:12px;border:1px solid var(--separator);background:var(--surface);color:var(--text-secondary);font-family:var(--font-family);cursor:pointer">➡️ 右侧</button>
|
||
<button style="flex:1;padding:12px;border-radius:12px;border:1px solid var(--separator);background:var(--surface);color:var(--text-secondary);font-family:var(--font-family);cursor:pointer">⬆️ 顶部</button>
|
||
<button style="flex:1;padding:12px;border-radius:12px;border:1px solid var(--separator);background:var(--surface);color:var(--text-secondary);font-family:var(--font-family);cursor:pointer">⬇️ 底部</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" style="margin-top:16px">
|
||
<label class="form-label">缓存管理</label>
|
||
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--card-bg);border-radius:12px;border:1px solid var(--separator)">
|
||
<div><div style="font-size:15px">本地缓存</div><div style="font-size:12px;color:var(--text-secondary);margin-top:2px">23.5 MB</div></div>
|
||
<button style="padding:8px 16px;border-radius:20px;border:none;background:var(--red);color:#fff;font-family:var(--font-family);cursor:pointer;font-size:13px">清理缓存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-favorites">
|
||
<div class="section-title">我的收藏</div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(0,122,255,0.1)">🌙</div><div class="recent-info"><div class="recent-title">长风破浪会有时</div><div class="recent-subtitle">李白 · 收藏于 3天前</div></div><span class="recent-time">⭐</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(255,149,0,0.1)">🍂</div><div class="recent-info"><div class="recent-title">一蓑烟雨任平生</div><div class="recent-subtitle">苏轼 · 收藏于 5天前</div></div><span class="recent-time">⭐</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(52,199,89,0.1)">🌿</div><div class="recent-info"><div class="recent-title">行到水穷处</div><div class="recent-subtitle">王维 · 收藏于 1周前</div></div><span class="recent-time">⭐</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(88,86,214,0.1)">🌸</div><div class="recent-info"><div class="recent-title">寻寻觅觅</div><div class="recent-subtitle">李清照 · 收藏于 1周前</div></div><span class="recent-time">⭐</span></div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-history">
|
||
<div class="section-title">浏览历史</div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(0,122,255,0.1)">🌙</div><div class="recent-info"><div class="recent-title">长风破浪会有时</div><div class="recent-subtitle">李白 · 3分钟前</div></div><span class="recent-time">3分钟前</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(255,149,0,0.1)">🍂</div><div class="recent-info"><div class="recent-title">一蓑烟雨任平生</div><div class="recent-subtitle">苏轼 · 15分钟前</div></div><span class="recent-time">15分钟前</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(52,199,89,0.1)">🌿</div><div class="recent-info"><div class="recent-title">行到水穷处</div><div class="recent-subtitle">王维 · 1小时前</div></div><span class="recent-time">1小时前</span></div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-readlater">
|
||
<div class="section-title">稍后阅读 <span style="color:var(--primary);font-size:13px">12 条</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(88,86,214,0.1)">📖</div><div class="recent-info"><div class="recent-title">醉翁亭记</div><div class="recent-subtitle">欧阳修 · 添加于 2天前</div></div><span class="recent-time">📖</span></div>
|
||
<div class="recent-item"><div class="recent-icon" style="background:rgba(88,86,214,0.1)">📖</div><div class="recent-info"><div class="recent-title">岳阳楼记</div><div class="recent-subtitle">范仲淹 · 添加于 3天前</div></div><span class="recent-time">📖</span></div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-account-security">
|
||
<div class="section-title">账号与安全</div>
|
||
<div class="toggle-row"><div><div class="toggle-label">绑定手机</div><div class="toggle-desc">138****6789</div></div><span style="color:var(--green);font-size:13px">已绑定</span></div>
|
||
<div class="toggle-row"><div><div class="toggle-label">绑定邮箱</div><div class="toggle-desc">sh***@gmail.com</div></div><span style="color:var(--green);font-size:13px">已绑定</span></div>
|
||
<div class="toggle-row"><div><div class="toggle-label">修改密码</div><div class="toggle-desc">定期修改密码更安全</div></div><span style="color:var(--primary);font-size:13px;cursor:pointer">修改 ›</span></div>
|
||
<div class="toggle-row"><div><div class="toggle-label">登录设备</div><div class="toggle-desc">3 台设备</div></div><span style="color:var(--primary);font-size:13px;cursor:pointer">管理 ›</span></div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-data-manage">
|
||
<div class="section-title">数据管理</div>
|
||
<div class="toggle-row"><div><div class="toggle-label">导出数据</div><div class="toggle-desc">导出收藏、历史等数据</div></div><span style="color:var(--primary);font-size:13px;cursor:pointer">导出 ›</span></div>
|
||
<div class="toggle-row"><div><div class="toggle-label">备份数据</div><div class="toggle-desc">上次备份：2026-05-28</div></div><span style="color:var(--primary);font-size:13px;cursor:pointer">备份 ›</span></div>
|
||
<div class="toggle-row"><div><div class="toggle-label">清理缓存</div><div class="toggle-desc">当前缓存 23.5 MB</div></div><span style="color:var(--red);font-size:13px;cursor:pointer">清理 ›</span></div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-vip">
|
||
<div class="section-title">👑 会员中心</div>
|
||
<div style="padding:24px;background:linear-gradient(135deg,#FFD700,#FF9500);border-radius:16px;color:#fff;margin-bottom:16px">
|
||
<div style="font-size:20px;font-weight:700">VIP 会员</div>
|
||
<div style="font-size:13px;margin-top:4px;opacity:0.9">到期时间：2027-01-01</div>
|
||
<div style="font-size:13px;margin-top:2px;opacity:0.9">剩余 217 天</div>
|
||
</div>
|
||
<div class="toggle-row"><div><div class="toggle-label">专属句子库</div><div class="toggle-desc">解锁 10,000+ 精选句子</div></div><span style="color:var(--green);font-size:13px">已解锁 ✓</span></div>
|
||
<div class="toggle-row"><div><div class="toggle-label">AI 对话无限次</div><div class="toggle-desc">不限次数使用 AI 诗词助手</div></div><span style="color:var(--green);font-size:13px">已解锁 ✓</span></div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-language">
|
||
<div class="section-title">语言设置</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<div style="padding:12px 16px;border-radius:12px;border:2px solid var(--primary);background:var(--primary-light);cursor:pointer;font-weight:600">🇨🇳 简体中文</div>
|
||
<div style="padding:12px 16px;border-radius:12px;border:1px solid var(--separator);background:var(--surface);cursor:pointer">🇺🇸 English</div>
|
||
<div style="padding:12px 16px;border-radius:12px;border:1px solid var(--separator);background:var(--surface);cursor:pointer">🇯🇵 日本語</div>
|
||
<div style="padding:12px 16px;border-radius:12px;border:1px solid var(--separator);background:var(--surface);cursor:pointer">🇰🇷 한국어</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-about">
|
||
<div class="section-title">关于闲言</div>
|
||
<div style="text-align:center;padding:32px 0">
|
||
<div style="font-size:48px;margin-bottom:12px">💬</div>
|
||
<div style="font-size:20px;font-weight:700">闲言</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);margin-top:4px">版本 2.6.0 (Build 2026.0529)</div>
|
||
</div>
|
||
<div class="toggle-row"><div class="toggle-label">用户协议</div><span style="color:var(--primary);font-size:13px;cursor:pointer">查看 ›</span></div>
|
||
<div class="toggle-row"><div class="toggle-label">隐私政策</div><span style="color:var(--primary);font-size:13px;cursor:pointer">查看 ›</span></div>
|
||
<div class="toggle-row"><div class="toggle-label">开源许可</div><span style="color:var(--primary);font-size:13px;cursor:pointer">查看 ›</span></div>
|
||
<div style="text-align:center;margin-top:24px;font-size:12px;color:var(--text-tertiary)">© 2024-2026 闲言团队</div>
|
||
</div>
|
||
|
||
<div class="setting-detail-page" id="page-feedback">
|
||
<div class="section-title">意见反馈</div>
|
||
<div class="form-group">
|
||
<label class="form-label">反馈类型</label>
|
||
<select class="form-input" style="appearance:auto">
|
||
<option>功能建议</option>
|
||
<option>Bug 报告</option>
|
||
<option>内容投诉</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">详细描述</label>
|
||
<textarea class="form-input" style="height:120px;padding:12px;resize:vertical" placeholder="请描述您的问题或建议..."></textarea>
|
||
</div>
|
||
<button style="width:100%;padding:14px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-size:16px;font-weight:600;font-family:var(--font-family);cursor:pointer">提交反馈</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function showDetail(pageId) {
|
||
document.querySelectorAll('.setting-detail-page').forEach(p => p.classList.remove('active'));
|
||
const page = document.getElementById('page-' + pageId);
|
||
if (page) {
|
||
page.classList.add('active');
|
||
} else {
|
||
document.getElementById('page-dashboard').classList.add('active');
|
||
}
|
||
|
||
const titles = {
|
||
'dashboard': '概览',
|
||
'profile-info': '个人资料',
|
||
'account-security': '账号与安全',
|
||
'favorites': '我的收藏',
|
||
'history': '浏览历史',
|
||
'readlater': '稍后阅读',
|
||
'data-manage': '数据管理',
|
||
'vip': '会员中心',
|
||
'language': '语言设置',
|
||
'theme': '主题与外观',
|
||
'general': '通用设置',
|
||
'about': '关于闲言',
|
||
'feedback': '意见反馈'
|
||
};
|
||
document.getElementById('detailTitle').textContent = titles[pageId] || '概览';
|
||
|
||
document.querySelectorAll('.setting-item').forEach(i => i.classList.remove('selected'));
|
||
}
|
||
|
||
function toggleTheme() {
|
||
const body = document.body;
|
||
const btn = document.querySelector('.nav-theme-btn');
|
||
if (body.dataset.theme === 'light') {
|
||
body.dataset.theme = 'dark';
|
||
btn.textContent = '☀️';
|
||
} else {
|
||
body.dataset.theme = 'light';
|
||
btn.textContent = '🌙';
|
||
}
|
||
}
|
||
|
||
const divider = document.getElementById('divider');
|
||
const masterPanel = document.getElementById('masterPanel');
|
||
let isDragging = false;
|
||
|
||
divider.addEventListener('mousedown', () => {
|
||
isDragging = true;
|
||
document.body.style.cursor = 'col-resize';
|
||
document.body.style.userSelect = 'none';
|
||
});
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (!isDragging) return;
|
||
const navWidth = 72;
|
||
const newWidth = e.clientX - navWidth;
|
||
if (newWidth >= 320 && newWidth <= 600) {
|
||
masterPanel.style.width = newWidth + 'px';
|
||
}
|
||
});
|
||
|
||
document.addEventListener('mouseup', () => {
|
||
isDragging = false;
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|