---
description: Vue 前端、路由、认证与 UI 规范
globs: src/**/*
alwaysApply: false
---

# 前端规范（Vue 3）

## 语言与构建

- 使用 `.js` / `.vue`，**禁止**引入 TypeScript（无 `tsconfig`、无 `.ts` 入口）
- 全局样式仅通过 `src/styles/main.css`（`@import "tailwindcss"` + `@theme` 令牌）
- PrimeVue 在 `src/main.js` 注册；Aura 主题 + `html.dark` 深色模式

## 目录职责

| 路径 | 用途 |
|------|------|
| `views/` | 路由页面（Login、Register、Home） |
| `components/` | 布局与复用 UI（`AppTitlebar`、`AuthLayout`） |
| `stores/` | Pinia 状态（`auth.js`） |
| `router/index.js` | 路由表 + `beforeEach` 守卫 |

## 路由

| 路径 | 组件 | 说明 |
|------|------|------|
| `/login` | LoginView | 未登录入口 |
| `/register` | RegisterView | 注册后自动登录 |
| `/` | HomeView | `meta.requiresAuth: true` |

守卫逻辑：

- 无 token 访问需登录页 → `/login`
- 已登录访问 `/login` 或 `/register` → `/`
- 未知路径 → `/login`


## UI / 科技感配色

- 设计令牌在 `styles/main.css` 的 `@theme`：`bg-deep`、`accent-cyan`、`accent-indigo` 等
- 登录/注册共用 `AuthLayout`：网格背景 + `glass-card` + `gradient-text`
- 布局类名示例：`bg-bg-base`、`text-text-muted`、`auth-link`
- 表单组件：`InputText`、`Password`（`fluid`、`toggle-mask`）、`Button`
- **Tauri 拖动**：标题栏保留 `data-tauri-drag-region`（见 `AppTitlebar.vue`），按钮/输入框勿加该属性

## 新增页面 checklist

1. 在 `router/index.js` 注册路由与 `meta`
2. 需登录则设 `requiresAuth: true`
3. 业务状态放 Pinia，View 只做展示与提交