@@ -1,354 +1,235 @@
|
||||
---
|
||||
name: opencloud-style
|
||||
description: "Use when modifying OpenCloud visual design, Tailwind classes, component styling, layout, typography, or page-level visual hierarchy. Ensures the project keeps its current clean sky-atlas visual language — airy, fresh, bright, observational — and avoids inconsistent dark or purple defaults."
|
||||
description: "Maintain OpenCloud's current visual system when changing Vue templates, Tailwind classes, CSS, Naive UI theming, layout, typography, colors, buttons, cards, modals, maps, or responsive behavior. Preserve the clean sky-atlas language: airy sky-blue surfaces, fresh eucalyptus green, square atlas-like panels, pixel-cloud identity, and hard offset shadows."
|
||||
---
|
||||
|
||||
# OpenCloud Visual Style
|
||||
|
||||
Use this skill whenever changing OpenCloud visual design, component styling, Tailwind classes, layout, typography, or any page-level appearance.
|
||||
Treat the current design tokens and shared `oc-*` classes as the visual contract. Keep the interface airy, bright, observational, and slightly editorial—like a field atlas for clouds.
|
||||
|
||||
## Start From the Sources of Truth
|
||||
|
||||
Inspect these files before making a material visual change:
|
||||
|
||||
1. `src/styles/tokens.css` — palette remapping, semantic colors, gradients, shadows, motion.
|
||||
2. `src/styles/base.css` — body baseline and the global square-corner rule.
|
||||
3. `src/styles/components.css` — reusable page, surface, form, and interaction contracts.
|
||||
4. `src/lib/theme.ts` — Naive UI overrides; keep semantic colors aligned with `tokens.css`.
|
||||
5. `docs/style-system.md` — naming and implementation guidance.
|
||||
6. `scripts/check-style-system.mjs` — prohibited legacy patterns.
|
||||
|
||||
Use `src/style.css` only as the stylesheet assembly point. Put stable values in `tokens.css`, cross-page patterns in `components.css`, and truly component-specific behavior in scoped styles.
|
||||
|
||||
## Visual Direction
|
||||
|
||||
OpenCloud should feel like a clean sky atlas: airy, fresh, bright, and observational.
|
||||
- Use white, slate-50, sky-50, and soft translucent white for primary surfaces.
|
||||
- Use sky blue for atmosphere, page heroes, upload/create actions, and the pixel-cloud brand surface.
|
||||
- Use fresh eucalyptus green for identity, navigation selection, account access, confirmation, and interactive hover states.
|
||||
- Use leaf green only for explicit success, approved, public, or completed states.
|
||||
- Use amber for pending/review/uncommon states and rose/red for destructive/rejected states.
|
||||
- Keep slate-900 text dominant. Do not turn normal page sections into dark panels.
|
||||
- Avoid purple, indigo, generic gray utilities, neon green, and decorative color proliferation.
|
||||
|
||||
- Base surfaces: `white`, `slate-50`, `sky-50`, soft translucent white (`bg-white/80`, `bg-white/88`).
|
||||
- Main accent: teal/cyan for navigation, identity, account surfaces.
|
||||
- Secondary accent: sky blue for upload and action highlights.
|
||||
- Supporting accent: amber only for rarity, badges, pending/review states.
|
||||
- Danger accent: rose/red only for destructive or rejected states.
|
||||
- Avoid purple as a default accent.
|
||||
- Avoid black selected states except for text or rare high-contrast badges.
|
||||
## Current Palette
|
||||
|
||||
---
|
||||
Tailwind `teal-*` and `emerald-*` are compatibility names remapped in `tokens.css`; they are not Tailwind defaults.
|
||||
|
||||
| Role | Main | Dark | Light surface |
|
||||
| --- | --- | --- | --- |
|
||||
| Eucalyptus brand/interaction | `#34745d` | `#274c40` | `#f2faf6` |
|
||||
| Leaf success | `#4d7f3b` | `#35522c` | `#f4faef` |
|
||||
| Sky information/action | `#0369a1` | `#075985` | `#e0f2fe` |
|
||||
| Canvas | `#eef4f8` | — | `#f8fbfd` |
|
||||
| Primary text | `#0f172a` | — | — |
|
||||
| Secondary text | `#334155` | — | — |
|
||||
| Muted text | `#64748b` | — | — |
|
||||
| Border | `#d9e3ee` | — | — |
|
||||
|
||||
Rules:
|
||||
|
||||
- Do not use Tailwind `green-*` or `lime-*`.
|
||||
- Do not reintroduce Tailwind's vivid teal values such as `#14b8a6` or `#0f766e`.
|
||||
- Use semantic tokens or existing `teal-*`/`emerald-*` compatibility utilities instead of new hard-coded greens.
|
||||
- Keep green text and actions dark enough for readable contrast; use pale green primarily as a surface.
|
||||
- Synchronize changes to brand or success colors between `tokens.css` and `src/lib/theme.ts`.
|
||||
|
||||
## Shape and Border Rules
|
||||
|
||||
The product is square by default. `src/styles/base.css` forces Tailwind `rounded*` utilities to `0px`.
|
||||
|
||||
- Use square corners for page panels, cards, buttons, inputs, navigation, dropdowns, map controls, and ordinary modals.
|
||||
- Use a one-pixel slate or semantic-color border to define surfaces.
|
||||
- Do not add rounded rectangles as a generic polish treatment.
|
||||
|
||||
Documented exceptions:
|
||||
|
||||
- Circular close/overlay controls in `ImageDetailModal`.
|
||||
- Circular location/marker dots and AMap-generated marker bubbles.
|
||||
- The media-focused `ImageDetailModal` shell.
|
||||
- AMap-generated information cards and the deliberately organic timeline control details in `MapView`.
|
||||
|
||||
Do not treat map floating buttons as exceptions: `.oc-map-button` is a square `40px × 40px` control with `0px` radius and a hard shadow, including its disabled state.
|
||||
|
||||
## Shadows and Interaction
|
||||
|
||||
Use hard offset shadows with zero blur as the signature depth treatment:
|
||||
|
||||
| Token | Value | Typical use |
|
||||
| --- | --- | --- |
|
||||
| `--oc-shadow-xs` | `3px 3px` | Small controls and map buttons |
|
||||
| `--oc-shadow-sm` | `4px 4px` | Header logo and compact CTAs |
|
||||
| `--oc-shadow-md` | `6px 6px` | Standard cards and navigation |
|
||||
| `--oc-shadow-lg` | `8px 8px` | Menus and floating panels |
|
||||
| `--oc-shadow-xl` | `12px 12px` | Large system/auth cards |
|
||||
| `--oc-shadow-sky` | sky-tinted `4px 4px` | Sky actions |
|
||||
| `--oc-shadow-primary` | eucalyptus-tinted `4px 4px` | Green interactions |
|
||||
|
||||
- On hover, interactive controls may move `translate(-1px, -1px)` and grow the hard shadow.
|
||||
- On active, return the control to its origin.
|
||||
- Preserve a visible `2px` sky focus outline with offset.
|
||||
- Do not replace the hard-shadow language with generic soft shadows across ordinary UI.
|
||||
- Soft/blurred shadows remain acceptable for media overlays, AMap internals, and image hover depth.
|
||||
|
||||
## Backgrounds and Brand Identity
|
||||
|
||||
Use the semantic gradients in `tokens.css`:
|
||||
|
||||
- App shell: a subtle eucalyptus radial glow over the pale blue-gray canvas.
|
||||
- Standard page hero: `#e0f2fe` to `#f8fafc`.
|
||||
- Soft page hero: `#f2faf6` to `#f8fafc`.
|
||||
- App grid: subtle slate lines at `32px`.
|
||||
|
||||
The header identity is fixed:
|
||||
|
||||
- Use the pixel-style cloud/sun SVG, not an emoji or unrelated icon set.
|
||||
- Put the icon in a square `40px` container with `bg-sky-100`, `border-sky-200`, and a `4px 4px` neutral hard shadow.
|
||||
- Keep “LIVE SKY ATLAS” as the small tracked eyebrow and “OpenCloud” as the bold brand name.
|
||||
- Keep the header white/translucent; green belongs to navigation and account interaction, not the logo background.
|
||||
|
||||
## Typography
|
||||
|
||||
**Font stack** (`src/style.css`, `App.vue`):
|
||||
```
|
||||
Use:
|
||||
|
||||
```text
|
||||
"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif
|
||||
```
|
||||
Monospace: `"IBM Plex Mono", "SFMono-Regular", monospace`
|
||||
|
||||
**Type scale:**
|
||||
Use IBM Plex Mono for small atlas-like labels when a monospace accent is appropriate.
|
||||
|
||||
| Size | Use |
|
||||
|------|-----|
|
||||
| `text-[11px]` | Header subtitle, heatmap weekday labels |
|
||||
| `text-xs` | Uppercase section labels, captions, metadata, tags, help text |
|
||||
| `text-sm` | Body text, descriptions, nav items, form labels, detail sections |
|
||||
| `text-base` | Hero description paragraphs |
|
||||
| `text-lg` | Logo brand name, card titles, item counters |
|
||||
| `text-xl` | Modal titles, subsection headings, stat cards |
|
||||
| `text-2xl` | Subsection headings, stat values, settings section titles |
|
||||
| `text-3xl` | Stat values, avatar initials |
|
||||
| `text-4xl` | Page H1 headings (all page heroes) |
|
||||
| `text-5xl` | Login/Register hero text only |
|
||||
| `text-6xl`+ | Decorative single characters, error page emoji |
|
||||
- Page eyebrow: `text-sm`, uppercase, `tracking-[0.24em]`, sky-700.
|
||||
- Page title: `text-4xl`, bold, slate-900.
|
||||
- Descriptions: `text-sm`, `leading-7`, slate-600.
|
||||
- Section/stat labels: `text-xs`, uppercase, tracking `0.18em–0.20em`, slate-500.
|
||||
- Header brand eyebrow: `text-[11px]`, uppercase, `tracking-[0.22em]`.
|
||||
- Reserve `font-black` and very large display text for authentication hero statements.
|
||||
|
||||
**Font weights:**
|
||||
- `font-medium` (500) — body text, nav items, form labels, tags
|
||||
- `font-semibold` (600) — modal titles, item names, emphasis
|
||||
- `font-bold` (700) — headings, stat values, card titles
|
||||
- `font-black` (900) — Login/Register hero only, with `leading-[1.05]`
|
||||
## Layout and Responsive Behavior
|
||||
|
||||
**Letter tracking:**
|
||||
Prefer the shared page structure:
|
||||
|
||||
| Tracking | Where |
|
||||
|----------|-------|
|
||||
| `tracking-[0.12em]` | Nav links, upload/button text (uppercase) |
|
||||
| `tracking-[0.18em]` | Info panel section labels |
|
||||
| `tracking-[0.20em]` | Stat card labels |
|
||||
| `tracking-[0.22em]` | Header subtitle, modal subtitle, quick-upload header |
|
||||
| `tracking-[0.24em]` | Page hero section labels |
|
||||
| `tracking-[0.26em]` | Login/Register hero labels |
|
||||
```html
|
||||
<section class="oc-page-hero">
|
||||
<div class="oc-container oc-container--content oc-page-hero__inner">
|
||||
<p class="oc-page-eyebrow">Cloud Upload</p>
|
||||
<h1 class="oc-page-title">上传云图</h1>
|
||||
<p class="oc-page-description">页面描述</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
---
|
||||
|
||||
## Border Radius
|
||||
|
||||
**All border-radius is `0px` by default** — enforced via Naive UI theme override and global CSS:
|
||||
|
||||
```css
|
||||
[class~='rounded'], [class*='rounded-'] { border-radius: 0 !important; }
|
||||
<main class="oc-container oc-container--content oc-page-content">
|
||||
<!-- content -->
|
||||
</main>
|
||||
```
|
||||
|
||||
Only exceptions (all `!important` or explicit inline):
|
||||
- Close/map buttons: `rounded-full` / `border-radius: 9999px`
|
||||
- ImageDetailModal shell: `rounded-[30px]`
|
||||
- MapView info panel cards: `rounded-2xl`
|
||||
- MiniLocationMap marker dot: `rounded-full`
|
||||
- UploadView native inputs: `rounded-lg`
|
||||
Container widths:
|
||||
|
||||
---
|
||||
- `oc-container--narrow` — `max-w-4xl`
|
||||
- `oc-container--content` — `max-w-6xl`
|
||||
- `oc-container--wide` — `max-w-7xl`
|
||||
|
||||
## Shadows
|
||||
Use `px-4 sm:px-6 lg:px-8` for page gutters. Validate at both desktop and a real `375px` mobile viewport. Do not accept horizontal overflow.
|
||||
|
||||
**Signature pattern: hard offset box shadows** — `shadow-[Xpx_Xpx_0_0_rgba(...)]` with zero blur.
|
||||
## Reusable Component Contracts
|
||||
|
||||
| Shadow | Offset | Use |
|
||||
|--------|--------|-----|
|
||||
| `shadow-[3px_3px_0_0_rgba(...)]` | 3/3 | Small header buttons, login button |
|
||||
| `shadow-[4px_4px_0_0_rgba(...)]` | 4/4 | Logo box, primary CTAs, hidden header, profile avatar |
|
||||
| `shadow-[6px_6px_0_0_rgba(...)]` | 6/6 | Navigation bar, search box |
|
||||
| `shadow-[8px_8px_0_0_rgba(...)]` | 8/8 | Dropdown menus, archive panel, account card |
|
||||
| `shadow-[10px_10px_0_0_rgba(...)]` | 10/10 | Login/Register hero sections |
|
||||
| `shadow-[12px_12px_0_0_rgba(...)]` | 12/12 | Login/Register cards, CommunityView section, AuthConfirm card |
|
||||
Use existing semantic classes before writing repeated Tailwind bundles:
|
||||
|
||||
**Shadow colors by context:**
|
||||
- `rgba(15,23,42,...)` — slate-900, neutral (most common)
|
||||
- `rgba(14,165,233,...)` — sky-500 (sky-colored buttons)
|
||||
- `rgba(20,184,166,...)` — teal-500 (teal accents)
|
||||
- Page structure: `oc-page-hero`, `oc-page-hero--soft`, `oc-container`, `oc-page-content`.
|
||||
- Typography: `oc-page-eyebrow`, `oc-page-title`, `oc-page-description`, `oc-section-label`, `oc-stat-label`, `oc-stat-value`, `oc-meta`.
|
||||
- Forms: `oc-field-label`, `oc-field-required`, `oc-field-control`, `oc-field-help`, `oc-field-error`.
|
||||
- Surfaces: `oc-surface`, `oc-inset-panel`, `oc-panel-card`, `oc-panel-card-soft`, `oc-empty-card`.
|
||||
- Interaction: `oc-primary-button`, `oc-panel-button`, `oc-header-button`, `oc-icon-button`, `oc-map-button`, `oc-choice-button`, `oc-text-button`, `oc-menu-item`, `oc-nav-link`.
|
||||
|
||||
**Standard Tailwind shadows** also used sparingly:
|
||||
- `shadow-sm` — stat cards, gallery cards, encyclopedia cards
|
||||
- `shadow-lg` — cloud card hover lift
|
||||
- `shadow-2xl` — modal shells
|
||||
Class names describe function. Keep modifiers attached to their base class, for example:
|
||||
|
||||
---
|
||||
|
||||
## Gradients
|
||||
|
||||
All page backgrounds use gradients — avoid flat single-color backgrounds.
|
||||
|
||||
| Gradient | Where |
|
||||
|----------|-------|
|
||||
| `linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)` | Page hero sections (standard) |
|
||||
| `linear-gradient(180deg,#f0fdfa_0%,#f8fafc_100%)` | Community page, soft app pages |
|
||||
| `linear-gradient(135deg,#f0fdfa_0%,#fff_48%,#eff6ff_100%)` | Login hero |
|
||||
| `linear-gradient(135deg,#eff6ff_0%,#fff_42%,#f0fdfa_100%)` | Register hero |
|
||||
| `linear-gradient(180deg,#f8fafc_0%,#eef6ff_55%,#f8fafc_100%)` | Admin page |
|
||||
| `linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)` | Brand chip/avatar |
|
||||
| `linear-gradient(180deg,#f0fdfa_0%,#fff_100%)` | Account card header |
|
||||
|
||||
**App shell background** (`App.vue`):
|
||||
```
|
||||
radial-gradient(circle_at_top_left, rgba(12,148,136,0.12), transparent 28%)
|
||||
linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%)
|
||||
```
|
||||
Plus a dotted grid overlay: `bg-[size:32px_32px] opacity-35`.
|
||||
|
||||
**Body background** (`style.css`):
|
||||
```
|
||||
linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0)), #eef4f8
|
||||
```html
|
||||
<NButton type="default" class="oc-panel-button oc-panel-button--sky">
|
||||
保存
|
||||
</NButton>
|
||||
```
|
||||
|
||||
---
|
||||
Available shared variants:
|
||||
|
||||
## Layout
|
||||
- Primary: `oc-primary-button--teal`, `oc-primary-button--sky`
|
||||
- Panel: `--neutral`, `--sky`, `--teal`, `--amber`, `--danger`
|
||||
- Header: `--neutral`, `--sky`, `--teal`
|
||||
- Icon: `--small`, `--tiny`, `--sky`, `--danger`
|
||||
- Text/menu: muted, amber, and danger variants where defined
|
||||
|
||||
**Page max-widths:**
|
||||
- `max-w-7xl` — AppHeader, GalleryView, AdminView
|
||||
- `max-w-6xl` — UploadView, ProfileView, EncyclopediaView
|
||||
- `max-w-4xl` — ProfileSettingsView, CommunityView
|
||||
- `max-w-3xl` — QuickUploadModal, MapPickerModal, AuthConfirmView
|
||||
- `max-w-2xl` — ResetPasswordView, NotFoundView, ForbiddenView, CloudEditModal
|
||||
## Button Semantics
|
||||
|
||||
**Page hero pattern** (consistent across all views):
|
||||
```
|
||||
border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]
|
||||
max-w-{6xl|7xl} mx-auto px-4 py-10
|
||||
text-sm font-medium uppercase tracking-[0.24em] text-sky-700 (subtitle)
|
||||
h1 mt-3 text-4xl font-bold text-slate-900 (title)
|
||||
p mt-4 max-w-2xl text-sm leading-7 text-slate-600 (description)
|
||||
```
|
||||
- Teal/eucalyptus: login, account access, active toggle, confirm.
|
||||
- Sky: register, create, upload, forward action.
|
||||
- Neutral: cancel and utility actions.
|
||||
- Amber: pending/review/state-toggle actions.
|
||||
- Danger: deletion and destructive actions.
|
||||
|
||||
**Horizontal padding:** `px-4` / `sm:px-6` / `lg:px-8`
|
||||
For Naive UI buttons:
|
||||
|
||||
**Column systems:**
|
||||
- Gallery masonry: `columns-2 gap-3 md:columns-3 xl:columns-4 [column-gap:0.75rem]`
|
||||
- Card grids: `gap-4 md:grid-cols-2 xl:grid-cols-3` or `gap-4 md:grid-cols-4`
|
||||
- Two-column splits: `lg:grid-cols-[1.1fr_0.9fr]`, `lg:grid-cols-[1.4fr_0.9fr]`
|
||||
- Use `type="default"` with the shared `oc-*` class when a custom visual variant is intended.
|
||||
- Do not rely on Naive UI default primary/secondary styling for page CTAs or panel actions.
|
||||
- Keep `src/lib/theme.ts` as the global Naive UI contract; it is mounted by `App.vue`.
|
||||
- Use dark text on light primary surfaces. Do not assume primary buttons should have white text.
|
||||
|
||||
**Gap scale:** `gap-4`, `gap-5`, `gap-6` for card grids; `gap-2` for nav items; `space-y-6`/`space-y-8` between sections.
|
||||
## Icons, Cards, and Modals
|
||||
|
||||
---
|
||||
- Use `@vicons/tabler` through `NIcon` for interface icons.
|
||||
- Preserve the pixel-cloud SVG for the primary brand mark.
|
||||
- Use one bordered surface and one appropriate hard-shadow token for ordinary cards.
|
||||
- Keep modal structure square unless it is a documented media exception.
|
||||
- Use `oc-overlay-button` for controls over dark media and `oc-icon-button` for controls on light surfaces.
|
||||
- Keep semantic status colors stable: emerald success, amber pending, rose rejected/destructive, slate hidden/neutral.
|
||||
|
||||
## Component Conventions
|
||||
## Implementation Workflow
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary CTA (upload, action):**
|
||||
```
|
||||
inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3
|
||||
text-sm font-medium uppercase tracking-[0.12em] text-sky-800
|
||||
shadow-[4px_4px_0_0_rgba(14,165,233,0.14)]
|
||||
transition-colors hover:bg-sky-50 hover:text-sky-900
|
||||
```
|
||||
Mobile: `h-8 md:h-10 md:px-4`
|
||||
|
||||
**Secondary/neutral:**
|
||||
```
|
||||
inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3
|
||||
text-sm font-medium text-slate-700
|
||||
shadow-[3px_3px_0_0_rgba(15,23,42,0.06)]
|
||||
hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800
|
||||
```
|
||||
|
||||
**Danger/delete:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`
|
||||
|
||||
**Map floating buttons:** `w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50`
|
||||
|
||||
**Naive UI buttons** use `secondary strong` as default; `type="primary"` for primary actions; `block size="large"` for block forms.
|
||||
|
||||
### Cards
|
||||
|
||||
**Standard card:**
|
||||
```
|
||||
border bg-white text-left shadow-sm
|
||||
transition-all hover:-translate-y-1 hover:shadow-lg
|
||||
```
|
||||
|
||||
**Encyclopedia unlocked variant:** `border-amber-300 shadow-amber-100/60`
|
||||
|
||||
**Naive UI NCard:** `class="border border-slate-200 shadow-sm"`
|
||||
|
||||
### Modals
|
||||
|
||||
**Overlay:** `fixed inset-0 z-[110|130] bg-slate-950/60` (or `bg-black/85` for image detail)
|
||||
|
||||
**Shell:** `bg-white shadow-2xl` with max-w matching content width. ImageDetailModal uses `rounded-[30px]`; others are square.
|
||||
|
||||
**Close button:** Circular (`rounded-full`, `border-radius: 9999px`), semi-transparent background.
|
||||
|
||||
**Sections:** `border-b border-slate-200` separates header/body/footer.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**Native HTML inputs:**
|
||||
```
|
||||
border border-slate-300 px-3 py-2.5 text-sm
|
||||
focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500
|
||||
```
|
||||
|
||||
**Labels:** `block text-sm font-medium text-slate-700 mb-1`
|
||||
|
||||
**Required marker:** `<span class="text-red-500">*</span>`
|
||||
|
||||
**Error text:** `text-sm text-red-500 mt-1`
|
||||
|
||||
**Checkboxes:** `h-5 w-5 border-slate-300 text-sky-500 focus:ring-sky-500`
|
||||
|
||||
### Tags & Badges
|
||||
|
||||
All use `inline-flex border px-3 py-1 text-xs font-medium` with color variants:
|
||||
|
||||
- `common`: `bg-sky-100 text-sky-700 border-sky-200`
|
||||
- `uncommon`: `bg-amber-100 text-amber-700 border-amber-200`
|
||||
- `rare`: `bg-rose-100 text-rose-700 border-rose-200`
|
||||
- `approved`/`success`: `bg-emerald-100 text-emerald-700 border-emerald-200`
|
||||
- `pending`: `bg-amber-100 text-amber-700 border-amber-200`
|
||||
- `rejected`: `bg-rose-100 text-rose-700 border-rose-200`
|
||||
- `hidden`/neutral: `bg-slate-100 text-slate-600`
|
||||
|
||||
### Menus & Dropdowns
|
||||
|
||||
**Account dropdown:**
|
||||
```
|
||||
border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]
|
||||
```
|
||||
|
||||
**Menu items:**
|
||||
```
|
||||
flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700
|
||||
transition-colors hover:bg-teal-50 hover:text-teal-800
|
||||
```
|
||||
|
||||
**Danger menu item:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`
|
||||
|
||||
### Navigation
|
||||
|
||||
**Header:** `sticky top-0 z-50 h-28 md:h-16 bg-white/88 backdrop-blur-xl border-b border-slate-200/80`, scroll-hides with `transition-transform duration-300`.
|
||||
|
||||
**Selected nav item:** `bg-teal-100 text-teal-800 ring-1 ring-teal-200`
|
||||
|
||||
---
|
||||
|
||||
## Core Palette
|
||||
|
||||
Use these Tailwind families first:
|
||||
|
||||
- `slate` — text, borders, neutral panels
|
||||
- `sky` — page gradients, upload/action emphasis, map/cloud atmosphere
|
||||
- `teal` — navigation selected states, account identity, calm success-adjacent UI
|
||||
- `cyan` — subtle sky gradients and avatar/logo surfaces
|
||||
- `emerald` — explicit success/approved state only
|
||||
- `amber` — pending/review/uncommon rarity
|
||||
- `rose` — rejected/destructive/rare rarity
|
||||
|
||||
**Key hex values:**
|
||||
|
||||
| Role | Value |
|
||||
|------|-------|
|
||||
| Page background | `#eef4f8` / `#f3f7fb` |
|
||||
| Body text | `#0f172a` (slate-900) |
|
||||
| Secondary text | `#334155` (slate-700) |
|
||||
| Muted text | `#64748b` (slate-500) |
|
||||
| Borders | `#d9e3ee`, `#e2e8f0`, `#cbd5e1` |
|
||||
| Selection | `rgba(15,118,110,0.18)` (teal-700) |
|
||||
| Text on primary | `#0f172a` (dark, not white — Naive UI override) |
|
||||
|
||||
**Naive UI theme tokens** (`App.vue`):
|
||||
```
|
||||
primaryColor: '#0f766e' (teal-700)
|
||||
infoColor: '#0369a1' (sky-700)
|
||||
successColor: '#0f766e' (teal-700)
|
||||
warningColor: '#d97706' (amber-600)
|
||||
errorColor: '#dc2626' (red-600)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Animation & Transitions
|
||||
|
||||
**Hover effects:**
|
||||
- Cards: `transition-all hover:-translate-y-1 hover:shadow-lg` (lift)
|
||||
- Images: `transition duration-500 group-hover:scale-[1.04]` (subtle zoom)
|
||||
- Gallery items: `transition-transform duration-300 hover:-translate-y-1`
|
||||
- Badges on cards: `transition-opacity md:opacity-0 md:group-hover:opacity-100`
|
||||
|
||||
**Modal transitions:**
|
||||
- ImageDetailModal: opacity 180ms, shell scale+translateY 220ms, `cubic-bezier(0.22, 1, 0.36, 1)`
|
||||
- Other modals: default Vue transitions
|
||||
|
||||
**Header scroll:** `transition-transform duration-300`
|
||||
|
||||
**Image loading:** `transition-opacity duration-300` for thumbnail-to-hires crossfade, low-res preview gets `blur-[1px]` until full-res loads.
|
||||
|
||||
**Skeleton shimmer:**
|
||||
```
|
||||
animate-pulse bg-[linear-gradient(110deg,#0f172a_0%,#1e293b_45%,#334155_55%,#0f172a_100%)]
|
||||
bg-[length:220%_100%]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Icons
|
||||
|
||||
**Library:** `@vicons/tabler` (Tabler Icons), rendered via `<NIcon size="16|18|20|22|30|42">` from Naive UI.
|
||||
|
||||
Common icons: `User`, `Settings`, `Logout`, `Shield`, `Search`, `X`, `Clock`, `Location`/`MapIcon`, `CloudUpload`, `Map`/`Satellite`, `Adjustments`, `Calendar`, `Refresh`, `InfoCircle`, `Lock`, `Check`, `Eye`/`EyeOff`, `Trash`
|
||||
|
||||
---
|
||||
1. Inspect the source-of-truth files and the target component.
|
||||
2. Reuse an existing semantic class if it expresses the intent.
|
||||
3. Use Tailwind only for one-off layout and responsive composition.
|
||||
4. Add a token before repeating a stable raw value.
|
||||
5. Add a shared `oc-*` class only for cross-page patterns or product-wide rules.
|
||||
6. Keep feature-specific AMap, slider, media, or transition details scoped to the component.
|
||||
7. When changing a global color, audit all matching Tailwind utilities, hard-coded hex/RGB values, gradients, shadows, canvas drawing, and Naive UI tokens.
|
||||
8. Preserve unrelated user changes in the worktree.
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
- Do not use purple as a fallback visual direction.
|
||||
- Do not use `bg-slate-900 text-white` for ordinary selected navigation.
|
||||
- Do not introduce dark-mode-heavy sections unless the surrounding page already uses that language.
|
||||
- Do not overuse rounded rectangles; the project uses sharp, atlas-like panels.
|
||||
- Do not mix random accent colors within the same feature. Pick one accent family and keep it consistent.
|
||||
- Do not use flat single-color backgrounds where a gradient belongs.
|
||||
- Do not add border-radius without an explicit reason — `0px` is the project default.
|
||||
- Do not use white text on primary buttons — Naive UI primary buttons use dark text (`#0f172a`).
|
||||
|
||||
---
|
||||
- Default Tailwind `green-*`, `lime-*`, vivid teal, purple, indigo, or generic `gray-*`.
|
||||
- Ad hoc rounded cards, pills, or map buttons.
|
||||
- Soft drop shadows replacing hard atlas shadows across normal UI.
|
||||
- New button styling copied into templates instead of shared `oc-*` variants.
|
||||
- `NButton type="primary"` used as a shortcut around the shared button contract.
|
||||
- White text on pale green or sky action surfaces.
|
||||
- Emoji used as the site identity.
|
||||
- Flat page backgrounds where the shared hero/canvas gradient applies.
|
||||
- Green used indiscriminately for both brand interaction and success state.
|
||||
|
||||
## Validation
|
||||
|
||||
After style changes, run:
|
||||
|
||||
```bash
|
||||
npx vue-tsc -b
|
||||
npm run check:styles
|
||||
git diff --check
|
||||
npm run build
|
||||
```
|
||||
|
||||
Run `npm run build` if the change touches routes, imported components, or package dependencies.
|
||||
For material visual changes, render representative pages and inspect desktop and `375px` mobile screenshots. Check computed styles when shape, shadow, color token, or responsive overflow is part of the request.
|
||||
|
||||
Reference in New Issue
Block a user