多组织切换入口必须置于导航栏顶部固定区域，左对齐主内容区上方，用语义化标签实现，支持屏幕阅读器识别，桌面端显示完整组织名加箭头，平板缩略为前4字+省略号，手机仅留图标全屏弹出选择。
多组织切换入口该放在哪一层级
必须放在导航栏顶部固定区域，不能塞进侧边菜单或页脚。用户进入系统第一眼就要能识别当前组织、且随时可切——这属于全局上下文，不是某个模块的附属功能。放在侧边栏里，每次展开一级菜单才露出来，等于把高频操作藏成二级路径；放在页脚，视线移动距离太长，违背后台系统的操作直觉。
常见错误是把它和「个人设置」按钮挤在右上角，结果组织名被头像遮挡、缩略显示（如“腾讯…”，点开才发现是“腾讯云事业部”）。正确做法是单独占一行，左对齐于主内容区上方，紧贴导航栏底部或 header 下方，用 font-weight: 600 + 微小下划线或底色块强调当前态。
HTML结构怎么写才不破坏语义和可访问性
别用 <div class="org-switcher"> 包一堆 <code><span></span> 和 <button></button>。标准写法是：
<nav aria-label="组织切换">
<button aria-expanded="false" aria-controls="org-list">当前组织：阿里云</button>
<ul id="org-list" hidden>
<li><a href="?org=taobao">淘宝</a></li>
<li><a href="?org=alipay">支付宝</a></li>
</ul>
</nav>
要点：
立即学习“前端免费学习笔记（深入）”；
- 用
<nav></nav>而非<div>，屏幕阅读器能识别这是导航上下文 <li> <code>aria-expanded和aria-controls必须配对，否则下拉状态对残障用户不可知 - 列表项用
<a></a>而非<button></button>，因为切换本质是跳转（带 query 参数），不是纯前端状态变更 - 首次加载时，
href中的org=xxx必须和服务端返回的当前组织一致，否则 SSR 渲染错位 - 默认走
<a href="?org=xxx"></a>刷新，简单可靠 - 如果产品明确要求“不刷新”，就别自己手写沙箱逻辑，直接用微前端框架（如 qiankun）按组织维度加载子应用，隔离更彻底
- 禁用
target="_blank"，新窗口打开会丢失当前会话上下文 - 桌面端（≥1024px）：显示完整组织名 + 向下箭头图标
- 平板（768–1023px）：缩略为前4字+省略号，如“阿里云→” → “阿里…”
- 手机（＜768px）：隐藏文字，只留一个
<button></button>图标（如<i class="icon-org"></i>），点击后全屏弹出组织选择面板
切换时要不要刷新页面
取决于后端是否支持无状态组织隔离。如果权限、数据域、API 基础路径都靠 org_id 参数动态路由，那必须整页刷新——强行用 JS 拦截跳转、只换内容区，会导致历史记录混乱、后退失效、书签失效，且无法保证所有组件（比如图表 SDK、上传控件）感知到组织变更。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
只有当整个系统已做彻底的前端组织沙箱化（例如所有 API 请求自动注入 X-Org-ID header，所有缓存 key 加前缀，路由守卫校验 org 权限），才能用单页切换。但这类方案调试成本高，90% 的中后台项目不值得投入。
务实建议：
响应式下如何避免布局挤压
小屏设备上，组织名+下拉箭头常被压缩成“…”或换行，导致无法点击。根本解法不是加 white-space: nowrap，而是提前做断点分级：
注意：CSS 中不要用 max-width 硬限制容器，而要用 grid-template-columns: max-content 1fr 或 flex: 0 0 auto 控制文字区域不收缩，把压缩压力留给右侧空白区。
