StackRivet Admin UI

English | 简体中文

Admin frontend for the AI-native StackRivet Java enterprise app platform.

StackRivet Admin UI is the open-source Community frontend for StackRivet: a Vue 3.5 + TypeScript + Vite admin console that connects to stackrivet-server and ships system management, RBAC-aware routing, audit views, the Asset Service screen, governed code generation, async task operations, a generated ticket demo, bilingual copy and a redesigned Element Plus design system.

Website · Docs · Server · Live Demo · 中文文档

Keep the development speed of Element Plus, but ship an admin product that looks governed, branded and ready for real enterprise work.

Why StackRivet Admin UI

Default admin templates are fast at the start, then expensive to own. StackRivet Admin UI is built for teams that want a code-first Spring Boot + Vue base without the stock template look.

• Redesigned Element Plus: StackRivet tokens override the default blue, radius and shadow language.
• Permission-aware navigation: routes declare meta.permission, UI hides unauthorized entries and the backend still enforces access.
• Real Community screens: users, roles, menus, dictionaries, parameters, departments, posts, assets, audit logs, generator and tasks.
• Governed generation flow: the UI works with the server generator to produce backend, frontend, permissions, OpenAPI and test scaffolding together.
• Bilingual by design: English and Simplified Chinese locale catalogs are kept structurally aligned by tests.
• AI-friendly frontend rules: AGENTS.md, llms.txt and development standards tell AI tools how to edit Vue and SCSS safely.

Quick Start

Start the backend first in the sibling repository:

cd ../stackrivet-server
docker compose up -d mysql redis
mvn install -DskipTests=true
mvn -pl stackrivet-app spring-boot:run

Then start the admin UI:

pnpm install
pnpm dev

Open http://127.0.0.1:5173/.

The dev server proxies /api/* to http://127.0.0.1:8080. Actuator is not proxied because the backend management server runs on the separate loopback-bound port :9090.

Try the design system showcase at http://127.0.0.1:5173/design-system.

What Is Included

Area	Included in Community
Shell	Admin layout, login layout, route guards, sidebar and command palette
System	Users, roles, menus, dictionaries, parameters, departments and posts
Security UX	Permission-aware routes, forbidden page, session handling and API error states
Audit	Operation logs, login logs and exception logs
Asset Service	Asset list and storage-facing workflows backed by stackrivet-server
Generator	Code generator UI for governed module generation
Async Tasks	Task list and task-state operations
Demo	Generated ticket module showing the end-to-end generator output
Design System	Tokens, Element Plus overrides, typography, dense tables and form patterns
i18n	en-US and zh-CN catalogs with Vitest key-alignment coverage

Tech Stack

Layer	Choice
Framework	Vue 3.5
Build	Vite 8
Language	TypeScript 6
UI	Element Plus 2.14 + StackRivet design-system overrides
State	Pinia 3
Routing	Vue Router 5
HTTP	Axios, wrapping the backend R<T> contract
i18n	Vue I18n 11
Quality	vue-tsc, ESLint, Prettier, Vitest, Playwright
Runtime	Node >=24 <27, pnpm >=11

Project Layout

src/
  api/              # axios client and API modules
  assets/           # brand assets and local static assets
  components/       # shared UI components
  composables/      # shared Vue composables
  features/         # task and generated ticket feature modules
  generated/        # code-generator output (gitignored)
  i18n/             # i18n wiring
  layouts/          # AdminLayout and LoginLayout
  locales/          # en-US and zh-CN catalogs
  router/           # routes and permission guards
  stores/           # Pinia stores
  styles/           # tokens, Element Plus overrides, reset, utilities and fonts
  types/            # shared TypeScript types
  views/            # page-level views

Scripts

Command	Purpose
pnpm dev	Vite dev server with HMR
pnpm build	vue-tsc --noEmit and production build
pnpm preview	Preview the production build on :5173
pnpm typecheck	Type-check only
pnpm lint	ESLint flat config, --max-warnings=0
pnpm format	Prettier on source files
pnpm test	Vitest
pnpm e2e	Playwright

Design System Rules

Read these before changing any .vue or .scss file:

• AGENTS.md
• llms.txt
• docs/development-standards.md
• CONTRIBUTING.md

Hard rules in short:

• All Element Plus components inherit StackRivet tokens through src/styles/element-overrides.scss.
• Use src/styles/tokens.scss; do not hard-code colors, spacing, fonts or radii in .vue files.
• Do not leave raw <el-button type="primary"> styled as default Element Plus blue.
• Numeric, count, currency and date columns use tabular numbers.
• Routes declare meta.permission or null.
• User-facing strings use locale keys in both en-US.ts and zh-CN.ts.
• Keep dense operational UI scannable; avoid marketing-style card stacks inside the admin shell.

Development Checks

pnpm typecheck
pnpm lint
pnpm test
pnpm build

For UI changes, also run the app and check the changed route plus /design-system in a browser. Use Playwright for flows that depend on the backend.

Community and Commercial Editions

This repository contains the Apache-2.0 Community admin frontend. Public Community documentation is hosted on the StackRivet website:

• English docs
• 中文文档
• Pricing and edition boundaries

Pro and Enterprise materials are delivered separately to licensed customers. They are not part of this public repository.

License

Apache License 2.0. See LICENSE and NOTICE.