4.5 KiB
ADDED Requirements
Requirement: Three-breakpoint responsive system
The admin frontend SHALL adapt its layout to three device tiers: mobile (< 768px), tablet (768-1024px), and desktop (> 1024px). All pages and components MUST render without text overflow, forced line wrapping, or content clipping at any breakpoint.
Scenario: Mobile layout (< 768px)
- WHEN viewport width is less than 768px
- THEN sidebar is replaced by a Drawer triggered via hamburger button
- AND content area padding reduces to 12px
- AND tables scroll horizontally with touch gesture
- AND dashboard stat cards display in 2-column grid
Scenario: Tablet layout (768-1024px)
- WHEN viewport width is between 768px and 1024px
- THEN sidebar defaults to collapsed state
- AND content area padding is 16px
- AND dashboard stat cards display in 2-column grid
- AND chart cards display side-by-side
Scenario: Desktop layout (> 1024px)
- WHEN viewport width is greater than 1024px
- THEN sidebar is fully visible and collapsible
- AND content area padding is 24px
- AND dashboard stat cards display in 4-column grid
- AND chart cards display side-by-side
Requirement: Table horizontal scroll on narrow screens
All <Table> components SHALL support horizontal scrolling when content exceeds viewport width. The scroll behavior MUST be enabled via scroll={{ x }} prop, and all table columns MUST remain visible (no responsive column hiding).
Scenario: Wide table on mobile
- WHEN a table has more columns than fit within the viewport width
- THEN the table container renders a horizontal scrollbar
- AND users can scroll horizontally to view all columns
- AND action column (if present) remains accessible without scrolling via fixed position
Requirement: Login page responsiveness
The login page card SHALL not overflow the viewport on any screen size. On mobile devices, the card MUST fit within the screen with comfortable margins.
Scenario: Login on small mobile screen (320px)
- WHEN viewport width is 320px
- THEN login card width does not exceed
calc(100vw - 32px) - AND the login form remains fully visible and usable
Requirement: Dashboard responsive grid
Dashboard stat cards and chart cards SHALL use antd responsive Col breakpoints (xs/sm/md) instead of fixed span values. Charts SHALL re-render to fit container width on window resize.
Scenario: Dashboard on tablet
- WHEN viewing dashboard on a 800px wide tablet
- THEN stat cards render 2 per row
- AND pie chart and bar chart render side by side
- AND gantt chart fits within the content area width
Requirement: Modal responsiveness
All Modal dialogs SHALL have a max-width constraint preventing overflow beyond the viewport on small screens.
Scenario: Modal on mobile
- WHEN a modal is opened on a viewport < 768px wide
- THEN the modal width does not exceed
calc(100vw - 24px) - AND the modal body has a max-height of 60vh with vertical scroll
- AND modal mask covers the full viewport
Requirement: Page toolbar responsive wrapping
All page-level toolbars with search/filter/action controls SHALL wrap gracefully on narrow screens using flexWrap and gap spacing, preventing button group clipping or overlap.
Scenario: Toolbar with search and action buttons on tablet
- WHEN a page toolbar contains a search input group and action button group
- AND viewport width is 800px
- THEN toolbar items wrap to multiple lines without overflow
- AND all buttons remain clickable with adequate spacing
Requirement: Student fields separation
The Students page SHALL display "学号" (student ID) and "身份证" (ID card number) as two separate table columns instead of a single combined column. Both columns SHALL support ellipsis truncation for long values.
Scenario: Student table column display
- WHEN viewing the student list
- THEN the table includes a "学号" column and a "身份证" column as separate headers
- AND long ID numbers are truncated with ellipsis and tooltip on hover
Requirement: Classroom schedule table scrolling
The classroom schedule grid table SHALL support horizontal scrolling with a sticky first column (classroom name) to aid navigation when viewing beyond the visible date range.
Scenario: Schedule table on month with 31 days
- WHEN viewing a month schedule on a tablet (800px)
- THEN the classroom name column remains fixed on the left
- AND date columns scroll horizontally
- AND no text overflows or wraps within date cells