Q-Adapter

Q-Adapter 通过代码实现青云QingCloud产品中常见、常用的B端页面布局与模版，让设计师和开发者直接拖拽浏览器宽度即可预览适配效果，从而降低沟通成本、提升产品交互一致性。

它解决了什么实际问题

在B端产品设计中，不同屏幕宽度下的布局适配（如左侧菜单栏断点自动展开与收起、页头自适应）常因沟通不充分导致返工。Q-Adapter 将青云QingCloud产品中反复出现的布局模式——通用工作台、概览页、列表页、详情页、表单页、产品开通页、异常页——以可交互的代码页面呈现，设计师和开发者无需翻阅设计稿或口头描述，直接拖动浏览器宽度就能看到各断点下的真实效果。

• 页头：自适应效果，随窗口宽度变化调整元素排列
• 经典布局：导航、菜单、页头与内容的整体响应式布局
• 常规栅格卡片：页面级适用栅格的卡片布局，以及产品内适用栅格的卡片布局

页面类型覆盖范围

Q-Adapter 按页面用途划分了7大类，每一类包含多个具体模版，全部基于青云QingCloud真实产品场景提炼。

• 概览页：图标概览页（含/不含介绍）、插画概览页（含/不含介绍），用于产品欢迎或介绍场景
• 列表页：常规列表页、卡片列表页、固定表格列列表页、标签列表页、表格滚动列表页（支持横向/纵向滚动）、空状态列表页（数据为空或搜索为空）
• 详情页：常规详情页、标签详情页、两级标签详情页、卡片详情页
• 表单页：页面级表单页（含/不含预览）、产品内表单页、产品内分步表单页、产品内简易表单页
• 产品开通：页面级开通、产品内开通（附加产品/服务开通）
• 异常页：404、无权限、服务器异常、网络异常、功能建设中、服务升级维护中、浏览器不兼容，共7种反馈页面

使用方式与注意事项

该站点无需下载或安装，访问 https://adapter.biliui.com/index.html 即可使用。所有页面均强调通过拖动浏览器宽度来预览适配效果，而非静态截图。站点首页底部有“温馨提示”明确说明此点。

• 直接访问：无需登录或注册，打开即用
• 交互方式：拖动浏览器宽度，观察布局与菜单的断点变化
• 关联链接：页面底部提供 QingCloud 官网与 Asorn 的跳转链接，用于了解产品背景

常见问题

Q1：Q-Adapter 中的“通用工作台”和“概览页”有什么区别？

A1：通用工作台主要展示用户控制台模块的适配示例，包括左侧菜单栏的垂直滚动与断点展开收起、页头自适应、经典布局以及栅格卡片（页面级与产品内）。概览页则聚焦于产品欢迎或介绍页面，分为图标概览页（纯图标或含文字介绍）和插画概览页（纯插画或含文字介绍），更偏向营销与引导性质。

Q2：Q-Adapter 的异常页包含哪些具体状态？

A2：异常页共7种：404页面丢失、无访问权限、服务器异常、网络异常、功能建设中、服务升级维护中、浏览器不兼容。每种都对应一个独立页面，可直接预览其布局与交互反馈。

Q3：我能否直接复用 Q-Adapter 的代码到自己的项目中？

A3：站点本身以代码方式实现布局模版，但材料中未明确说明是否开源或提供下载。建议直接访问页面，通过浏览器开发者工具查看源码作为参考，或联系青云QingCloud团队获取授权信息。

更多同类工具与网站,可在设计规范分类继续挑选。

信息核实于 2026年7月,具体以官网为准。