XPUI 框架介绍
什么是 XPUI？
XPUI 是 XPCMS 自研的前端 UI 框架，专为后台管理界面和内容管理场景设计。它提供了一套完整、统一、美观的 UI 组件体系，覆盖布局、表单、表格、弹窗、导航、上传等常用组件，帮助开发者快速构建高质量的管理后台界面。
设计理念
1. 统一规范
XPUI 框架遵循严格的命名规范，所有 CSS class 和 ID 统一以 xp- 为前缀，使用短横线连接符（如 xp-form-group、xp-table-header），确保代码风格统一，便于团队协作和维护。
2. 与 Tailwind CSS 协同
XPUI 与 Tailwind CSS 协同工作，通用样式封装进 XPUI 核心，业务样式使用 Tailwind 的原子化 class 开发。这种组合既保证了组件的开箱即用，又保持了样式的灵活性。
3. 零第三方依赖
XPUI 是 XPCMS 系统中唯一使用的 UI 框架，不引入任何第三方 UI 库（如 Element UI、Ant Design 等），确保代码轻量、性能高效、无兼容性问题。
核心组件
CSS 组件库
- 布局系统： xp-layout、xp-sidebar、xp-main 等响应式布局组件
- 按钮组件： xp-btn、xp-btn-primary、xp-btn-sm 等多种尺寸和颜色变体
- 卡片组件： xp-card、xp-card-header、xp-card-body 等结构化容器
- 导航组件： xp-nav、xp-nav-item、xp-tabs 等导航和选项卡
- 表单组件： xp-form-group、xp-input、xp-select、xp-textarea 等统一表单项
- 表格组件： xp-table、xp-table-striped 等数据表格样式
- 标签组件： xp-tag、xp-badge 等状态标签和徽章
- 弹窗组件： xp-modal、xp-modal-header、xp-modal-body 等模态框
- 上传组件： xp-upload、xp-image-placeholder 等上传区域样式
- 辅助类： 间距、文字、背景、边框等通用工具类
JavaScript 组件库
- XpCore： 核心工具类，提供公共方法和配置
- XpToast： 消息提示组件，支持成功/错误/警告/信息四种类型
- XpModal： 弹窗管理组件，支持自定义标题、内容、按钮和回调
- XpForm： 表单提交组件，支持 AJAX 提交、文件上传、验证和回调处理
- XpTable： 数据表格组件，支持排序、搜索、分页、导出等功能
- XpUpload： 文件上传组件，支持图片预览、进度条、拖拽上传
- XpDropdown： 下拉菜单组件
- XpTabs： 选项卡切换组件
- XpCodePreview： 代码预览高亮组件
- XpColorPicker： 颜色选择器组件
- 图标选择器： 内置图标库选择器
命名规范
XPUI 所有 class 和 id 遵循以下强制规则：
- 统一以
xp-为前缀 - 连接符仅使用短横线
- - 全小写字母，禁止驼峰、下划线、拼音
- 语义化命名，如
xp-header、xp-form-group、xp-table
使用方式
在 XPCMS 项目中，XPUI 通过官方统一路径引入：
<link rel="stylesheet" href="/static/xpui/css/xpui.css">
<script src="/static/xpui/js/xp-core.js"></script>业务级 CSS 写入独立文件，放置在 public/static/{应用名}/css/ 目录下，JS 文件放置在 public/static/{应用名}/js/ 目录下。
适用场景
XPUI 专为后台管理界面设计，提供了完整的列表页、表单页、弹窗等管理后台常用场景的组件化解决方案，也可以在前台页面中使用其基础组件，确保全站视觉风格统一。