Angular后台

sakai-ng-with-direction — Angular 后台模板

作者 mahdiyazdi83

基于 Angular 21 与 PrimeNG 的 RTL/LTR 后台模板，修正了 Sakai 在阿拉伯语、波斯语等从右到左界面中的布局细节。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

仓库预览 1

查看源码在新标签页打开

作者提供的预览

来自项目仓库的原始界面图片。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

完整的运行时 RTL/LTR 切换，方向状态集中管理

修正侧边栏、菜单缩进、顶栏等 RTL 布局细节

支持 Aura、Lara、Nora 主题预设及深浅色模式

采用 Angular 独立组件架构，集成 Tailwind CSS 4

提供干净的起始仪表盘，无业务模块或模拟数据

基于 MIT 许可的 Sakai 模板，保留原始许可证

模板详细介绍

Sakai RTL Admin 是一个以 Angular 21 和 PrimeNG 为基础的后台管理模板，源自 PrimeTek 的 Sakai 项目，专门针对 RTL（从右到左）界面做了系统性修正。它不只是简单设置 dir="rtl"，而是处理了侧边栏锚定与滑动动画、主内容边距、嵌套菜单缩进、顶栏操作与弹出层、图标与文字间距、移动端导航等细节，确保在阿拉伯语、波斯语、希伯来语、乌尔都语等场景下布局依然正确。

模板保留了 Sakai 的经典体验，并增强了运行时 RTL/LTR 切换能力。方向状态集中在 language.service.ts 中管理，切换时同步更新文档属性、根类名和 rtl.scss 中的覆盖样式。顶栏的方向控件只是布局切换，并非语言选择器，可接入任意本地化方案。主题方面支持 Aura、Lara、Nora 预设，可配置主色和表面色，并提供深色/浅色模式。项目采用 Angular 独立组件架构，集成了 Tailwind CSS 4，附带一个干净的起始仪表盘，不含业务模块或模拟数据。

需要留意的是，该模板的定位是布局起点，而非完整业务解决方案。生产使用前，你需要自行添加功能页面、路由和菜单项，并核实 Angular 21 所需的 Node.js 版本兼容性。README 未提及测试覆盖或无障碍细节，如果项目对 a11y 有硬性要求，建议先核对。

Angular后台

适合你的项目吗？

适用场景

构建面向阿拉伯语、波斯语、希伯来语等 RTL 用户的 Angular 后台
需要同时支持 RTL 和 LTR 的多语言管理界面
在 Sakai 基础上希望避免自行调试方向相关布局问题的开发者

适合人群

熟悉 Angular 和 PrimeNG 的开发者
需要快速搭建 RTL 友好的后台布局的团队
希望基于干净起始代码进行二次开发的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后执行 npm install 和 npm start，访问 http://localhost:4200。
2
生产构建使用 npm run build，输出在 dist/sakai-rtl-admin。
3
添加功能页面时，在 src/app/pages 下创建，并在 app.routes.ts 注册路由，菜单项在 layout/menu/menu.ts 中配置。
4
方向状态可接入 i18n 库，但需自行实现。

查看仓库使用说明