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