+
+
+ App 图标家族
+ 母题=行走穿山甲（实心鳞甲剪影，朝右）置于 clay 渐变圆角方。矢量单源 design/assets/app-icon.svg，多尺寸直接引用同一文件（零漂移，非内联副本）。
+ 多尺寸
104 · 64 · 40 · 28
+
104 · 主图标
+
64
+
40
+
28
+
Logo 锁版
+ 图标 mark + 字标水平锁版。浅色背景用主锁版 logo-mark.svg，深色背景用反白锁版 logo-mark-white.svg；整体横版字标 logo-wordmark.svg。矢量单源 design/assets/。
+ 主锁版 / 反白锁版
logo-mark.svg · logo-mark-white.svg
+
+
穿山甲PANGOLIN
+
主锁版 · 浅色背景
+
+
+
穿山甲PANGOLIN
+
反白锁版 · 深色背景
+
+
横版字标
logo-wordmark.svg · 240×56
+
+
clay · 黏土铜色阶
@@ -168,6 +272,62 @@
状态语义
success / warning / danger (+ -subtle)暗色主题表面
+ 暗色画布=暖 espresso --sand-950（非纯黑）。表面层级 --bg（应用画布）→ --surface（卡片/面板）→ --surface-2（嵌套层），逐级提亮保持暖调。此卡固定演示暗色，不随右上主题切换。
+ 表面层级（固定暗色演示）
--bg · --surface · --surface-2
+
+
+
+
surface-2
嵌套层
#2A251F
Accent
+
+
正文字体 · Manrope
+ 界面与正文主力（--font-sans，权重 400–700）。人文几何，中英混排稳定。示例中英分行、单句不并排。
+ Body · Manrope
--font-sans · 400 / 500 / 600 / 700
+
一键连接，极速畅连
+
轻盈、亲和、即开即用的网络加速。
+
Body 16px — 全球 80+ 加速线路，智能选择最快节点，稳定不掉线。
+
Small 14px — 适用于次要说明、列表副标题与表单提示文字。
+
中文字体 · Noto Sans SC
+ 中文专用伴随字体（--font-cjk，权重 400 / 500 / 700）。与 Manrope / Sora 同框时保证中文字形与字重一致。
+ CJK · Noto Sans SC
--font-cjk · 400 / 500 / 700
+
穿山甲 · 守护每一次连接
+
无需配置，打开即用。智能分流，海外应用秒开。
+
隐私保护 · 我们不记录你的浏览数据 · 端到端加密
+
Display 字体 · Sora
+ 标题、营销大字、Logo 字标（--font-display，权重 600 / 700）。几何友好，字距收紧 -0.02em。
+ Display · Sora
--font-display · 600 / 700
+
极速畅连 Smooth
+
极速 · 稳定 · 省心
+
等宽数据字体 · JetBrains Mono
+ IP / 速率 / 时长 / 密钥等数据读数（--font-mono，开 tabular nums 等宽对齐，数字不跳动）。
+ Mono · JetBrains Mono
--font-mono · tnum字号梯度
@@ -305,21 +465,331 @@
语言下拉 · .langsel
不依赖原生 <select>：触发药丸 .langsel-trigger + 自控绝对定位菜单 .menu / .menu-item（选中态 .is-selected）。点触发按钮可实际展开/收起。
-
+
-
↖ 默认展开演示，可点击触发按钮收起 / 展开
+
+
+ 核心连接按钮 · .connect-btn
+ 产品招牌组件：圆形一键连接键，三态 .is-off / .is-connecting / .is-on。背景在渐变↔纯色间切换仅过渡 box-shadow/background-color（禁 transition:all，否则背景计算失效）。轨道环用内联 <svg>，圆内为图标 + 标签 / 计时。镜像 client/lib/widgets/connect_button.dart。
+
+
+
+
+ 未连接 Off
+
+
+
+
+ 建立隧道 Connecting
+
+
+
+
+ 已连接 Connected
+
+
+
+
+
+
+ 服务器列表行 · .server-row
+ 节点列表一行：国家码块（2 字母，绝不用 emoji 国旗）+ 名称/子名 + 属性胶囊（.pill-outline）+ 延迟（--font-mono·按值变色）+ 信号条 + 选中/推荐/不可用态。镜像 client/lib/widgets/server_tile.dart。放进 .card.card-flush 列表容器。
+
+ 列表行
.server-row · .is-selected · .is-down智能选择推荐行
.server-row.is-smart · zap + 推荐胶囊
+
+
+
+
+
智能选择
+
根据当前网络环境，自动选择最优节点
+
+
推荐
+
+
+
+
+
+
+
+ 状态徽章 · .pill 场景
+ 徽章复用胶囊原子 .pill（见「胶囊 .pill / .badge」），此处按业务场景分组：连接态（色点 + 文字，非 emoji · 铁律 #7）· 套餐 · 节点属性。镜像 client/lib/widgets/status_pill.dart。
+
+ 连接态
.pill.is-success/-warning/-danger/-neutral
+ 已连接
+ 连接中
+ 已断开
+ 未登录
+
套餐
.pill-accent · .pill.is-neutral
+ PRO 会员
+ 免费版
+
节点属性
.pill-outline · .pill.is-neutral（数据）
+ 流媒体优化
+ P2P
+ 延迟 24ms
+
+
+
+
+
+
+ 额度卡 · 指标卡
+ 对齐线上 quota_card.dart（免费版今日额度：倒计时收缩条 + 「免费版」短标签 + 三档阈值；无绿色「已解锁」态，线上以倒计时收缩条表达）与统计 .metric 指标瓦片。
+
+
+
+
+
+ 设备行 · 设置行
+ 对齐线上 DevicesScreen / settings_page.dart。.device-row（图标框 + 名 + 最后在线 + 本机/移除/⋯）与 .setting-row（图标框 + 标题 + 副标 + trailing：chevron / 开关 / 值）。
+
+
+
+
+
+ 套餐横幅 · 侧栏会员卡
+ 对齐线上 _PlanBanner（账户页）与 plan_badge_card.dart（桌面侧栏底部）。免费=surface 卡；.is-pro=clay 渐变。
+
+
+
+
+
+ 更新条 · 底部 Tab · 侧栏项
+ app-chrome 组件。.update-banner（jiu 式更新顶部横条，对齐 UpdateBanner）、.tabbar/.tab（移动底部 4-Tab，对齐 bottom_tab_bar.dart）、.nav-item（桌面/iPad 侧栏项，对齐 nav_sidebar.dart）。
+
+
发现新版本 v1.1.0，建议更新
+
+
+
+
+
+
+
+
+
+
连接
+
节点
+
统计
+
设置
+
联系
+
+
+
+
+
+ 套餐卡 · .plan-card
+ 购买套餐档位卡。常规档 surface 底；.is-featured 走 clay 渐变高亮（年付/最优惠），内含反色 CTA，顶部可挂 .plan-pop「最受欢迎」浮标。镜像 client/lib/widgets/plan_card.dart。金额仅展示，扣款以 pay 服务为准。
+
+
+
按月
+
¥29.99/ 月
+
+
不限时长 · 不限流量
+
80+ 全球加速线路
+
5 台设备同时在线
+
+
+
+
+
最受欢迎
+
按年
+
¥199.99/ 年 · ¥16.7/月
+
+
不限时长 · 不限流量
+
80+ 全球加速线路
+
5 台设备同时在线
+
+
+
+
+
+
+ 支付方式 · .pay-method
+ 底部弹层选择支付渠道，一行 = leading 图标 + 标题 + trailing chevron。资金外流（拉起支付宝 / 展示加密地址），App 内无卡号录入表单（设计铁律 #10）。生产渠道：哪吒聚合（支付宝）+ 加密货币 USDT。
+
+
+
+
+
+
+
+
+ 明细行 · .kv-row
+ 可复制键值行，用于加密支付态展示「网络 / 收款地址 / 精确金额」。值用等宽字（--font-mono + tabular nums），右侧复制按钮。
+
+
+
网络USDT · TRC20
+
收款地址TB1e7q1333iuLMLc2iQaoaqeuDF2U7cxan
+
精确金额4.990001
+
+
+
+
+ 结果态 · .result
+ 支付终态：居中大图标 + 标题 + 说明。成功用 --success，失败加 .is-fail 走 --danger。
+
+
+
+
支付成功
+
有效期至 2027-07-11
+
+
+
+
Lucide 图标库 —
@@ -390,10 +860,52 @@ function renderIcons(){
/* ── 导航 scrollspy ── */
const navLinks=[...document.querySelectorAll('.dnav')];
-navLinks.forEach(a=>a.onclick=(e)=>{ e.preventDefault(); const el=document.getElementById(a.dataset.s); if(el) el.scrollIntoView({behavior:'smooth',block:'start'}); });
+navLinks.forEach(a=>a.onclick=(e)=>{ if(!a.dataset.s) return; /* 外链(如屏预览)正常跳转 */ e.preventDefault(); const el=document.getElementById(a.dataset.s); if(el) el.scrollIntoView({behavior:'smooth',block:'start'}); });
const obs=new IntersectionObserver(es=>{ es.forEach(en=>{ if(en.isIntersecting){ const id=en.target.id; navLinks.forEach(a=>a.classList.toggle('on',a.dataset.s===id)); } }); },{rootMargin:'-70px 0px -75% 0px'});
document.querySelectorAll('.section').forEach(s=>obs.observe(s));
+/* ── 侧栏：收起 + 拖拽改宽（持久化 localStorage） ── */
+(function(){
+ const doc = document.querySelector('.doc');
+ const nav = document.querySelector('.doc-nav');
+ const handle = document.getElementById('navResize');
+ const toggle = document.getElementById('navToggle');
+ if(!doc || !nav || !handle || !toggle) return;
+ const MIN = 180, MAX = 460, DEF = 238;
+ let curW = parseInt(localStorage.getItem('pangolin-ds-navw') || '', 10);
+ if (!(curW >= MIN && curW <= MAX)) curW = DEF;
+ let collapsed = localStorage.getItem('pangolin-ds-navcollapsed') === '1';
+ function apply(){
+ if (collapsed) { doc.classList.add('nav-collapsed'); nav.style.width = '0px'; }
+ else { doc.classList.remove('nav-collapsed'); nav.style.width = curW + 'px'; }
+ }
+ apply();
+ // 收起 / 展开
+ toggle.onclick = () => {
+ collapsed = !collapsed;
+ localStorage.setItem('pangolin-ds-navcollapsed', collapsed ? '1' : '0');
+ apply();
+ };
+ // 拖拽改宽（纯 JS 内联宽度，避免自定义 CSS 变量触发闸误报）
+ let dragging = false;
+ handle.addEventListener('mousedown', (e) => {
+ if (collapsed) return;
+ dragging = true; handle.classList.add('dragging'); document.body.classList.add('nav-dragging');
+ e.preventDefault();
+ });
+ window.addEventListener('mousemove', (e) => {
+ if (!dragging) return;
+ const rect = nav.getBoundingClientRect();
+ curW = Math.max(MIN, Math.min(MAX, e.clientX - rect.left));
+ nav.style.width = curW + 'px';
+ });
+ window.addEventListener('mouseup', () => {
+ if (!dragging) return;
+ dragging = false; handle.classList.remove('dragging'); document.body.classList.remove('nav-dragging');
+ localStorage.setItem('pangolin-ds-navw', curW);
+ });
+})();
+
/* ── init（sprite 注入可能在 DOMContentLoaded，稍等确保 PANGOLIN_ICONS 就绪） ── */
function boot(){
applyTheme(localStorage.getItem('pangolin-ds-theme') || 'light');
diff --git a/design/prototype/screens/orders.html b/design/prototype/screens/orders.html
new file mode 100644
index 0000000..5293bac
--- /dev/null
+++ b/design/prototype/screens/orders.html
@@ -0,0 +1,342 @@
+
+
+
+
+
+Pangolin · Orders (Interactive Prototype)
+
+
+
+
+
+
+
+
Pangolin 穿山甲
+
Orders · Design preview
+
+
+
+ Single phone frame walking the order flow: Orders list → tap a row → Order detail → back. Four lifecycle states (awaiting payment / paid · activating / completed / expired). Copyable order & trade numbers. Toggle language (EN / 中) and theme top-right.
+
+
+
+
+
穿山甲 Pangolin
+
购买流程 · 交互原型
+
← 返回登记簿
+
+
+
+ 单手机框走完整购买流程：购买（特性统一置顶 + 支付渠道 switch + 精简套餐卡）→ 创建订单（顶部订单信息按所选渠道币种显价）→ 成功 / 失败。
+ 支付渠道即币种即方式：USDT → 加密货币（默认）/ 人民币 → 支付宝；套餐价随渠道切换（各币种一口价，不做汇率换算）。结算币种一经下单锁定，跨币种需重新下单（pay 侧 currency_mismatch）。资金外流全在 App 外，App 内无卡号录入（铁律 #10）。「▸ 模拟到账 / 失败」为评审用。切右上角看深色。
+
+
+
+
+
+ 升级 PRO
+
+
+
+
+
+
+
+
+
+
+
所有套餐均包含
+
+
+
不限时长 · 不限流量
+
80+ 全球加速线路
+
5 台设备同时在线
+
优先客服
+
+
+
+
+
+
+
支付渠道
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
订单信息
+
套餐按年 · PRO
+
支付渠道加密货币 · USDT
+
应付金额$34.99
+
到期日2027-07-11
+
+
+
+
+
网络USDT · TRC20
+
收款地址TB1e7q1333iuLMLc2iQaoaqeuDF2U7cxan
+
精确金额34.990001
+
请转账 34.990001 USDT（含小数末位），金额用于自动对账识别，多退少不到账。
+
+
+
+
+
将跳转至支付宝完成付款，付款后自动返回本页并开通。
+
+
+
等待到账确认…
+
+
+
+
+
+
评审演示
+
+
+
+
+
+
+
+
+
+
+
支付成功
+
PRO 有效期至 2027-07-11
+
+
+
+
+
+
+
+
+
+
+
+
+
+
穿山甲 Pangolin
+
官网 Site · 可交互原型
+
← 返回登记簿
+
+
+
+ 官网宣传页完整版式（顶栏 / Hero / 特性 / 定价 / 下载 / 页脚），装进 mock 浏览器窗口，已加交互：
+ 导航平滑滚动 + scrollspy 高亮、语言下拉（六语单显切换：简体中文 / EN / 日 / 韩 / 俄 / 西）、明暗主题、定价「月付 / 年付」段控切价。
+ 仅引 ../tokens.css / ../atoms.css / ../icons.js，业务色全走 var(--token)；
+ 套餐数字对齐 §7；文案脱敏（铁律 #13）——只讲「网络加速 / 极速畅连 / 隐私保护 / 无日志」。切右上角看深色。
+
+
此页自适应：窗口 < 720px 时导航折叠、各区块单列堆叠
+
+
+
+
+
+
+
+
+
+
+
+
+
极速 · 稳定 · 省心
+
极速畅连，
+网络如丝顺滑
+
轻盈、亲和、即开即用的跨平台网络加速应用。一键连接，智能选线，稳定不掉线。
+
+
+ 全球加速线路
+ 严格无日志
+ 端到端加密
+
+
+
+
+
+
+
+
+
+ 已支持
+ iOS
+ Android
+ macOS
+ Windows
+ Linux
+
+
+
+
+
+
+
+
产品
+
为日常而生的连接体验
+
没有复杂配置，没有技术门槛。打开就用，把稳定与隐私留给我们。
+
+
+
+
+
一键连接
+
一颗按钮，智能挑选最快线路。无需手动配置，也能秒连。
+
+
+
+
智能分流
+
按规则智能分流，该加速的加速，本地服务直连，互不打扰。
+
+
+
+
全球加速线路
+
覆盖多地优质线路，视频与游戏优化随心选。
+
+
+
+
严格无日志
+
我们不记录你的浏览数据。隐私是底线，不是卖点。
+
+
+
+
Kill Switch
+
一旦连接中断，立即阻断网络，杜绝真实 IP 泄露。
+
+
+
+
多端同步
+
一个账户，手机、平板、电脑同时在线，最多 5 台设备。
+
+
+
+
+
+
+
+
+
定价
+
简单透明的价格
+
随时升级或取消。所有套餐均含核心加密与无日志承诺。
+
+
+
+
+
+
免费版
+
适合轻度使用与尝鲜
+
¥0
+
+
每日 10 分钟时长
+
仅 1 个基础节点
+
使用前观看广告
+
核心加密 · 无日志
+
+
+
+
+
+
+
最受欢迎
+
专业版
+
个人用户的最佳选择
+
¥25/月
+
+
全球加速线路
+
无限流量 · 极速
+
5 台设备同时在线
+
流媒体 & P2P 优化
+
Kill Switch · 智能分流
+
+
+
+
+
+
+
团队版
+
小团队集中管理
+
¥99/月 · 10 席位
+
+
专业版全部功能
+
10 个成员席位
+
集中计费与管理
+
优先客服
+
+
+
+
+
+
+
+
+
+
为什么网页上没有支付按钮？
+
出于风控与隐私考虑，穿山甲不在网页或 App 内直接收款。你可以通过以下任一渠道获取激活码，在客户端内兑换即可开通。
+
+ 自助发卡商店
+ USDT (TRC20) · 最隐私
+ Telegram
+ LINE
+ 邮箱
+
+
+
+
+
+
+
+
+
+
下载
+
全平台，随处可用
+
一个账户，所有设备同步。下载即用，无需配置。
+
+
+
+
+
+
Android
Android 9+
+
+
+
+
+
macOS
macOS 12+
+
+
+
+
+
Windows
Win 10/11
+
+
+
+
+
Linux
deb / rpm
+
敬请期待
+
+
+
+
+
+
+
+
+
+
穿山甲 Pangolin
+
桌面客户端 · 交互原型
+
← 返回登记簿
+
+
主题
+
+
语言
+
+
视角
+
+
更新条
+
+
+
+
+ 单窗口可交互桌面客户端（980×640）。左侧栏切视图、连接键状态机、设置开关真能开关、语言中/EN 单显切换、视角 免费版/PRO 切换。品牌区与底部会员卡均可进账户。顶栏演示控制段与设置页开关双向联动。登录与设备超限另附独立静态帧。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 发现新版本 v2.5.0，建议更新
+
+
+
+
+
+
+
+
+
+
未连接
+
点击圆钮开始极速畅连
+
智能选择 · 香港 · 28ms
+
+
+
86.4 Mb/s
+
12.1 Mb/s
+
28 ms
+
+
+
+
+
+
+
+
+
+
+
+ 智能选择
+ 根据当前网络环境，自动选择最优节点
+
+
推荐
+
+
+
+
+
+
+
US
+
美国 · 洛杉矶
+
168 ms
+
+
+
+
DE
+
德国 · 法兰克福
+
暂不可用
+
+
+
+
+
+
+
+
+ 统计
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
me@pangolin.app
+
免费版
+
+
+
+
+
+
账户信息
+
+
+
设备管理 ·
+
+
+
偏好
+
+
+
+
+
+
+
REALITY / Hysteria2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
断连保护 Kill Switch
断线时阻断网络，防止数据泄露
+
+
+
+
+
+
+
+
+
+
REALITY / Hysteria2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
PRO 全部特性
+
+
不限时长 · 不限流量
+
80+ 全球加速线路
+
5 台设备同时在线
+
优先客服支持
+
+
+
+
+
+
支付渠道
+
+
+
+
+
+
+
+
+
+
+
+
+
+
按年 · PRO¥199.99
+
加密货币 · USDT
+
有效期至 2027-07-11
+
+
+
网络USDT · TRC20
+
收款地址TB1e7q1333iuLMLc2iQaoaqeuDF2U7cxan
+
精确金额34.990001
+
请按精确金额（含小数末位）转账，金额用于自动对账识别，多退少不到账。
+
+
+
+
¥199.99
+
用支付宝扫码支付
+
付款后自动开通，无需手动确认。
+
+
等待到账确认…
+
+
+
+
评审演示
+
+
+
+
+
+
+
+
+
+
+
+
支付成功
+
PRO 有效期至 2027-07-11
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
登录分屏卡 · 品牌左 / 表单右（独立静态屏，不并入交互窗口）
+
+
+
+
+
+
穿山甲
+
极速畅连 · 稳定加速线路
隐私保护 · 全程无日志
+
+
PANGOLIN
+
+
+
+
+
+
+
+
设备超限登录后设备数超上限挡板（独立静态屏，不并入交互窗口）
+
+
+
设备数已达上限
+
你的套餐最多 5 台设备，请移除一台以继续。
+
+
+
+
+
+
+
+
穿山甲 Pangolin
+
移动 App · 交互原型
+
← 返回登记簿
+
+
+
+ 单机可交互原型：底部四 Tab、连接键三态状态机（未连接 → 连接中 → 已连接）、
+ 节点选择联动、套餐视角切换。全部复用 ../atoms.css 原子，vanilla JS 无依赖。用顶栏右侧演示控制段切主题 / 语言 / 视角 / 更新提示。
+
+
+
+
+
+
交互主框架 · 四 Tab 状态机
+
+
+
+
+
+
+
+
+
+
+ 发现新版本 v1.1.0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
智能选择
+
根据当前网络环境，自动选择最优节点
+
+
推荐
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
me@pangolin.app
+
免费版
+
+
+
+
+
+
+
+
+
+
me@pangolin.app
+
PRO 会员 · 有效期至 2027-07-11
+
+
+
+
+
+
账户信息
+
+
+
+
+
+
+
我的设备 · 3 / 5 台
+
+
+
+
+
+
MacBook Pro
+
最后在线 2 小时前
+
+
+
+
+
+
+
+
偏好
+
+
+
+
+
+
+
REALITY / Hysteria2
+
+
+
+
更多
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upgrade to PRO
+
+
+
+
+
+
+
+
All plans include
+
+
Unlimited time and data
+
80+ global nodes
+
5 devices at once
+
Priority support
+
+
+
+
Payment channel
+
+
+
+
+
+
+
+
Quarterly
+
+
+
+
+
Most popular
+
Yearly
+
+
+
+
+
+
+
+
+
+
Plan
+
Payment channel
+
Amount
+
Valid until
+
+
+
NetworkUSDT · TRC20
+
AddressTB1e7q1333iuLMLc2iQaoaqeuDF2U7cxan
+
Exact amount4.990001
+
+
+
+
+
You will be redirected to Alipay.
+
+
+
Waiting for confirmation...
+
+
+
+
+
+
Demo
+
+
+
+
+
+
+
+
+
+
+
Payment successful
+
+
+
+
+
+
+
+
+
+
+
Payment failed
+
Order timed out, please retry
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
静态登录 · 注册
+
+
+
登录
+
+
+
+
穿山甲
+
Pangolin
+
极速 · 稳定 · 省心
+
+
+
+
+
+
+
+
+
+
+
继续即代表同意《服务条款》与《隐私政策》
+
+
+
+
+
+
+
+
静态设备超限挡板 · #16
+
+
+
+
+
+
设备数已达上限
+
你的账户最多可同时登录 5 台设备，请移除一台后继续。
+
+
+
+
+
+
+
+
MacBook Pro
+
最后在线 2 小时前
+
+
+
+
+
+
+
+
Windows PC
+
最后在线 3 天前
+
+
+
+
+
+
+
+
+
+