企业安全管理系统 Quasar Material 图标规范文档

企业安全管理系统 Quasar Material 图标规范文档

一、图标使用概述

本文档规范了适用于宁夏地区企业安全管理系统的 Quasar Material 图标集，旨在通过统一的图标语言提升系统界面直观性、操作效率和品牌专业性。所有图标均基于 Quasar 框架内置的 Material Icons 实现，确保跨平台一致性和渲染性能。

二、核心图标分类与应用

2.1 组织架构相关图标

图标名称	代码示例	应用场景
corporate_fare	<q-icon name="corporate_fare" />	企业/组织架构展示、部门管理节点
account_tree	<q-icon name="account_tree" />	组织树形结构、部门层级关系图
groups	<q-icon name="groups" />	团队成员列表、部门人员管理

使用示例：

<!-- 部门管理标题 -->

<div class="text-h6 flex items-center">

<q-icon name="corporate_fare" class="q-mr-sm text-primary" />

部门管理

</div>

2.2 安全管理核心图标

图标名称	代码示例	应用场景
security	<q-icon name="security" />	通用安全标识、安全中心入口
verified_user	<q-icon name="verified_user" />	用户认证状态、权限管理
policy	<q-icon name="policy" />	安全策略配置、合规标准
gavel	<q-icon name="gavel" />	法规遵从、审计合规模块
assignment	<q-icon name="assignment" />	安全审计任务、检查清单
warning	<q-icon name="warning" color="amber" />	风险提示、安全隐患告警

安全状态指示示例：

<q-badge :color="securityLevelColor" :icon="securityLevelIcon">

安全等级: {{ securityLevel }}

</q-badge>

<script>

// 计算安全等级图标

const securityLevelIcon = computed(() => {

if (securityLevel.value >= 4) return 'verified';

if (securityLevel.value >= 2) return 'security';

return 'warning';

});

</script>

2.3 地区与位置相关图标

图标名称	代码示例	应用场景
location_on	<q-icon name="location_on" />	宁夏地区标识、地理位置标记
map	<q-icon name="map" />	区域管理、地理分布视图
public	<q-icon name="public" />	地区范围选择、公共区域标识

2.4 数据管理相关图标

图标名称	代码示例	应用场景
data_object	<q-icon name="data_object" />	数据权限范围、数据分类
storage	<q-icon name="storage" />	数据存储管理、数据库配置
analytics	<q-icon name="analytics" />	安全报告、数据分析仪表盘

2.5 人员管理相关图标

图标名称	代码示例	应用场景
person	<q-icon name="person" />	部门负责人、个人信息
badge	<q-icon name="badge" />	员工证件、身份标识
engineering	<q-icon name="engineering" />	技术人员、安全工程师

2.6 标准操作与状态图标

图标名称	代码示例	应用场景
autorenew	<q-icon name="autorenew" />	刷新数据、生成编码
qr_code	<q-icon name="qr_code" />	部门代码标识、二维码生成
check_circle	<q-icon name="check_circle" color="green" />	激活状态、审核通过
cancel	<q-icon name="cancel" color="red" />	停用状态、操作取消
edit/add/delete	<q-icon name="edit" />	编辑/添加/删除操作按钮

操作按钮示例：

<!-- 生成代码时的加载动画 -->

<q-btn

icon="autorenew"

label="生成编码"

:loading="generatingCode"

@click="generateDepartmentCode"

>

<template v-slot:loading>

<q-spinner-gears size="20px" />

</template>

</q-btn>

三、宁夏特色图标应用

针对宁夏地区企业特点，特别推荐以下行业专属图标应用：

图标名称	行业应用	代码示例
agriculture	农业企业安全管理	<q-icon name="agriculture" color="brown-6" />
energy	能源企业（煤电、新能源）	<q-icon name="energy" color="orange-5" />
water_drop	水资源管理系统	<q-icon name="water_drop" color="blue-4" />

宁夏特色标识示例：

<!-- 宁夏地区特殊政策标识 -->

<div v-if="isNingxiaRegion" class="bg-primary/10 p-3 rounded-lg flex items-center">

<q-icon name="water_drop" color="primary" size="20px" class="q-mr-sm" />

<span class="text-primary">宁夏地区企业享受特殊安全监管政策</span>

</div>

四、企业级图标使用规范

4.1 视觉一致性原则

• 功能匹配：安全相关功能必须使用安全类图标（security/gavel/verified_user）
• 状态统一：激活状态统一使用check_circle（绿色），禁用状态使用cancel（红色）
• 尺寸规范：标题区图标 24px，操作按钮图标 20px，列表项图标 18px
• 加载状态：数据操作时使用图标加载动画

4.2 交互增强实践

<q-btn :loading="saving">

<q-icon name="save" /> 保存

</q-btn>

• 悬停反馈：关键操作图标添加悬停效果

.q-icon.action-icon {

transition: transform 0.2s;

}

.q-icon.action-icon:hover {

transform: scale(1.1);

}

• 权限控制：根据用户权限动态显示操作图标

<q-icon

name="delete"

v-if="hasDeletePermission"

class="text-red-5"

@click="confirmDelete"

/>

4.3 可访问性优化

• 为所有功能性图标添加aria-label

<q-icon name="security" aria-label="安全设置" />

• 高对比度模式适配

<q-icon

name="warning"

:color="$q.dark.isActive ? 'amber-4' : 'amber-7'"

/>

五、图标应用场景速查表

系统模块	推荐主图标	辅助图标
安全概览	security	analytics,warning
用户权限	verified_user	policy,gavel
部门管理	corporate_fare	account_tree,groups
审计日志	assignment	event,gavel
区域配置	location_on	map,public
数据安全	data_object	storage,lock

六、实施建议

1. 图标库维护：建立项目级图标字典，统一管理所有图标使用场景

2. 新人培训：将图标规范纳入前端开发文档，确保团队认知一致

3. 定期审计：通过UI审查确保图标使用符合规范

4. 用户反馈：收集实际使用中的图标辨识度问题，持续优化

通过遵循本规范，宁夏地区企业安全管理系统将实现专业、统一的视觉语言，提升用户操作效率和系统可信度，同时强化地域特色功能的识别度。

注：所有图标均可通过 Quasar 框架直接调用，无需额外引入资源。完整图标列表可参考Quasar Material Icons 文档。