wangjia
77a37fce12
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u
165 lines
9.0 KiB
HTML
165 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>账户 / 设置 / 联系 信息架构重构 — 设计</title>
|
||
<style>
|
||
:root{
|
||
--bg:#0f1117; --panel:#171a22; --panel2:#1d2129; --fg:#e6e8ee; --fg2:#a8afbd;
|
||
--accent:#e0884f; --accent2:#5fb0c9; --ok:#5ec27a; --bad:#e06a6a; --warn:#e0b84f;
|
||
--border:#272c36; --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
|
||
--sans:-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif;
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.7;font-size:15px}
|
||
.wrap{max-width:920px;margin:0 auto;padding:48px 24px 96px}
|
||
h1{font-size:30px;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
|
||
.sub{color:var(--fg2);font-size:15px;margin:0 0 32px}
|
||
h2{font-size:21px;margin:44px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
|
||
h3{font-size:16px;margin:26px 0 8px;color:var(--accent2)}
|
||
p{margin:10px 0}
|
||
code{font-family:var(--mono);font-size:.88em;background:var(--panel2);padding:1px 6px;border-radius:5px;color:#f0d9c4}
|
||
pre{background:#0a0c11;border:1px solid var(--border);border-radius:10px;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.55;color:#cdd3df}
|
||
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;vertical-align:middle}
|
||
.tag.ok{background:rgba(94,194,122,.16);color:var(--ok)}
|
||
.tag.warn{background:rgba(224,184,79,.16);color:var(--warn)}
|
||
.tag.info{background:rgba(95,176,201,.16);color:var(--accent2)}
|
||
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:16px 0}
|
||
.card.root{border-left:3px solid var(--accent)}
|
||
.card h3{margin-top:0}
|
||
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
|
||
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
|
||
th{color:var(--fg2);font-weight:600;font-size:13px}
|
||
td code{font-size:.85em}
|
||
ul,ol{padding-left:22px;margin:10px 0}
|
||
li{margin:5px 0}
|
||
.lead{background:linear-gradient(180deg,rgba(224,136,79,.10),transparent);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 8px}
|
||
.small{color:var(--fg2);font-size:13px}
|
||
a{color:var(--accent2)}
|
||
.back{display:inline-block;margin-bottom:24px;font-size:13px}
|
||
b{color:#fff}
|
||
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||
@media(max-width:680px){.cols{grid-template-columns:1fr}}
|
||
.tree{font-family:var(--mono);font-size:13px;line-height:1.7;color:#cdd3df;white-space:pre;overflow-x:auto}
|
||
.new{color:var(--ok);font-weight:600}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<a class="back" href="index.html">← 文档索引</a>
|
||
<h1>账户 / 设置 / 联系 信息架构重构</h1>
|
||
<p class="sub">设计文档 · 2026-07-12 · Spec ① / 3(② 推广激励 · ③ 系统通知 另立）· 状态 <span class="tag info">待评审</span></p>
|
||
|
||
<div class="lead">
|
||
<b>问题</b>:账户相关内容散在 App 的 Account / Settings / Contact / Redeem 四处 + Web 用户中心,大量重复(联系渠道 3 处、语言/主题 2 处、购买入口 3 处、Web 全套账户功能与 App 重叠)。用户找不到订单、点了没反应,根子是入口混乱。<br>
|
||
<b>决策(已定)</b>:<b>App 自足、Web 退居次要</b> —— 所有账户功能在 App 原生做完,每个功能只有一个家;Web 仅在 Settings 底部留一个低调入口。推广奖励<b>双方都得</b>,兑换码<b>保留</b>,Web 链接<b>保留</b>。
|
||
</div>
|
||
|
||
<h2>1 · 原则</h2>
|
||
<ul>
|
||
<li><b>一功能一个家</b> —— 任何条目只在一处出现,消灭重复。</li>
|
||
<li><b>页面内容跨端共用一套,只有导航壳不同</b> —— 桌面走侧栏,移动把「设置/联系」收进 Account 下钻。</li>
|
||
<li><b>Account 是账户中心</b>,提为一级导航(不再藏在左上品牌按钮里 —— 之前找不到订单即因此)。</li>
|
||
<li>为后两个功能<b>预留落点</b>:顶栏「通知」铃铛、账户页「邀请好友」入口。</li>
|
||
</ul>
|
||
|
||
<h2>2 · 去重台账</h2>
|
||
<table>
|
||
<tr><th>重复项</th><th>现在(乱)</th><th>收敛到(唯一家)</th></tr>
|
||
<tr><td>联系渠道(TG/邮箱/官网)</td><td>ContactPage + ContactScreen + Redeem「去哪买」<b>×3</b></td><td><b>Contact 页</b>;Redeem 删「去哪买」</td></tr>
|
||
<tr><td>语言 / 主题</td><td>Account 卡 + Settings <b>×2</b></td><td><b>Settings·外观</b>;Account 删</td></tr>
|
||
<tr><td>购买入口</td><td>Account + Settings + Redeem <b>散 3 处</b></td><td><b>Account·购买&订单块</b> + 会员横幅按钮;Settings 删</td></tr>
|
||
<tr><td>Web 用户中心</td><td>Overview/订阅/设备/设置/兑换/邀请 全套,和 App 重叠</td><td><b>弱化</b>:Settings·关于 底部一个低调「网页版」链接</td></tr>
|
||
<tr><td>协议 / 版本</td><td>Account 卡 + Settings</td><td><b>Settings·关于</b></td></tr>
|
||
</table>
|
||
|
||
<h2>3 · 目标结构</h2>
|
||
<div class="cols">
|
||
<div class="card"><h3>桌面版(侧栏)</h3>
|
||
<div class="tree">侧栏 6 项
|
||
├ Connect
|
||
├ Servers
|
||
├ Stats
|
||
├ <span class="new">Account</span> ← 提为一级
|
||
├ Settings
|
||
└ Contact
|
||
顶栏 ······· <span class="new">🔔 通知</span> (红点)
|
||
|
||
Account(账户中心)
|
||
├ 会员横幅 Renew/Upgrade→购买页
|
||
├ 购买 & 订单 & 兑换
|
||
│ ├ 购买套餐 → PurchaseScreen
|
||
│ ├ 我的订单 → OrdersScreen
|
||
│ └ 兑换码 → RedeemScreen(仅码)
|
||
├ <span class="new">邀请好友</span> → InviteScreen(得会员)
|
||
├ 账户信息 邮箱 / 密码
|
||
└ 我的设备 → DevicesScreen
|
||
|
||
Settings(应用设置)
|
||
├ 连接 自启/自动连/智能分流/KillSwitch
|
||
├ 外观 语言 / 主题
|
||
└ 关于 协议 / 版本 / 检查更新
|
||
· 低调「网页版用户中心」
|
||
|
||
Contact
|
||
└ Telegram / 邮箱 / 官网 + 服务时间</div>
|
||
</div>
|
||
<div class="card"><h3>移动版(底 Tab)</h3>
|
||
<div class="tree">底 Tab 4 项
|
||
├ Connect
|
||
├ Servers
|
||
├ Stats
|
||
└ <span class="new">Account</span>
|
||
顶栏 ······· <span class="new">🔔 通知</span> (红点)
|
||
|
||
Account tab
|
||
├ 会员横幅 Renew/Upgrade→购买
|
||
├ 购买 & 订单 & 兑换
|
||
├ <span class="new">邀请好友</span>
|
||
├ 账户信息
|
||
├ 我的设备
|
||
├ <span class="new">设置</span> → 全屏下钻
|
||
└ <span class="new">联系我们</span> → 全屏下钻
|
||
|
||
设置 / 联系 / 购买 / 订单 /
|
||
设备 / 邀请 均从 Account
|
||
全屏 push;语言/主题在
|
||
「设置」子页内。</div>
|
||
<p class="small">规则:移动端无侧栏,故 Account 内多「设置/联系」两个入口;桌面端不显(侧栏已有)。判据 <code>context.formFactor</code>。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>4 · 新功能预留位（细节见 ②③）</h2>
|
||
<div class="card root"><h3>🔔 通知(Spec ③)</h3>
|
||
<p>顶栏铃铛 + 未读红点 → 通知收件箱(列表,已读态)。重要通知走顶部横幅(复用现有更新横幅)。后端已有 <code>GET /v1/notices</code> 底子;类型 新闻/功能/重要。参考 jiu。</p></div>
|
||
<div class="card root"><h3>邀请好友(Spec ②)</h3>
|
||
<p>Account 一个「邀请好友得会员」入口 → 邀请页(邀请码/链接 + 奖励进度)。<b>双方都得</b>:邀请人 & 被邀人各得订阅天数。行为奖励:注册 / 首购 / 加入 TG channel 等。<b>克制的偶发提示</b>(账户页或特定动作后的低调 banner,不打扰)。</p></div>
|
||
|
||
<h2>5 · 落地改动(Flutter)</h2>
|
||
<table>
|
||
<tr><th>文件</th><th>改动</th></tr>
|
||
<tr><td><code>navigation_provider.dart</code></td><td><code>NavView</code> 加 <code>account</code> 一级 + <code>invite</code> 子页;桌面侧栏列表加 Account</td></tr>
|
||
<tr><td><code>desktop_shell.dart</code></td><td>侧栏加 Account 项;顶栏加通知铃铛;content() 加 invite/orders 等分支</td></tr>
|
||
<tr><td><code>account_page.dart</code></td><td>按目标顺序重排卡片;加邀请入口;删语言/主题/协议卡(移 Settings);移动端才显 设置/联系</td></tr>
|
||
<tr><td><code>settings_page.dart</code></td><td>删购买/订单卡;归拢 连接/外观/关于 三组;Web 链接降到关于底部</td></tr>
|
||
<tr><td><code>account_screens.dart</code></td><td>RedeemScreen 删「去哪买」渠道卡(仅留兑换码);ContactScreen 保持渠道唯一</td></tr>
|
||
<tr><td><code>content_top_bar.dart</code> / 顶栏</td><td>加通知铃铛槽(Spec ③ 接线)</td></tr>
|
||
</table>
|
||
|
||
<h2>6 · 决策日志</h2>
|
||
<ul>
|
||
<li>App×Web 分工:<b>App 自足,Web 退居次要</b>。</li>
|
||
<li>推广奖励:<b>双方都得</b>(拉新更猛)。</li>
|
||
<li>兑换码:<b>保留</b>(账户·购买块内低调入口)。</li>
|
||
<li>Web 用户中心链接:<b>保留</b>(Settings·关于 底部低调)。</li>
|
||
<li>拆解顺序:<b>①IA(本文)→ ②推广激励 → ③系统通知</b>,各自 spec→plan→实现。</li>
|
||
</ul>
|
||
|
||
<h2>7 · 不在本 spec</h2>
|
||
<p class="small">推广激励的奖励规则引擎/归因/防刷/邀请页细节(Spec ②);通知的类型/下发/定向/收件箱交互(Spec ③);Web 用户中心自身的精简(单独排期)。本文只定 App 的页面骨架与入口归位,并为 ②③ 预留落点。</p>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|