统一设计交互标准模板，适配EPC管理系统，包含完整的React + Ant Design（JavaScript）项目模板和交互规范。
gld ue template. 用于 EPC 管理系统的统一设计和交互标准模板. 此 SKILL 提供了完整的 React + Ant Design( Jav
功能概述
gld ue template. 用于 EPC 管理系统的统一设计和交互标准模板. 此 SKILL 提供了完整的 React + Ant Design( Jav是一项面向实际任务的技能。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
gld_ue_template
EPC 管理系统统一设计与交互标准模板。 本 SKILL 提供一套完整的 React + Ant Design（JavaScript）项目模板及交互规范文档。
1. 设计系统规范
1.1 色彩系统
主色
- 主蓝色：
#3c83f8（品牌色，用于激活态、主按钮） - 悬停蓝色：
#5995f9 - 点击/激活蓝色：
#2b6bd9 - 浅蓝：
#ecf3ff（用于激活项背景）
功能色
- 成功绿色：
#46bc46（成功状态、正向指标） - 警告橙色：
#f7c03e（警告状态、中等风险） - 危险红色：
#ef5f59（错误状态、高风险、负向指标） - 紫色：
#a855f7（分类标识、特殊项）
中性色
- 页面背景：
#E9F2FB - 容器表面（卡片/面板）：
#ffffff - 浅灰表面：
#fafafa - 线条/边框：
#dfdfdf - 浅灰线条：
#e5e5e5 - 正文文字：
#262626 - 次要文字：
#595959 - 弱化文字：
#8c8c8c
1.2 字体排版系统
字体族
"PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
字号与字重
- 基础字号：
14px（常规 400） - 页面标题：
24px（粗体 700） - 章节标题：
16px（中等 450/500） - 指标数值：
34px（中等 450/500） - 小号文字/元信息：
12px（常规 400）
行高
- 紧凑：
1.2 - 常规：
1.5 - 宽松：
1.8
1.3 间距与布局系统
间距刻度
- xs：
4px - sm：
8px - md：
16px - lg：
24px - xl：
32px - 2xl：
48px
圆角半径
- sm：
2px - md：
4px - lg：
8px - 卡片/面板：
12px或14px - 标签/徽章：
16px或50%
阴影
- sm：
0 1px 2px rgba(0, 0, 0, 0.05) - md：
0 4px 6px rgba(0, 0, 0, 0.1) - lg：
0 10px 15px rgba(0, 0, 0, 0.15) - 悬停：
0 8px 25px rgba(0, 0, 0, 0.2)
2. 导航系统规范
2.1 全局导航（顶部页眉）
- 代表一级菜单。
- 默认首项为“首页”。
- 页眉高度：
54px，圆角30px，背景为渐变色：linear-gradient(90deg, #ffffff 0%, #eef5ff 76%, #dcecff 100%)。
2.2 次级导航（左侧边栏）
- “首页”页面不包含左侧次级边栏菜单，内容区域占满全宽。
- 其余所有一级菜单均配备二级或三级嵌套的左侧边栏菜单。
- 边栏中的父级条目仅为导航分组（仅支持展开/收起，不可跳转）。
- 仅最末级导航项对应实际页面路由。
- 激活态样式：背景色
#fff3e6，文字色#f0932b，字重450。
2.3 面包屑导航
- 组件位置：位于
src/components/Breadcrumb.jsx。 - 功能逻辑：通过解析当前路由路径自动生成面包屑。
- 映射机制：使用
breadcrumbMap对象将 URL 片段映射为显示名称。 - 样式规范：
- 容器（
.crumb-row）：Flex 布局，项间距6px，底部内边距10px。 - 导航项（
.breadcrumb）：文字采用text-faint色；悬停时变为品牌主蓝色。 - 当前页：添加
current类，文字色为text-main，字重600，且不作为可点击链接。 - 分隔符：各导航项之间显示
/字符。
- 容器（
- 集成方式：默认已集成至
SidebarLayout中。
3. 组件规范
3.1 按钮
- 主按钮：背景色
#3c83f8，文字色#fff，圆角4px，高度32px。 - 幽灵按钮：背景色
#fff，文字色#595959，边框色#dfdfdf，高度32px；悬停时边框色变为#5995f9，文字色同步变为#5995f9。
3.2 标签与徽章
- 蓝色标签：文字色
#3c83f8，背景色#ecf3ff。 - 橙色标签：文字色
#f7c03e，背景色#fff9f2。 - 绿色标签：文字色
#46bc46，背景色#f7fff2。 - 红色标签：文字色
#ef5f59，背景色#fff2f4。 - 灰色标签：文字色
#8c8c8c，背景色#f2f2f2。
3.3 指标卡片
- 白色背景，圆角
12px，边框为1px实线，色值#e5e5e5。 - 头部含标签文字与图标图块（尺寸
32x32px，圆角10px）。 - 大号数值文字（字号
34px，颜色为#0f348c或对应状态色）。 - 底部为弱化描述文字。
3.4 表格
- 表头：背景色
#f6faff，文字色#595959，字重600，下边框色#e5e5e5。 - 表格主体：文字色
#595959，下边框色#e5e5e5；悬停背景色#ecf3ff。 - 分类行：背景色
#f3f7ff，字重450，左侧边框以分类色标识。
3.5 对话框（Modal）
- 遮罩层：
rgba(0,0,0,0.45)。 - 内容区：背景色
#fff，圆角12px，最大宽度800px。 - 头部：标题字号
16px（中等字重），含关闭按钮。 - 动效：使用
modalIn 0.2s ease-out（缩放从 0.95 至 1，透明度从 0 至 1）。
4. 如何使用本模板
当用户请求基于该规范新建或修改前端项目时，请按以下步骤操作：
- 初始化项目：将
template目录下的全部内容复制到目标项目文件夹中。 - 安装依赖：运行
npm install（支持 React 18、Ant Design 5.x、React Router v6、Chart.js）。 - 遵循导航规则：确保“首页”无侧边栏，其余模块严格采用嵌套式侧边栏结构。
- 复用已有组件：优先使用模板中预置的布局与 UI 组件，以保障 100% 的设计一致性。
- 不使用 TypeScript：所有代码须以 JavaScript 编写（文件扩展名为
.js/.jsx）。
5. 模板目录结构
template 目录包含一个完整的 React 应用：
src/App.jsx：路由配置入口。src/layouts/：全局布局组件（GlobalLayout）、带侧边栏布局（SidebarLayout）。src/pages/：首页（Home）、列表管理（ListManagement，示例页面）。src/components/：可复用 UI 组件（如MetricCard、Tag等）。src/styles/：全局 CSS 变量定义与样式覆盖。
热门AI工具
相关专题
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法，覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查，帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件，讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置，便于团队统一检查标准。
0
2026.10.22
本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查，覆盖本地环境、Docker及多平台用法，帮助Go开发者快速上手。
0
2026.10.22
PHP2Shell漏洞是什么，哪些PHP版本和运行环境会受到影响，服务器应该如何检测与修复？本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤，以及修复验证、临时缓解和应急响应方案。
0
2026.10.22
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.5万人学习
共6课时 | 54.7万人学习
