first commit
This commit is contained in:
npc0-hue
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-07-08
|
||||
@@ -0,0 +1,81 @@
|
||||
# Design
|
||||
|
||||
## Overview
|
||||
|
||||
The platform web shell will support two first-party visual families:
|
||||
|
||||
- **黑色机甲**: default theme, dark tactical interface with angular frame lines, scanner glow, cockpit panels, and low-noise energy effects.
|
||||
- **魔法少女**: selectable theme, pink moonlight menu treatment, rounded rail materials, stronger star-frame highlights, ribbons, and visible magic circles.
|
||||
|
||||
Both themes continue to use shared theme variables and shared CSS primitives. Page code should still reuse global shell and surface classes instead of adding page-local decoration.
|
||||
|
||||
## Theme Model
|
||||
|
||||
`theme/tokens.ts` will reduce the palette set to focused first-party palettes:
|
||||
|
||||
- `mecha-black`
|
||||
- `magical-girl`
|
||||
|
||||
The default palette/background will become:
|
||||
|
||||
- `defaultThemePaletteId = "mecha-black"`
|
||||
- `defaultThemeBackgroundId = "mecha-grid"`
|
||||
|
||||
The selectable magical-girl pairing will use:
|
||||
|
||||
- `magical-girl`
|
||||
- `magic-stage`
|
||||
|
||||
Theme variables will include existing shared semantic tokens plus additional material tokens for theme-specific frames:
|
||||
|
||||
- `--frame-corner`
|
||||
- `--frame-accent`
|
||||
- `--menu-item-bg`
|
||||
- `--menu-item-active-bg`
|
||||
- `--menu-glyph-bg`
|
||||
- `--ultimate-effect-alpha`
|
||||
|
||||
CSS selectors using `:root[data-theme-palette="..."]` can specialize shell/card materials while retaining shared class names.
|
||||
|
||||
## Navigation Structure
|
||||
|
||||
The shell menu will use the requested admin-sidebar reference structure:
|
||||
|
||||
- 平台概览
|
||||
- 服务器管理
|
||||
- 插件市场
|
||||
- 用户管理
|
||||
- AI 提供商管理
|
||||
- 系统工具
|
||||
|
||||
Each group renders as a compact first-level sidebar item with:
|
||||
|
||||
- Icon rail affordance.
|
||||
- Bold Chinese label.
|
||||
- A collapsed icon-only state.
|
||||
- An expanded full-label state.
|
||||
- Active item frame.
|
||||
|
||||
Groups navigate directly to their first route. The shell includes a sidebar toggle that switches between a narrow icon rail and the full menu for the session.
|
||||
|
||||
## Particle Effects
|
||||
|
||||
`MagicalParticleLayer` will become theme-family aware:
|
||||
|
||||
- `mecha-black`: scanner sweeps, targeting rings, hex grid pulses, and energy-core arcs.
|
||||
- `magical-girl`: large magic circle, star glints, ribbon sweep, and corner sparkle bursts with higher visibility.
|
||||
|
||||
The layer remains DOM-based, non-interactive, reduced-motion aware, and low-cost. It separates the full-workspace background image layer from the global particle layer. Page-local fixed decoration is still disallowed.
|
||||
|
||||
## Surface Treatment
|
||||
|
||||
Shared surfaces remain translucent enough to show the desktop background. Theme-specific differences:
|
||||
|
||||
- Mecha surfaces use dark panels, hard bevel lines, tactical grid overlays, clipped-corner accents, and cyan/amber status light.
|
||||
- Magical surfaces use pink jelly glass, gold/pink star borders, magic-card active frames, rounded icon badges, and obvious moon/ribbon glow.
|
||||
|
||||
Repeated cards and panels keep radii at 8px or less unless they are native circular/pill controls.
|
||||
|
||||
## Documentation
|
||||
|
||||
Update `platform_web/AGENTS.md` and `platform_web/theme/README.md` to describe the new default black mecha style and optional magical-girl style.
|
||||
@@ -0,0 +1,38 @@
|
||||
# Redesign platform web themes and menu
|
||||
|
||||
## Summary
|
||||
|
||||
Redesign the platform web console shell so the default visual theme becomes a black mecha operations style, while the magical-girl theme remains available as a selectable theme with stronger magic-circle and sparkle effects.
|
||||
|
||||
## Motivation
|
||||
|
||||
The previous shell used one magical-girl-leaning visual direction for all palettes. The requested direction requires two clearly distinct theme families:
|
||||
|
||||
- A default black mecha console for day-to-day game server operations.
|
||||
- A selectable magical-girl theme matching the reference style: semi-transparent frosted-glass sidebar states, bold title treatment, brighter star borders, and more visible magic circles.
|
||||
|
||||
Theme differences must affect more than colors. Navigation surfaces, cards, panels, particle effects, frame materials, and theme documentation need to describe and enforce the new split.
|
||||
|
||||
## Scope
|
||||
|
||||
- Change the default theme palette/background to a black mecha style.
|
||||
- Keep magical-girl as an optional first-party theme.
|
||||
- Rework the shell navigation into an expanded text sidebar and collapsed icon rail inspired by the provided references.
|
||||
- Add a sidebar collapse / expand toggle.
|
||||
- Strengthen theme-aware global effects in `MagicalParticleLayer` without canvas or expensive particle loops.
|
||||
- Make shared framed surfaces visually differ between mecha and magical themes.
|
||||
- Update theme documentation and tests.
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- Billing, cloud host sales, agent-provider marketplace workflows, or unrelated SaaS marketplace features.
|
||||
- Third-party character art or bundled recognizable copyrighted assets.
|
||||
- Replacing first-party console pages or changing backend behavior.
|
||||
|
||||
## Verification
|
||||
|
||||
- Run theme unit tests.
|
||||
- Run frontend typecheck/build where practical.
|
||||
- Run `scripts/check-structure.sh`.
|
||||
- Run `openspec validate redesign-platform-web-themes-menu --strict`.
|
||||
- Perform a browser walkthrough for the changed shell/menu UI before claiming visual acceptance.
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
# platform-web-theme-menu Specification
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Default black mecha theme
|
||||
|
||||
The platform web console SHALL default to a black mecha operations visual theme.
|
||||
|
||||
#### Scenario: New visitor loads the console
|
||||
|
||||
- **WHEN** no stored theme preference exists
|
||||
- **THEN** the active palette is `mecha-black`
|
||||
- **AND** the active background preset is `mecha-grid`
|
||||
- **AND** primary surfaces use dark mecha panel materials rather than pink magical materials
|
||||
|
||||
### Requirement: Selectable magical-girl theme
|
||||
|
||||
The platform web console SHALL retain a selectable magical-girl theme.
|
||||
|
||||
#### Scenario: User selects magical-girl palette
|
||||
|
||||
- **WHEN** the magical-girl palette is active
|
||||
- **THEN** shell navigation, cards, panels, and global particles use pink/gold magical materials
|
||||
- **AND** the global particle layer shows a visible magic circle or equivalent magical ultimate motif
|
||||
|
||||
### Requirement: Theme-specific frames and panels
|
||||
|
||||
Shared framed UI surfaces SHALL vary by active theme family.
|
||||
|
||||
#### Scenario: Comparing themes
|
||||
|
||||
- **WHEN** the user switches between mecha and magical-girl themes
|
||||
- **THEN** repeated panels, cards, and navigation entries change border treatment, fill material, and glow style
|
||||
- **AND** the change is not limited to text color or accent color
|
||||
|
||||
### Requirement: Collapsible admin sidebar menu
|
||||
|
||||
The application shell SHALL render the primary menu as a compact admin sidebar with expanded and collapsed states.
|
||||
|
||||
#### Scenario: User views the shell menu
|
||||
|
||||
- **WHEN** primary navigation routes are available
|
||||
- **THEN** they appear as high-level sidebar items with icons, bold labels, and active state framing
|
||||
- **AND** no single-column / double-column menu mode is shown
|
||||
|
||||
### Requirement: Sidebar collapse toggle
|
||||
|
||||
The application shell SHALL provide a sidebar toggle for icon-only and full-menu states.
|
||||
|
||||
#### Scenario: User changes sidebar state
|
||||
|
||||
- **WHEN** the user activates the sidebar toggle
|
||||
- **THEN** the sidebar switches between a narrow icon rail and an expanded text menu
|
||||
- **AND** route navigation remains available in both states
|
||||
|
||||
### Requirement: Global theme particles only
|
||||
|
||||
Theme ultimate effects SHALL be implemented through the shared global background and particle layers.
|
||||
|
||||
#### Scenario: New decorative effect is needed
|
||||
|
||||
- **WHEN** adding theme-level particles, magic circles, scanner sweeps, or sparkles
|
||||
- **THEN** the implementation uses `components/MagicalParticleLayer.tsx`
|
||||
- **AND** page-local fixed decorative DOM elements are not introduced
|
||||
@@ -0,0 +1,12 @@
|
||||
# Tasks
|
||||
|
||||
- [x] Update theme tokens for `mecha-black` default and selectable `magical-girl`.
|
||||
- [x] Rework shared CSS shell, collapsible sidebar menu, and surface materials for distinct mecha vs magical frames.
|
||||
- [x] Refactor `AppShell` navigation into expanded full-menu and collapsed icon-rail states.
|
||||
- [x] Replace canvas particles with a background image layer plus lightweight global particle DOM layer.
|
||||
- [x] Update theme docs and tests for the new visual direction.
|
||||
- [x] Run verification: theme tests, typecheck/build where practical, structure check, OpenSpec strict validation, and browser walkthrough.
|
||||
|
||||
## Latest Evidence
|
||||
|
||||
- Pending rerun after the sidebar and particle-layer correction.
|
||||
Reference in New Issue
Block a user