Pocket Stack

Appearance

前端特性 ​

本项目基于现代化的前端技术栈构建，旨在提供高性能、高效率且美观的后台管理体验。

技术栈 ​

  • 框架: React 19 - 提供极速的响应能力和严谨的 UI 构建逻辑。
  • UI 组件库: shadcn/ui - 基于 Radix UI 封装的高质量、可高度定制的组件。
  • 样式方案: Tailwind CSS v4 - 采用最新的实用优先样式框架，配合 Maia 风格 协定。
  • 路由: React Router v7 - 强大的路由管理，支持保护路由和动态权限过滤。
  • 图标库: HeroIcons - 现代、轻量的图标资源，适配各种业务场景。
  • 后端交互: PocketBase JS SDK - 极简的后端接口集成方案。

核心功能特性 ​

1. 响应式布局 (Responsive Design) ​

采用主流的侧边栏 + 顶部导航布局。

  • 适配性：完美适配 PC、平板和手机屏幕。
  • 侧边栏：支持一键折叠（Desktop）和抽屉式弹出（Mobile）。
  • 自适应组件：所有 UI 组件（如数据表格、模态框）均包含响应式设计处理。

2. 多重身份认证支持 ​

支持区分“超级管理员”与“普通管理员”的登录模式。

  • 混合登录：在同一页面提供身份切换选项。
  • 状态持久化：深度集成 PocketBase authStore，确保刷新页面不掉线。

3. 细粒度权限控制 ​

  • 路由保护：使用 AdminOnlyRoute 禁止普通用户访问敏感 URL（如用户管理）。
  • 侧边栏过滤：基于用户角色自动显示/隐藏特定的菜单项。
  • UI 降级：可根据权限隐藏或禁用特定的操作按钮（如删除、导出）。

4. 模块化架构 (Modular Architecture) ​

  • 解耦开发：业务模块（如 task, crm）拥有独立的目录结构，包含私有组件、路由配置 (routes.tsx) 和菜单定义 (menu.ts)。
  • 即插即用：通过在主路由和侧边栏组件中导入模块配置，实现新功能的快速集成，降低系统耦合度。
  • 规范统一：遵循统一的模块化开发规范，提升大型项目的协作效率。

5. 极致的视觉体验 (Premium Aesthetics) ​

  • 主题系统：默认使用经典的 Blue 主题，配合 Neutral 基础色。
  • Maia 风格：遵循 shadcn/ui 的 maia 预设，提供更精致的边框、阴影和间距感。
  • 夜间模式：内置 ThemeProvider，完美支持暗色模式切换，视觉过度平滑。
  • 微互动：通过 tw-animate-css 实现流畅的过渡动画。

6. 高效的开发辅助 ​

  • 代码质量：预置 ESLint 和 TypeScript 严格校验。
  • 自动构建：基于 Vite 的极速构建体验。
  • 模块化脚手架：支持通过模块化配置快速扩展业务功能。
  • MCP 集成：支持通过 PocketBase MCP 快速生成后端 Collection 及其对应的 CRUD 前端代码。

设计协定 ​

为了保持 UI 的一致性，项目严格遵守以下约定：

  • 主色调: blue-600 (Maia Theme)。
  • 圆角: radius-large (Default)。
  • 字体: Inter，提供极佳的可读性。