交付出件箱

机构管理搬平台手机端 · 方案(v1)

dev2 · 2026-09-07 · 长官 9-06 夜令「把 PC 端机构管理全部功能搬到平台手机端首页,所有功能,不要有遗漏」
本方案基于对 PC 端 3 个页面(3974 行)的逐行调研,功能清单见附录。风格令牌全部扒自现有平台手机端,零自造。

一、要搬的东西有多少(调研实数)

维度	数量
页面	3(机构列表 / 席位管理 / 机构洞察)
按钮	58
弹窗抽屉	9
表单字段	15
开关	14
表格	2
后端接口	20

二、核心难点

PC 端是宽屏三页,手机端只有 390px 宽。直接搬会出三个问题:

机构表格 7 列塞不进 390px
席位表格 10 列更塞不进
建机构弹窗 14 个开关 + 3 个字段,一屏放不下

所以不能"照搬",要重新组织信息层级,但功能一个不少。

三、方案:三级结构

平台手机端首页
└── 机构管理(新增入口)
    ├── 机构列表(一级)
    │   └── 机构详情(二级)
    │       ├── 基本信息 + 编辑
    │       ├── 开关配置(14 个,分 3 组折叠)
    │       ├── 凭证管理(查看/重新生成/访问链接)
    │       ├── 席位管理(三级)
    │       └── 危险操作(停用/删除)
    └── 机构洞察(一级,与机构列表平级)

为什么这么分:PC 端的「机构列表行内 6 个操作按钮」在手机上放不下,改为点进详情页再操作;席位管理本来就是下钻页,继续保持。

四、逐页设计

页1 · 首页新增入口

在现有首页快捷操作区加一张卡「机构管理」,与现有卡同款样式(圆角 14px、白底、右箭头)。

页2 · 机构列表

顶部:搜索框 + 字段下拉(6 项,照搬 PC)
列表:每机构一张卡,显示机构名(18px 粗) / 状态胶囊(右上角) / 联系人+手机 / API Key 脱敏 + 复制图标 / 右箭头
底部:加载更多(照抄现有 load-more 范式)
右上角:新增机构按钮(渐变绿实心)

页3 · 机构详情(核心页)

分 5 个区块(照抄详情页 phone-section home-panel 范式):

基本信息:机构名/联系人/手机/创建时间 + 「编辑」按钮
凭证:API Key 脱敏 + 复制 + 「访问链接」「重新生成凭证」两个按钮
功能开关(14 个,三组折叠):
品牌价值(4):平板首页机构展示 / 视光档案 / 家长子席位开通 / 体验演示门店组
访问与登录(4):显示席位剩余天数 / 硬件数据推送 / 用户注册 / 多租户密码登录(后两者互斥,保留联动)
首页功能(6):报告生成 / 找同款案例 / 按效果定抗近方案 / 抗近领航 / 近视的世界 / 谣言粉碎机
席位:显示「共 N 席位 · 启用 M」+ 进入席位管理
危险操作(沉底):停用/启用、删除机构(都带二次确认)

页4 · 席位列表

PC 端 10 列表格 → 手机端每席位一张卡
卡上显示:账号(粗) / 状态徽章 / 用户名 / 微信人(头像+昵称) / 到期时间 / 设备徽章
次要信息(联系电话、绑定时间、最近登录)进详情
顶部:搜索 + 字段下拉(5 项) + 「批量生成席位」按钮
底部:分页(每页 20,照搬)

页5 · 席位详情(抽屉改全屏页)

PC 端是右侧抽屉,手机端改全屏页,保持四区结构:
1. 账号信息(只读)
2. 基础信息(用户名/联系电话 + 保存)
3. 有效期(延长天数,默认 0 防手滑)
4. 账号操作(沉底):解锁(冷却时才出) / 重置密码 / 换绑使用人(未绑微信禁用) / 停用启用

页6 · 机构洞察

4 张总览卡 → 手机端 2×2 网格
排行榜:条形图列表,每行可展开
展开层:来源构成条 + 折线图(近7/30天切换) + 席位面板
筛选:搜索 + 数据分类(5类) + 时间范围(4档)
右上角:调整口径(5 个阈值)

页7 · 用量详情弹窗

三个 Tab:概览 / 问了什么 / 查了什么案例

五、风格令牌(全部扒自现网,零自造)

项	值	出处
容器宽	max-w-[390px]	platform-mobile-shell.tsx:199
背景渐变	linear-gradient(180deg,#f2fff8,#fbfbf4 58%,#f6faf7)	shell:199
主色	#16866f(导航) / #0f8a73(按钮文字) / #10a78b(实心底)	shell:205, page:152/192
主按钮渐变	linear-gradient(135deg,#17b58a,#078a72) 圆角15px 高44px	channel-h5.css:271-280
卡片	圆角 18px(大)/14px(列表) 边框 #dcebe4 阴影 0 10px 26px rgba(20,35,31,.06)	page:160,205
字号	26px 首页大标题 / 22px 区块标题 / 18px 卡标题 / 13-16px 正文 / 11-12px 辅助	page:144,162,208
字重	全站 font-black(900)/extrabold,信息类文字不用常规字重	page:143-145
次要按钮	白底 + border #9bdcc8 + 字 #0f8a73 + 圆角 full	page:152, load-more:24
筛选 chip	未选:白底 border #dbe6e2;选中:#0b9a7a 底白字,圆角 999px,高32px	channel-h5.css:646-675
底部导航	固定底部 4 栏高72px 白95%模糊上边框 #d8e5dd 激活 #16866f	shell:201-211
详情页返回	ArrowLeft 图标 + Link	stores/[orgId]:5
详情页区块	section.phone-section.home-panel	stores/[orgId]:381+
弹窗	max-w-390 圆角24px 边框#cfe2da 白底 p-5 阴影0 28px 80px	stores/[orgId]:606
空态	虚线边框 #cbd8e3 + 居中灰字,无图标	page:218

六、底部导航要不要加第 5 栏

现有 4 栏:首页 / 渠道 / 机构 / 财务。

⚠️ 注意:已有「机构」栏(指向 stores,门店管理),与本次要搬的「机构管理」(平台接入机构)是两个不同的东西,名字会撞。

建议:本次入口放首页快捷操作卡,不加第 5 栏(4 栏是移动端惯例上限,加到 5 栏会挤)。若长官坚持要底部入口,需先把现有「机构」栏改名以区分。

七、两个实现缺陷(调研发现,搬之前建议一起修)

门店手机号字段是死的:席位批量生成弹窗里有这个输入框,但提交时不传给后端,填了不生效(seats/page.tsx:797/842-854 有 UI,:802-813/:220-240 未使用)
未保存提示不对称:14 个开关里只有品牌价值那 4 个改了会提示"尚未保存",其余 10 个没有(orgs/page.tsx:486-490)

八、待长官拍板

入口放首页卡片(推荐)还是底部第 5 栏?
上面两个缺陷,搬的时候顺手修还是保持原样?
机构洞察的图表在手机上要不要简化(PC 端折线图+3 种条形图,手机屏小)?