fantastic-admin Documentation
repository·main·Indexed 25 days ago
https://github.com/fantastic-admin/basicAn AI-friendly administration system framework built on a modern Vue 3 stack. Version 6.3.0 features a highly extensible architecture with support for multiple UI libraries, theme options, and navigation patterns. The documentation includes a comprehensive component library featuring FaAlert, FaAvatar, FaBadge, FaButton, FaButtonGroup, FaCard, FaCheckbox, and FaCheckboxGroup.
What's inside fantastic-admin
- Fantastic-admin is an AI-oriented admin system framework designed with a modern engineering foundation. It provides a highly flexible and extensible base for building administrative interfaces, featuring built-in 'Skills' to facilitate AI-friendly development. It supports multiple UI libraries, various navigation modes, and fine-grained page management.
Explore the Fantastic-admin ecosystem
mainFantastic-admin is part of a larger ecosystem of tools:
- Fantastic-startkit: A simple and easy-to-use Vue3 project startup kit.
- Fantastic-mobile: Provides a solid engineering foundation for H5 (mobile web) projects.
- One-step Console: A tool for orchestrating workflows, similar to a broadcast director.
Use FaPagination component
mainTheFaPaginationcomponent is a complete pagination solution that supports displaying total item counts, selecting items per page, page number jumping, and custom layouts. It is suitable for data lists, tables, search results, and article/comment lists.Use FaFileUpload for file uploads
mainTheFaFileUploadcomponent supports drag-and-drop, clicking, pasting, and folder uploads. It includes progress indicators and file management features. It is suitable for attachment uploads, batch uploads, and document management.Use FaTextarea for multi-line text input
mainFaTextareais a multi-line text input component that supports prefix/suffix slots and custom styling. It is suitable for article editors, comment boxes, feedback forms, and code/text displays.Use FaInput for basic input functionality
mainTheFaInputcomponent is a basic input component that supports password visibility toggling, a clear button, and prefix/suffix slots. It is suitable for form fields, search boxes, password inputs, and inputs with units or prefixes (e.g., '+86').Use FaDescriptions for read-only data display
mainUse theFaDescriptionscomponent to display structured, read-only information such as user details, order summaries, or product specifications. It supports both horizontal and vertical layouts, borders, column spanning, and custom slots for specific items.Use FaImageUpload for image uploading
mainTheFaImageUploadcomponent is a specialized component for image uploading. It supports features such as image preview, reordering, paste-to-upload, custom upload requests, and folder uploading.Use FaPopover for flexible popover containers
mainUse theFaPopovercomponent to create flexible popover containers that support custom content and various positioning options. Common use cases include advanced filter panels, quick action panels, information detail cards, and simple form popups.Understand the Theme CSS Variable Structure
mainThe theme is composed of two distinct categories of CSS variables:
- shadcn Standard Tokens: General design system variables used to control component colors.
- Framework-specific Tokens (
--g-*): Variables used to control the colors of specific layout regions (header, sidebar, tabbar, etc.).
Use the FaTable component
mainThe
FaTablecomponent is a data table wrapper built on top of TanStack Table. It supports basic data display, tree-structured data, toolbars, column visibility controls, sorting, borders, zebra stripes, fixed columns, fixed height, single/multiple selection, and slot-based customization.Common Use Cases:
- Standard data list display.
- Tree-level data display via
childrenorgetSubRows. - Single or multiple selection tables.
- Complex layouts with fixed columns or fixed heights.
- Tables requiring external handling of sorting states.
- Customizing toolbars (e.g., adding 'Add', 'Refresh', or 'Batch Actions').
- Customizing cells, headers, footers, and empty states via slots.
Use FaPageMain for page content containers
mainThe
FaPageMaincomponent serves as a container for the main content area of a page. It supports a title area and a collapsible content region. Common use cases include:- Form content containers
- Detail information displays
- Data list containers
- Collapsible information blocks
- Page section containers