@reglow/design 前端基座

@reglow/design 是基于 Vue 3 + TypeScript + Vite + Tailwind CSS v4 的后台管理基座库。它不是纯组件库，而是完整的后台基座——包含布局、通用页面、状态管理、API 层、路由工厂和应用工厂；UI 组件由企业组件库 @reglow/reui 提供。消费方只需编写业务页面即可启动完整后台。

当前版本：0.8.0，依赖 @reglow/reui ^0.6.4。详见 更新日志。

架构分工

组件统一从 @reglow/reui 导入；基座能力（布局 / Store / API / 类型 / 主题 / 工厂）从 @reglow/design 导入。

技术栈

涵盖内容

• 通用后台页面（17 个业务分组、55 个页面）：登录（4 套模板）、注册、仪表盘、个人中心、系统管理（主题 / 组织架构 / 部门 / 岗位 / 员工 / 用户 / 租户 / 主体 / 成员 / 素材 / 协议 / 通知）、运维管理（菜单 / 角色 / 字典 / 参数 / 设置 / 消息 / 日志）、内容管理（文章 / 照片 / 视频）、智能客服、坐席工作台 / 坐席管理 / 对话记录、智能工坊、数据分析
• 应用工厂 createAdminApp、路由工厂 createAdminRouter
• 布局体系：DashboardLayout，支持 side / grouped / tree / mix-grouped / mix-tree 等布局与侧边栏多级树
• 状态管理：useAuthStore / useAppStore
• API 层：26 个业务模块（含 analytics / aiUsage / studio），统一 Token 自动刷新与 code:0 + success 响应契约
• 主题引擎：oklch 色彩空间、亮 / 暗模式、渐变皮肤与菜单样式配置
• 国际化：zh-CN / en-US / zh-TW

快速开始

npm install @reglow/design

// main.ts — 3 行启动完整后台
import { createAdminApp } from "@reglow/design";
import "@reglow/design/style.css";
import businessRoutes from "./router";

createAdminApp({ extraRoutes: businessRoutes }).mount("#app");

样式接入

@reglow/design/style.css 已包含完整的 Tailwind 产物（主题变量、组件样式、工具类），消费方不跑 Tailwind 时 import 一次即可。

若消费方自身也用 Tailwind（src/assets/main.css 里有 @import "tailwindcss"），必须用 @source 把库产物纳入扫描，否则消费方生成的同名基础工具类会覆盖库组件的响应式变体：

/* src/assets/main.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "@reglow/design/style.css";

@source "../../node_modules/@reglow/design/dist";
/* 业务页面直接引用 @reglow/reui 组件时再加 */
@source "../../node_modules/@reglow/reui/dist";

双模式构建

# SPA 模式 — 独立运行（开发调试）
npm run dev
npm run build

# 库模式 — 打包为 npm 包
npm run build:lib    # 输出 dist/src/index.js + dist/src/reglow-design.css

配套

• 企业组件库 @reglow/reui：71 个后台组件
• 快速模板 reglow-design-starter（前端）与各语言全栈模板
• 后端基础库 reglow-library

源码：gitee.com/reglow-ai/reglow-design