XPUI 框架

XPUI 是 XPCMS 自研的前端组件库，聚合发布于 public/static/xpui/，覆盖通用 UI 场景。

CSS 模块

聚合入口：/static/xpui/css/xp-all.css，包含：

• xp-base：基础变量、字体、颜色、间距
• xp-layout：容器、网格、Flex、Section
• xp-general：通用排版、按钮、徽章、卡片
• xp-form：表单元素样式
• xp-table：表格
• xp-panel：面板、抽屉
• xp-nav：导航栏、面包屑、下拉
• xp-interactive：模态、Toast、Tooltip
• ... 共 11 个模块

JS 插件

聚合入口：/static/xpui/js/xp-all.js，包含 22 个插件：

• xp-core：核心工具（DOM 选择、事件、XHR）
• xp-toast：消息提示
• xp-modal：模态对话框
• xp-form：表单校验与序列化
• xp-pagination：分页
• xp-table：可排序 / 筛选表格
• xp-tabs：选项卡
• xp-dropdown：下拉菜单
• xp-upload：上传
• xp-tree：树形控件
• xp-tree-table：树表格
• xp-carousel：轮播
• xp-infinite-scroll：无限滚动
• xp-code-preview：代码预览
• xp-datepicker：日期选择
• xp-color-picker：颜色选择
• xp-transfer：穿梭框
• xp-slider：滑块
• xp-rate：评分
• xp-template：模板引擎
• xp-utils：工具方法

使用示例

<link rel="stylesheet" href="/static/xpui/css/xp-all.css">
<script src="/static/xpui/js/xp-all.js" defer></script>

<button class="xp-btn xp-btn-primary">主按钮</button>
<div class="xp-card">...</div>

Toast 提示

XPToast.show('保存成功', 'success');
XPToast.show('网络错误', 'error');

模态对话框

XPModal.open({
    title: '确认删除',
    content: '该操作不可恢复，确认继续吗？',
    onConfirm: function() { /* ... */ }
});

XPUI 严禁与第三方 UI 库（Bootstrap / Element / Ant Design 等）混用，所有交互元素统一用 XPUI。