TCIDADS0002-2020 云计算管控平台界面设计指南（含接收设备低功耗蓝牙技术集成规范）

TCIDADS0002-2020云计算管控平台界面设计指南（含接收设备低功耗蓝牙技术集成规范）1范围本指南规定了TCIDADS0002-2020标准下云计算管控平台（以下简称“管控平台”）的界面设计原则、布局规范、组件设计、交互设计、视觉设计、适配要求及安全设计等内容；同时明确了管控平台关联接收设备中低功耗蓝牙（BLE）技术的集成要求、设计规范、测试标准及验收要点，确保BLE技术与接收设备、管控平台的协同适配。本指南适用于TCIDADS0002-2020标准覆盖的各类云计算管控平台的界面设计、开发、测试及验收工作，包括公有云、私有云、混合云管控平台，涵盖平台管理端、运维端、用户端等各类交互界面；同时适用于集成低功耗蓝牙技术的管控平台关联接收设备（以下简称“BLE接收设备”）的硬件选型、软件集成、接口适配及功能测试工作。2规范性引用文件下列文件对于本指南的应用是必不可少的。凡是注日期的引用文件，仅注日期的版本适用于本指南；凡是不注日期的引用文件，其最新版本（包括所有的修改单）适用于本指南。TCIDADS0001-2020云计算管控平台通用技术要求GB/T18336-2015信息技术安全技术信息技术安全性评估准则GB/T25000.10-2018系统与软件工程系统与软件质量要求和评价（SQuaRE）第10部分：系统与软件质量模型ISO9241-110:2012人机交互工效学第110部分：对话原则W3C网页内容无障碍指南（WCAG）2.1蓝牙核心规范5.3版（BluetoothCoreSpecificationVersion5.3）GB/T30252-2013低功耗蓝牙通信技术要求和测试方法GB/T22451-2019信息技术蓝牙测试方法3术语和定义3.1云计算管控平台用于对云计算资源（计算、存储、网络、安全等）进行集中管理、监控、调度、配置及运维的一体化平台，具备资源全生命周期管理、故障告警、性能分析等核心功能，可与BLE接收设备进行数据交互。3.2界面组件构成管控平台界面的基本元素，包括按钮、输入框、下拉菜单、表格、弹窗、导航栏、图表等可复用交互单元，其中包含BLE相关操作及状态展示组件。3.3交互流程用户在管控平台中完成特定操作的步骤序列，包括操作触发、反馈响应、流程跳转等环节，涵盖BLE接收设备的连接、配置、数据同步等相关操作流程。3.4视觉层级通过色彩、字体、间距、尺寸等视觉元素，区分界面内容的重要程度，引导用户注意力的层级关系，重点突出BLE接收设备的连接状态、数据传输状态等关键信息。3.5无障碍设计为不同能力的用户（包括视觉、听觉、运动障碍用户）提供平等使用管控平台的设计，确保界面可感知、可操作、可理解，同时适配BLE接收设备的无障碍操作需求。3.6低功耗蓝牙（BLE）技术一种低功耗、短距离的无线通信技术，属于蓝牙技术的子集，主要用于低速率、低功耗的设备间数据传输，适用于云计算管控平台关联接收设备的轻量化数据交互场景。3.7BLE接收设备集成低功耗蓝牙模块，可接收蓝牙信号并与云计算管控平台进行数据交互的终端设备，包括传感器接收终端、数据采集终端、控制指令接收终端等，需满足低功耗、高稳定性要求。3.8BLE通信协议栈实现BLE设备间通信的软件协议集合，包括物理层（PHY）、链路层（LL）、主机控制器接口（HCI）、主机层（L2CAP、GAP、GATT）等，确保BLE接收设备与管控平台及关联设备的正常通信。4设计原则4.1实用性原则界面设计需围绕管控平台核心功能展开，优先满足资源管理、运维监控、故障处理等核心业务需求，避免冗余设计，确保操作流程简洁高效，降低用户学习成本；BLE技术集成需贴合接收设备的实际应用场景，优先保障数据传输的稳定性和低功耗需求，避免过度设计。4.2一致性原则界面的布局、组件样式、交互逻辑、视觉风格需保持统一，包括同一页面内、不同页面间、不同终端间的一致性，确保用户操作习惯可复用，提升使用连贯性；BLE接收设备的集成规范、通信协议、接口标准需与管控平台保持统一，确保多设备间的协同兼容。4.3易用性原则界面操作需简单直观，流程清晰，关键操作步骤不超过3步；提供明确的操作指引、错误提示和帮助信息，确保用户无需专业培训即可完成基本操作；BLE接收设备的连接、配置、故障排查等操作需简化，管控平台需提供清晰的BLE设备状态提示和操作指引。4.4安全性原则界面设计需结合管控平台安全需求，明确权限分级展示，敏感操作（如资源删除、权限修改）需增加确认环节，避免误操作；敏感数据（如密码、密钥）需进行加密显示和保护；BLE技术集成需保障通信安全，采用加密传输、身份认证等机制，防止数据泄露、篡改和非法接入。4.5可扩展性原则界面设计需预留扩展空间，支持新增功能模块、资源类型和交互场景，确保后续版本升级时，界面结构和风格无需大幅调整，保持设计的连续性；BLE技术集成需支持协议版本升级、多型号BLE接收设备适配，预留接口扩展空间，满足后续功能迭代需求。4.6无障碍原则遵循WCAG2.1标准，确保界面支持屏幕阅读器、键盘操作等辅助工具，色彩对比度、字体大小满足无障碍要求，保障特殊用户的使用权益；BLE接收设备的状态反馈、故障提示需适配无障碍设计，确保特殊用户可清晰感知设备运行状态。5界面布局设计规范5.1整体布局结构管控平台界面采用“顶部导航栏+左侧侧边栏+中间内容区+底部状态栏”的经典布局，各区域功能划分明确，布局比例合理，具体要求如下：顶部导航栏：高度固定（建议48px-64px），包含平台logo、用户信息、通知中心、退出登录等核心入口，样式统一，不随页面滚动而隐藏；若涉及BLE接收设备管理，可在通知中心添加BLE设备异常告警提示。左侧侧边栏：宽度固定（建议200px-240px），展示平台核心功能模块导航，支持折叠/展开操作，折叠后仅显示图标，展开后显示图标+文字，当前选中模块需有明显视觉标识；新增“BLE设备管理”模块，包含设备列表、配置管理、状态监控等子模块。中间内容区：占据界面主要区域（建议宽度≥1200px），用于展示当前模块的具体内容，支持滚动，内容布局需遵循“上标题、中内容、下操作”的逻辑，间距均匀；BLE相关页面需重点展示设备连接状态、数据传输进度、信号强度等核心信息。底部状态栏：高度固定（建议32px-40px），展示平台版本号、版权信息、联系方式等辅助信息，字体颜色浅于正文，不干扰核心操作；可添加BLE通信状态提示（如“BLE连接正常”“数据同步中”）。5.2布局间距规范界面间距需遵循统一标准，确保布局整齐有序，提升视觉舒适度，具体要求如下：页面内边距：上下左右边距统一为24px，最小不低于16px。模块间距：不同功能模块之间间距为24px，同一模块内子元素间距为16px或8px，避免间距杂乱；BLE设备状态展示模块与其他模块间距需保持24px，确保视觉区分。组件间距：按钮、输入框、表格等组件之间的横向间距为16px，纵向间距为12px，确保操作区域不拥挤；BLE设备操作按钮（如“连接”“断开”“配置”）之间间距需保持16px。5.3响应式布局要求管控平台界面需支持响应式适配，适配不同屏幕尺寸（桌面端、平板端），具体适配规则如下：桌面端：屏幕宽度≥1200px，采用标准布局（顶部+左侧+中间+底部），中间内容区可分栏展示（如两栏、三栏）；BLE设备列表可采用三栏布局，分别展示设备基本信息、连接状态、操作按钮。平板端：768px≤屏幕宽度＜1200px，左侧侧边栏可自动折叠，中间内容区自适应调整，取消分栏布局，核心操作保持可见；BLE设备核心状态（如连接状态、信号强度）需优先展示，操作按钮可折叠至下拉菜单。适配原则：响应式调整时，核心功能和操作入口不隐藏，组件尺寸按比例缩放，避免出现内容溢出、布局错乱等问题；BLE相关核心信息（如设备离线告警、数据传输失败提示）需始终可见。6界面组件设计规范6.1通用组件设计6.1.1按钮按钮分为主要按钮、次要按钮、文本按钮、危险按钮四类，样式统一，功能区分明确，具体要求如下：主要按钮：用于核心操作（如“确认”“提交”“创建”），背景色采用平台主色调，文字为白色，圆角半径4px，hover状态亮度降低10%，点击状态亮度降低20%；适用于BLE设备“连接”“同步数据”等核心操作。次要按钮：用于辅助操作（如“取消”“返回”），背景色为白色，边框为平台主色调，文字为平台主色调，圆角半径4px，hover状态背景色为浅灰色；适用于BLE设备“断开连接”“暂停同步”等辅助操作。文本按钮：用于次要操作（如“编辑”“删除”“查看”），无背景、无边框，文字为平台主色调，hover状态背景色为浅灰色，仅在操作区域较小时使用；适用于BLE设备“查看详情”“编辑配置”等操作。危险按钮：用于高危操作（如“删除资源”“注销账号”），背景色为红色，文字为白色，圆角半径4px，hover状态亮度降低10%，点击时需弹出确认弹窗；适用于BLE设备“解除绑定”“恢复出厂设置”等高危操作。按钮尺寸：默认按钮高度36px，宽度根据文字长度自适应（最小宽度80px）；小型按钮高度28px，大型按钮高度44px，用于特殊场景；BLE设备操作按钮优先采用默认尺寸，小型按钮用于紧凑布局场景。6.1.2输入框输入框用于用户输入文本、数字等信息，分为单行输入框、多行输入框、带图标的输入框，具体要求如下：样式：输入框高度36px，边框为浅灰色（#E5E6EB），圆角半径4px，聚焦时边框颜色变为平台主色调，无阴影或轻微阴影（模糊度4px）。单行输入框：适用于短文本输入（如账号、密码、搜索关键词），宽度根据场景自适应，默认提示文本（placeholder）颜色为浅灰色（#C9CDD4），字体大小14px；适用于输入BLE设备名称、设备ID、连接密码等信息。多行输入框：适用于长文本输入（如备注、描述），默认高度80px，可拖动调整高度，最大高度不超过200px，支持换行；适用于输入BLE设备配置说明、故障描述等信息。带图标的输入框：在输入框左侧或右侧添加图标（如搜索图标、密码可见/隐藏图标），图标尺寸20px，与输入框文字间距8px，用于提升操作便捷性；BLE设备相关输入框可添加蓝牙图标、密码图标等，增强辨识度。错误提示：输入内容不符合要求时，输入框边框变为红色，下方显示红色错误提示文本（字体大小12px），提示内容简洁明确（如“请输入正确的IP地址”“BLE设备ID格式错误”）。6.1.3下拉菜单下拉菜单用于展示可选择的选项，分为普通下拉菜单、搜索下拉菜单、级联下拉菜单，具体要求如下：样式：下拉菜单触发按钮与输入框样式一致，下拉面板边框为浅灰色，背景色为白色，圆角半径4px，有轻微阴影（模糊度8px），面板宽度与触发按钮一致。普通下拉菜单：选项高度32px，hover状态背景色为浅灰色，选中状态背景色为平台主色调（浅色系），文字颜色为平台主色调；适用于选择BLE设备通信协议版本、数据传输频率等固定选项。搜索下拉菜单：在下拉面板顶部添加搜索输入框，用于快速筛选选项，搜索框样式与普通输入框一致，筛选结果实时展示；适用于从大量BLE设备中筛选目标设备。级联下拉菜单：用于多维度选项选择（如“地区选择”“资源分类选择”），采用多级展开形式，每级选项宽度一致，展开时右侧显示下一级选项，无下一级时不显示展开图标；适用于BLE设备分类筛选（如按设备类型、部署区域筛选）。选项数量：下拉菜单选项数量不超过10个，超过10个时添加滚动条，滚动条样式统一（宽度4px，背景色浅灰色，选中色平台主色调）。6.1.4表格表格用于展示批量数据（如资源列表、运维日志、告警信息），分为普通表格、可编辑表格、分页表格，具体要求如下：样式：表格边框为浅灰色，表头背景色为浅灰色（#F5F7FA），表头文字为黑色（#1D2129），字体大小14px，加粗；表体行高40px，奇数行背景色为白色，偶数行背景色为浅灰色（#F5F7FA），hover状态背景色为浅色系平台主色调。普通表格：用于展示不可编辑数据，单元格内容居中或左对齐（文本左对齐，数字、状态右对齐），内容过长时显示省略号（hover时显示完整内容）；适用于展示BLE设备列表，包含设备ID、设备名称、连接状态、信号强度、最后同步时间等信息。可编辑表格：用于可修改数据，编辑状态下单元格显示输入框或下拉菜单，与普通组件样式一致，编辑完成后显示修改后内容，提供“保存”“取消”操作按钮；适用于编辑BLE设备基本信息、配置参数等。分页表格：数据量超过10条时添加分页控件，分页控件位于表格底部居中位置，包含页码、每页条数选择、上一页/下一页按钮，每页条数默认10条，可选择20条、50条、100条；适用于大量BLE设备的列表展示。表格操作：表格右侧添加操作列，包含“编辑”“删除”“查看”等操作按钮，采用文本按钮或小型次要按钮，操作按钮间距8px，避免操作区域拥挤；BLE设备表格操作列需包含“连接”“断开”“同步”“配置”等专属操作按钮。6.1.5弹窗弹窗用于展示临时信息、确认操作、表单填写等场景，分为确认弹窗、表单弹窗、提示弹窗，具体要求如下：样式：弹窗背景色为白色，圆角半径8px，有阴影（模糊度12px），弹窗宽度根据内容自适应（最小宽度300px，最大宽度600px），居中显示在页面中，背景添加半透明遮罩（透明度50%，颜色#000000）。确认弹窗：用于高危操作确认（如删除资源），包含标题、提示文本、“确认”“取消”按钮，标题字体加粗，提示文本简洁明确，按钮位于弹窗底部右侧，间距16px；适用于BLE设备“解除绑定”“恢复出厂设置”等高危操作的确认。表单弹窗：用于填写表单信息（如创建资源、修改配置），包含标题、表单内容、“提交”“取消”按钮，表单布局与页面表单一致，标签与输入框对齐，间距均匀；适用于BLE设备配置、绑定等操作，表单需包含设备名称、连接密码、通信参数等字段。提示弹窗：用于展示操作结果（如“操作成功”“操作失败”），包含图标、提示文本，自动关闭（默认3秒），也可手动关闭，图标与提示类型匹配（成功为绿色对勾，失败为红色叉号，提示为蓝色感叹号）；适用于BLE设备连接成功、断开、数据同步完成/失败等状态提示。弹窗关闭：弹窗右上角添加关闭图标（×），点击图标或遮罩可关闭弹窗（表单弹窗、确认弹窗点击遮罩不关闭，避免误操作）。6.2专用组件设计6.2.1导航组件导航组件用于引导用户在不同功能模块间切换，包括顶部导航、左侧导航、面包屑导航，具体要求如下：顶部导航：展示平台核心模块（如资源管理、运维监控、系统设置、BLE设备管理），每个模块为文本按钮，选中状态文字颜色为平台主色调，下划线为平台主色调（高度2px）；BLE设备管理模块需突出显示，若存在设备异常，可添加红色角标提示。左侧导航：展示当前顶部导航模块下的子模块，采用“图标+文字”形式，图标尺寸20px，文字字体大小14px，选中状态背景色为平台主色调（浅色系），文字颜色为平台主色调，子模块可折叠/展开；BLE设备管理子模块包含设备列表、配置管理、状态监控、日志查询等，图标采用蓝牙图标，增强辨识度。面包屑导航：位于中间内容区顶部，展示当前页面的层级路径（如“BLE设备管理→设备列表→设备详情”），路径之间用“/”分隔，点击路径可跳转至对应页面，字体大小12px，颜色为浅灰色，当前页面路径颜色为黑色。6.2.2监控图表组件监控图表用于展示资源性能、运维数据等可视化信息，包括折线图、柱状图、饼图、仪表盘等，具体要求如下：样式：图表容器背景色为白色，边框为浅灰色，圆角半径4px，图表标题位于容器顶部左侧，字体大小16px，加粗，颜色为黑色。折线图/柱状图：用于展示趋势数据（如CPU使用率、内存占用），横轴为时间维度，纵轴为数据维度，坐标轴标签字体大小12px，颜色为浅灰色；折线颜色为平台主色调，柱状图颜色为平台主色调（浅色系），hover时显示数据详情；适用于展示BLE接收设备的信号强度变化、数据传输速率、功耗变化等趋势数据。饼图：用于展示占比数据（如资源分配占比），颜色采用平台辅助色系列，避免颜色过于鲜艳，hover时显示占比详情和具体数值；适用于展示BLE接收设备的类型占比、在线/离线占比等数据。仪表盘：用于展示单一指标的实时状态（如磁盘使用率），指针颜色为平台主色调，仪表盘背景色为浅灰色，数值显示在仪表盘中心，字体大小16px，加粗；适用于展示BLE接收设备的实时信号强度、电池电量（仅电池供电设备）等指标。图表交互：支持时间范围筛选（如近1小时、近24小时、近7天）、数据下载（导出Excel、PNG格式）、刷新等操作，操作按钮位于图表容器右上角，采用小型文本按钮；BLE相关图表需支持按设备ID筛选数据，便于单独查看某一设备的监控数据。6.2.3告警组件告警组件用于展示资源异常、故障等告警信息，包括告警列表、告警提示、告警详情，具体要求如下：告警级别区分：根据告警严重程度分为紧急告警（红色）、重要告警（橙色）、一般告警（黄色）、提示告警（蓝色），颜色统一，便于用户快速识别；BLE设备相关告警级别：紧急告警（设备离线、数据传输失败）、重要告警（信号强度过低、功耗异常）、一般告警（同步延迟）、提示告警（设备固件需升级）。告警列表：展示告警时间、告警级别、告警内容、关联资源、处理状态等信息，紧急告警优先展示，处理状态分为“未处理”“处理中”“已处理”，用不同颜色标签区分；BLE设备告警列表需明确标注关联设备ID、设备名称，便于快速定位故障设备。告警提示：在顶部导航栏通知中心显示未处理告警数量，用红色角标标注，点击可查看告警列表；紧急告警可弹出提示弹窗，提醒用户及时处理；BLE设备紧急告警（如设备离线）需优先弹出提示弹窗。告警详情：点击告警列表项可查看告警详情，包含告警描述、告警原因、处理建议、关联日志等信息，提供“标记已处理”“忽略告警”等操作按钮；BLE设备告警详情需包含设备当前状态、信号强度、最近一次同步时间等信息，处理建议需针对BLE相关故障（如“检查设备电源、蓝牙信号”）。6.2.4BLE专用组件设计BLE专用组件用于展示BLE接收设备的连接状态、数据交互信息及专属操作，需与平台整体风格保持一致，具体要求如下：BLE连接状态指示器：采用圆形图标，尺寸24px，位于设备列表、设备详情页面的核心位置，颜色区分状态：绿色（已连接）、红色（未连接）、黄色（连接中）、蓝色（数据同步中）；hover时显示状态详情（如“已连接，信号强度：-65dBm”）。信号强度指示器：采用线性进度条或仪表盘形式，进度条宽度120px，高度8px，仪表盘尺寸80px；信号强度范围为-100dBm（弱）至-30dBm（强），进度条/仪表盘颜色从红色（弱）渐变至绿色（强），实时显示当前信号强度数值。数据同步进度条：用于展示BLE接收设备与管控平台的数据同步进度，宽度自适应，高度8px，背景色为浅灰色，进度条颜色为平台主色调，同步完成后显示绿色对勾图标；同步失败时显示红色叉号，提供“重新同步”按钮。BLE配置面板：用于展示和修改BLE接收设备的通信参数，采用卡片式布局，卡片背景色为白色，边框为浅灰色，圆角半径4px；面板包含参数名称、当前值、修改按钮，参数修改后需弹出确认弹窗，确保操作无误。7交互设计规范7.1操作交互点击交互：按钮、链接、表格行等可点击元素，点击时需有明确反馈（如按钮颜色变化、表格行背景色变化），避免用户不确定是否点击成功；BLE设备操作按钮（如“连接”“同步”）点击后需立即显示加载状态，避免用户重复点击。输入交互：输入框聚焦时自动选中原有内容（便于修改），输入内容实时校验，错误提示及时显示，避免用户输入完成后才提示错误；BLE设备相关输入框（如设备ID、连接密码）需进行格式校验，确保输入内容符合通信要求。滚动交互：页面滚动时，顶部导航栏固定，左侧侧边栏可跟随滚动（折叠状态下固定），中间内容区滚动流畅，无卡顿，滚动条样式统一；BLE设备列表滚动时，状态指示器需始终可见，便于用户快速查看设备状态。拖拽交互：支持拖拽操作的组件（如表格列调整、图表时间轴），拖拽时显示拖拽提示，拖拽完成后有确认反馈，拖拽过程流畅，无卡顿；BLE设备列表支持拖拽排序，便于用户按需求调整设备展示顺序。7.2反馈交互操作反馈：用户完成操作后（如提交表单、删除资源），需显示明确的操作结果提示（如“提交成功”“删除成功”），提示弹窗自动关闭，避免干扰用户后续操作；BLE设备操作反馈需明确（如“BLE设备连接成功”“数据同步失败，请检查设备连接”）。加载反馈：页面加载、数据请求时，显示加载动画（如旋转图标），加载动画位于页面或组件中心，加载完成后自动消失，加载失败时显示失败提示，并提供“重新加载”按钮；BLE设备连接、数据同步时，加载动画需与操作按钮关联，同步显示加载进度。错误反馈：操作失败、数据异常时，显示错误提示，提示内容需明确（如“网络异常，请检查网络连接”“资源不存在，无法删除”），并提供解决方案（如重新操作、联系运维）；BLE设备相关错误反馈需针对性提供解决方案（如“设备连接失败，请检查设备电源和蓝牙开关”“信号强度过低，请调整设备位置”）。7.3流程交互核心流程：资源创建、故障处理、权限修改等核心操作流程，步骤清晰，每一步操作有明确指引，步骤切换时有过渡动画，避免流程跳转突兀；BLE设备核心流程（连接→配置→数据同步→状态监控）需简化，步骤不超过3步，每一步提供明确指引。回退流程：支持操作回退（如表单填写一半返回上一页，保留已填写内容），避免用户误操作导致数据丢失，回退时需提示用户（如“是否放弃已填写内容？”）；BLE设备配置过程中，回退时需保留已配置参数，避免重复操作。批量操作流程：支持批量选择资源进行操作（如批量删除、批量重启），批量选择后显示选中数量，操作时需确认，操作完成后显示批量操作结果；支持批量连接、批量同步BLE设备，批量操作时需显示整体进度，操作完成后提示成功/失败数量。8视觉设计规范8.1色彩规范管控平台界面色彩以简洁、专业、沉稳为原则，色彩体系分为主色调、辅助色调、中性色调，具体要求如下：主色调：采用蓝色系（建议#1890FF），用于按钮、选中状态、核心标识等，体现专业、可靠的气质，主色调在界面中占比不超过20%，避免过度使用；BLE相关组件（如连接按钮、信号强度指示器）优先使用主色调，增强辨识度。辅助色调：用于区分不同状态、层级和功能，包括绿色（#52C41A，成功状态）、红色（#FF4D4F，错误/紧急状态）、橙色（#FAAD14，警告状态）、蓝色（#1890FF，提示状态），辅助色调仅用于提示、标识等场景，不用于大面积展示；BLE设备状态颜色遵循此规范，已连接（绿色）、未连接（红色）、连接中（黄色）、同步中（蓝色）。中性色调：用于背景、文本、边框等，包括白色（#FFFFFF，页面背景）、浅灰色（#F5F7FA，模块背景）、中灰色（#E5E6EB，边框）、深灰色（#C9CDD4，次要文本）、黑色（#1D2129，主要文本），中性色调占界面色彩的80%以上，确保界面简洁清爽；BLE配置面板、设备列表等模块背景采用中性色调，突出核心内容。色彩对比度：文本与背景的色彩对比度不低于4.5:1，确保文本清晰可见；特殊文本（如提示文本）对比度不低于3:1，符合无障碍设计要求；BLE设备状态文本（如“已连接”“信号强度弱”）需与背景保持足够对比度，确保清晰可见。8.2字体规范界面字体采用无衬线字体（优先使用微软雅黑、思源黑体），字体大小、粗细统一，确保文本清晰易读，具体要求如下：字体大小：页面标题（如一级标题）18px，模块标题（如二级标题）16px，正文文本14px，辅助文本（如提示、备注）12px，避免使用过小或过大的字体；BLE设备状态文本、信号强度数值等辅助文本采用12px，设备名称、ID等正文文本采用14px。字体粗细：标题字体加粗（600-700），正文文本常规（400），强调文本（如选中状态、关键数据）加粗（600），避免过度加粗导致视觉杂乱；BLE设备关键信息（如信号强度、同步进度）采用加粗字体，突出显示。文本对齐：页面标题、模块标题居中或左对齐，正文文本左对齐，数字、状态文本右对齐，表格文本对齐统一，确保布局整齐；BLE设备列表中，设备ID、信号强度等数字文本右对齐，设备名称、状态等文本左对齐。文本溢出：长文本无法完整显示时，显示省略号（…），hover时显示完整文本，避免文本溢出影响界面美观；BLE设备名称、ID等长文本需处理溢出，确保界面整洁。8.3图标规范界面图标用于辅助表达功能、提升操作便捷性，图标样式统一、简洁，具体要求如下：图标风格：采用线性图标（线条粗细2px），风格统一，避免混合使用线性、面性图标，图标颜色与所在场景匹配（如操作图标用主色调，提示图标用辅助色调）；BLE相关图标（蓝牙图标、信号图标、同步图标）采用线性风格，与平台整体图标保持一致。图标尺寸：导航图标20px，按钮图标16px，提示图标14px，尺寸统一，避免大小不一导致视觉杂乱；BLE连接状态指示器图标24px，信号强度图标16px，同步图标16px，确保尺寸协调。图标含义：图标含义需直观，与对应功能一致（如搜索图标用放大镜，删除图标用叉号），避免使用歧义图标，新用户可快速理解图标含义；BLE相关图标：蓝牙图标（代表BLE设备）、信号图标（代表信号强度）、同步图标（代表数据同步）、离线图标（代表设备未连接）。图标交互：可点击图标hover时颜色变为主色调，点击时颜色加深，提供明确的交互反馈；BLE设备操作图标（如连接、同步）需遵循此交互规范，增强操作体验。9适配与兼容性要求9.1终端适配管控平台界面需适配主流桌面终端和平板终端，具体要求如下：桌面终端：适配Windows、macOS系统，支持Chrome、Firefox、Edge、Safari等主流浏览器（最新版本及前两个版本），界面布局、组件样式无错乱，功能正常；BLE相关功能（如设备连接、数据同步）需在各浏览器中正常运行，无兼容性问题。平板终端：适配iPad、安卓平板（屏幕尺寸7-12英寸），支持横屏显示，界面响应式调整，核心功能可正常操作，无内容溢出、布局错乱；BLE相关核心组件（状态指示器、操作按钮）需优先适配，确保平板端操作便捷。9.2浏览器兼容性界面在不同浏览器中需保持一致的显示效果和交互体验，具体要求如下：样式兼容性：CSS样式在不同浏览器中显示一致，避免出现边框错位、颜色偏差、间距异常等问题，优先使用标准CSS属性，避免使用浏览器私有属性；BLE专用组件样式需在各浏览器中保持一致，无显示错乱。功能兼容性：交互功能（如点击、输入、滚动、弹窗）在不同浏览器中正常运行，无卡顿、无失效，加载速度一致（页面加载时间≤3秒）；BLE设备连接、数据同步等功能需在各浏览器中正常响应，无延迟、无失效。兼容性测试：每轮界面开发完成后，需在主流浏览器中进行兼容性测试，记录并修复兼容性问题，确保界面在所有支持的浏览器中正常使用；BLE相关功能需单独进行兼容性测试，确保跨浏览器适配。9.3BLE技术适配要求BLE接收设备与管控平台的适配需满足以下要求，确保通信稳定、数据交互顺畅：协议适配：支持蓝牙核心规范5.0及以上版本，优先适配5.3版本，确保低功耗、高传输稳定性；管控平台与BLE接收设备需采用统一的通信协议（如GATT协议），确保数据交互兼容。设备适配：支持多型号BLE接收设备适配，预留设备驱动接口，可通过配置参数适配不同厂商、不同型号的BLE设备；管控平台需支持设备自动识别，减少手动配置操作。环境适配：BLE通信需适应不同部署环境，在室内、室外常规环境下，通信距离不低于10米，信号强度稳定（≥-80dBm）；在复杂电磁环境下，需具备抗干扰能力，确保数据传输不丢失。功耗适配：BLE接收设备需满足低功耗要求，电池供电设备（如便携式采集终端）待机时间不低于72小时，工作状态下功耗不超过50mA；管控平台需支持功耗监控，及时提醒用户设备电量异常。10安全设计规范10.1权限控制界面设计权限分级展示：根据用户角色（管理员、运维人员、普通用户）分级展示功能模块和操作权限，未授权的模块和操作需隐藏，避免用户看到无关内容或进行越权操作；BLE设备管理权限分为三级：管理员（全权限，可配置、删除设备）、运维人员（可查看、连接、同步设备）、普通用户（仅可查看设备状态）。权限申请界面：用户申请权限时，需填写申请理由、权限范围等信息，表单设计简洁明确，提交后显示申请进度，管理员审批后及时通知用户；BLE设备管理权限申请需明确申请设备范围、操作权限类型。权限日志界面：展示用户权限变更记录（如权限授予、权限收回），包括操作人、操作时间、权限变更内容等信息，便于审计和追溯；BLE设备相关权限变更需单独记录，明确变更设备、变更权限类型。10.2敏感操作与数据保护敏感操作确认：高危操作（如删除资源、修改权限、注销账号）需增加确认环节，弹出确认弹窗，明确提示操作风险，用户确认后才可执行操作；BLE设备相关高危操作（如解除绑定、恢复出厂设置、修改通信密码）需增加双重确认，避免误操作。敏感数据保护：密码、密钥、IP地址等敏感数据，输入时显示为星号（*），查看时需验证权限，避免敏感数据泄露；数据传输过程中需加密，界面显示时需进行脱敏处理（如隐藏部分字符）；BLE设备的通信密码、设备密钥等敏感数据需加密存储和传输，采用AES-128加密算法，防止数据泄露。操作日志记录：所有敏感操作（如登录、权限修改、资源删除）需记录操作日志，包括操作人、操作时间、操作内容、操作IP等信息，日志不可篡改，便于故障排查和安全审计；BLE设备的连接、断开、配置修改、数据同步等操作需详细记录日志，包含设备ID、操作内容、操作结果、操作时间等信息。10.4BLE通信安全设计BLE接收设备与管控平台的通信安全需额外遵循以下规范，防止非法接入、数据泄露和篡改：身份认证：BLE接收设备与管控平台建立连接时，需进行双向身份认证，采用设备ID+密钥的认证方式，未通过认证的设备无法建立连接，防止非法设备