---
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。