交互设计 · Telegram/LINE 多频道 · 群组 · 内容 DB 配置 · 前端 + 后端 + 数据库
@PangolinVPN_bot）。
需求：点 Telegram 进入二级页，列出该平台下的多个频道 / 群组 / Bot，
每项含名称、@handle、一句说明、可选成员数、认证标记与「打开 / 加入」动作，
全部由数据库配置（运营可随时增删改，客户端不写死）。本页给出交互原型 + 数据模型 + 接口，待你统一后再开发。
下方为内嵌可交互原型，配色用 App 真实暗色 token（clay/espresso）。点 Telegram 或 LINE 卡进详情；「邮箱客服 / 自助发卡商店」为单链接，点即直接打开（原型里仅提示）。
遇到问题？通过以下任一渠道联系我们，通常数分钟内回复。
同一原型内切换三态 · 真机为路由 push（移动端整页）/ 内容区替换（桌面）。 L1 上 LINE 为灰置「即将开放」不可点；「L2 · LINE」按钮仅用于预览其预留的二级结构（去灰后即此样式）。
›，点击进二级页（Telegram / LINE）。
仅 1 条链接的平台（邮箱、发卡商店）→ 点击直接执行该链接动作（打开邮件 / 浏览器），不进二级。
规则统一由「该平台 link 条数」驱动，无需前端写死哪个进二级。‹ 返回 + 平台头（图标 + 名 + 一句副标题）；下方按 kind 分组展示
——频道 CHANNELS / 群组 GROUPS / 客服机器人 BOT（分组标题仅在该组有内容时出现，顺序固定）。@handle ·
可选成员数（展示用缓存文本，不实时拉 Telegram）· 动作按钮。tg://resolve?domain=… 唤起已装 Telegram，失败回退 https://t.me/…（浏览器）。enabled=0（或库里无该平台行）→ 默认 L1 不展示该平台；二级页某分组为空 → 不渲染该分组标题。comingSoon 列表（当前 = [line]）。列在其中且暂无 enabled 链接的平台，L1 置灰 + 「即将开放」角标、不可点进（占位预告，不隐藏）。
运营在库里配好该平台链接后，从 comingSoon 列表移除该项（一行代码）→ 自动变可点二级页。LINE 即走此路：结构与 Telegram 同构，先灰、内容就绪即上。一张表覆盖所有联系方式 —— Telegram 频道/群组/Bot、LINE、邮箱、发卡商店都是 contact_link 里的一行，
差别只在 platform（分到哪个 L1 卡）+ kind（二级分到哪组 & 动作样式）+ url 协议。
一行 = 一条可点链接；L1 按 platform 聚合，L2 按 kind 分组。
contact_link ───────────────────────────────────────────────────────────── id INTEGER PK platform TEXT -- telegram | line | email | store | whatsapp | ...(L1 分组键) kind TEXT -- channel | group | bot | link(L2 分组键 & 动作样式) title TEXT -- "穿山甲 · 官方频道" / "邮箱客服" / "自助发卡商店" handle TEXT -- "@PangolinVPN"（展示；可空，邮箱/商店留空） url TEXT -- 点击目标(见下表);App 侧对 telegram 优先转 tg:// description TEXT -- 一句说明（可空） verified INTEGER -- 0/1 认证勾 sort_order INTEGER -- 组内排序 enabled INTEGER -- 0/1 下线开关 locale TEXT -- "zh"|"en"|NULL(全部) 可选按语言过滤
邮箱之类怎么进这张表 —— 就是把 url 换个协议、kind=link：
| 渠道 | platform | kind | url 示例 | 动作 |
|---|---|---|---|---|
| Telegram 频道 | telegram | channel | https://t.me/PangolinVPN（App 转 tg://） | 打开 |
| Telegram 群组 | telegram | group | https://t.me/PangolinChat | 加入 |
| Telegram Bot | telegram | bot | https://t.me/PangolinVPN_bot | 打开 |
| LINE 账号 | line | link | https://line.me/R/ti/p/@pangolinvpn | 打开 |
| 邮箱客服 | email | link | mailto:support@pangolin.vpn | 打开（拉起邮件） |
| 自助发卡商店 | store | link | https://shop.pangolin.vpn | 打开（浏览器） |
| WhatsApp（将来） | whatsapp | link | https://wa.me/… | 打开 |
动作按钮文案由 kind 决定：group → 「加入」（实心强调）；其余（channel/bot/link）→ 「打开」（描边）。
点击一律「用系统方式打开 url」，App 侧仅对 telegram 平台做 https://t.me/x → tg://resolve?domain=x 的唤起优化，失败回退原 url。
唯一不入库的是「皮」：L1 平台卡的图标 / 强调色 / 默认显示名由前端一个小 platform 注册表按 platform 键内置
（telegram=✈+强调色、line=💬、email=✉、store=🛍…），避免把图标资源塞进数据库；未知 platform 用通用图标兜底。
库里只配内容。加已有平台的新频道/群 = 纯 DB，无需发版；加一个全新平台类型（新图标）= 注册表加一行 + 发版。
GET /v1/contact # 无需登录亦可（客户端普通请求）
→ 200
{
"platforms": [
{ "platform":"telegram",
"links":[
{"kind":"channel","title":"穿山甲 · 官方频道","handle":"@PangolinVPN",
"url":"https://t.me/PangolinVPN","description":"产品更新与公告","verified":true},
{"kind":"group","title":"穿山甲 · 用户交流群","handle":"@PangolinChat",
"url":"https://t.me/PangolinChat","description":"使用问题互助"},
{"kind":"bot","title":"客服机器人","handle":"@PangolinVPN_bot",
"url":"https://t.me/PangolinVPN_bot","description":"自动答疑/提交工单"}
]},
{ "platform":"line", "links":[ ... ] },
{ "platform":"email", "links":[{"kind":"link","title":"邮箱客服","url":"mailto:support@pangolin.vpn"}] },
{ "platform":"store", "links":[{"kind":"link","title":"自助发卡商店","url":"https://shop.pangolin.vpn"}] }
]
}
enabled=1 过滤、按 sort_order 排序、按 platform→kind 分组返回；客户端只渲染。server/migrations/{mysql,sqlite}/ 各加建表 + 种子数据（把现有 4 渠道灌入，Telegram 先补真实频道/群）。member_hint。kind=group，实心强调）；频道/Bot/普通链接 「打开」（描边）。GET /v1/contact（不并进 /me 引导）。contact_link 表：邮箱/发卡/LINE 与 Telegram 同表，靠 url 协议区分（mailto: / https: / tg://）。