LibreX

积木式后台管理系统框架。声明式页面配置，自动状态推导，编译期路由生成。

npm create librex@latest

设计理念

| 概念 | 说明 | |------|------| | Brick | 积木。可复用的页面模块 — 表格、表单、搜索、导航等，框架内置 9 个 | | Tier | 行为层级。display / tool / content / ephemeral — 决定积木在状态变化时的显隐节奏 | | State | 页面状态。idle → browsing → filtering → reviewing → editing → batchMode | | definePageConfig | 唯一的页面入口。声明 bricks + setup 数据，无需手写路由或布局 |

核心哲学：开发者只管"声明积木 + 注入数据"，框架自动处理布局、状态编排、路由注册。

5分钟上手

# 1. 创建项目
npm create librex@latest my-admin
cd my-admin

# 2. 启动
npm run dev

# 3. 创建第一个页面
npm run create
# → 按提示选择 table 类型
# → 路由自动注册，刷新即可见

最小页面

// src/pages/user-management/pageConfig.ts
import { definePageConfig, useContext, useConfirm } from 'librex'

export default definePageConfig({
  title: '用户管理',
  path: '/user-management',
  icon: 'users',
  builtinBricks: ['LDataTable'],
  overlayBrick: 'LForm',

  setup({ setTableData, setTableColumns }) {
    setTableColumns([
      { key: 'id', label: 'ID' },
      { key: 'name', label: '姓名' },
    ])

    setTableData([
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
    ])
  },
})

包内容

| 路径 | 用途 | |------|------| | src/librex/ | 框架核心 — 引擎、积木、类型、Shell | | vite-plugin-librex.ts | Vite 插件 — 编译期扫描 pages/ 自动生成路由 | | create-librex/ | 项目脚手架 — npm create librex@latest | | scripts/create-page.mjs | 页面生成器 — npm run create |

依赖

| 包 | 版本 | 用途 | |---|------|------| | vue | ^3.5 | 运行时 | | pinia | ^3.0 | 状态管理 | | vue-router | ^5.0 | 路由 | | exceljs | ^4.4 | Excel 导入导出 | | docx | ^9.7 | Word 导出 | | @lucide/vue | ^1.17 | 图标 |

文档

| 文档 | 内容 | |------|------| | definePageConfig | 页面配置 API — 完整参数、类型、示例 | | 内置积木 | 9 个 Built-in Bricks 属性/行为详解 | | 自定义积木 | 编写 Vue 组件、声明式注册 | | Store 参考 | useContext / useEngine / useConfirm / useConfig | | Composable 参考 | usePageShell / useActions / useForm / useSignal | | 组件参考 | LInput / LSelect / LUpload / LChart 全部 Props | | 类型定义 | 全部 TypeScript 类型/接口 | | 认证鉴权 | 登录/登出/权限/HTTP 客户端/Auth Guard | | 主题定制 | Shell 壳层定制、CSS 变量、图标系统 | | Vite 插件 | vite-plugin-librex 配置与行为 | | 项目脚手架 | npm create librex@latest 使用说明 | | 架构设计 | Tier → State → DisplayMode 推导系统 | | 文档索引 | 全部文档导航 |