---
name: 江苏省供销合作经济学会融合门户
description: 参考图方向下的门户、认证与个人中心实现记录
colors:
portal-blue: "#1b4f80"
portal-red: "#b7242d"
portal-ink: "#18365a"
portal-muted: "#5c7187"
portal-surface: "#fff"
footer: "#204d79"
rounded:
field: "6px"
card: "6px"
identity-card: "7px"
service-strip: "8px"
authentication-panel: "12px"
spacing:
content: "16px"
section: "18px"

panel-gap: "20px"

Design System: 江苏省供销合作经济学会融合门户

Overview

本说明记录现有实现；视觉依据为用户指定的机构门户参考。业务首页采用三层头部、全幅乡村城市红绸主图、红色快捷服务、权限栏目和蓝色页脚；个人中心沿用同一业务外壳。认证页保留白色机构页头、景观介绍区与账号表单。默认浅色，部分暗色覆盖不能视为完整暗色验收。

机构名称由 preferences.copyright.companyName 提供，JSSM 端固定为“江苏省供销合作经济学会融合门户”，编译配置、后端展示层与页标题保持一致。Logo 使用配置来源，当前门户有本地绿色标记 public/logos/JSSM-portal.svg。登录介绍使用公司配置及源码缺省文案。中性默认头像为 public/static/imgs/portal-avatar.svg。这些资产不代表已取得其他机构的身份授权。

Colors

前置色值来自现有主题与页脚。蓝色承担链接、侧栏选择和结构层次，深蓝承担主要文字，灰蓝承担辅助信息，白色承担内容表面。红色承担桌面一级导航选中、快捷服务标识及主要操作；蓝色页脚及更深的版权条收束长页面。局部绿色标记和功能图标不扩展为新全局品牌色。

Typography

正文与表格继承项目基础字体栈。首页主标题使用系统楷体/宋体回退（KaiTi、STKaiti、Noto Serif SC、serif），尺寸随宽度变化（32–54px、800）；手机为（32px），极窄屏为（29px）。头部机构名为（25px、750），中等宽度为（21px），手机为（16px）。栏目标题为（17px、700），正文与辅助信息主要为（11–14px）。个人中心页标题为（29px、700），手机为（25px）。字距强调用于品牌与横幅，不应用于资料表单正文。

Layout

业务模式采用 mixed-nav：桌面头部为工具层（32px）、品牌与搜索层（80px）、一级导航层（46px），共（158px）；手机回归（72px）头部与抽屉导航。中等宽度（768–1100px）隐藏品牌附加文字、收窄搜索与品牌区，保留昵称和操作可读性。桌面导航超出可用宽度收纳到“更多”。侧栏默认展开宽度（228px），标签栏高（40px），标签栏按实际侧栏占用宽度对齐；标签历史不全部持久化。

首页横幅全幅，桌面最小高（350px），手机为（280px）；正文容器最大（1280px），桌面左右各留（40px），（1050px）以下各留（24px），（767px）以下各留（14px）。新闻区域为宽窄双列，栏目网格最小列宽（270px）。手机将新闻与服务区改为单列、专题改为双列，快捷入口改为三列，红色标签从左侧移至顶部。首页专用蓝色页脚不等同于框架默认固定页脚。

个人中心最大宽度（1240px），左身份卡（282px）、右设置区自适应，间隔（20px）；（1000px）以下左列（240px）、间隔（14px）；（767px）以下上下堆叠。认证模式仍为桌面介绍与表单双列，（850px）以下单列，（420px）以下缩减表单内距与Logo。

src/main.ts 通过当前偏好命名空间的 portal-appearance-v2 标记执行一次外观迁移，保留登录存储，随后允许用户继续调整外观。

Elevation & Depth

白色表面、浅蓝灰边框和轻阴影构成业务层级。栏目使用 0 3px 10px rgb(24 66 106 / 4%)，个人中心为相同方向的更淡阴影（3%）。认证表单保留更明显的 0 18px 56px rgb(24 62 98 / 15%)，不推广为业务列表阴影。

Shapes

栏目与输入以小圆角组织，身份卡、快捷条、认证面板的圆角见前置令牌。一级导航为整齐方形色块，快捷区桌面红色标签带箭头形裁切、手机改矩形；功能图标使用圆形底。列表采用水平分隔，避免额外装饰线干扰资料编辑。

Components

• 头部：可读头像昵称下拉、个人中心直达、密码设置快捷菜单与全局菜单搜索。桌面一级菜单选中红底白字，侧栏选中蓝底白字；“更多”保留展开、关闭和焦点交互。中等宽度优先压缩品牌，不挤掉用户入口。
• 首页：usePortalMenus 从账号权限菜单构建可见栏目与叶入口，排除隐藏、禁用及空目录，按现有路径和名称识别课题、待办、报销、公告等功能。相关面板调用真实业务 API；缺少权限时不凭预览样本添加生产模块。保留加载、空态、失败及适用的重试状态。
• 个人中心：左侧头像、身份和联系信息，右侧基本资料、密码设置、账号绑定三个页签；手机堆叠。沿用原接口，头像上传读取返回对象的 url，空邮箱允许不填，密码修改成功后清空表单。绑定回调保留 hash 路由，使用 router.replace 清理 code/state/type；界面不展示 openid 或 token。Profile 是隐藏 core 路由，但不走 core 路由免认证分支，仍校验 token。
• 登录：保留账号密码标签、验证码开关与既有提交逻辑，输入和提交按钮高（46px），有明确聚焦与提交中状态。
• 图像：public/static/imgs/portal-hero-v2.png 为无文字的乡村、城市与红绸主图；portal-modules-v2.png 是书籍、办公、财务、档案四象限图集；保留的 portal-landscape-v1.png 用于认证景观。生成图不作为真实地点或事件照片；用途与预览边界见 README.md。

Do's and Don'ts

• Do：保持蓝白结构、红色强调、配置品牌与动态权限菜单；窄屏检查抽屉、品牌压缩、表单和页签可读性。
• Do：让真实 API 的加载、失败、成功状态与演示数据保持清楚边界，保留键盘焦点及敏感字段隐藏。
• Don't：把示例截图、检测器无提示或局部静态检查视为真实账号、权限、上传、改密和绑定验收。
• Don't：将 scripts/portal-preview 或 fixture 数据接入正式入口。

独立审查结论为“视觉收尾通过，可交付界面预览”。真实后端登录与写入、第三方授权、完整键盘流程、暗色及计算对比度仍未验收；具体边界见 REVIEW.md。