52 lines
1.7 KiB
Plaintext
52 lines
1.7 KiB
Plaintext
---
|
||
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 只做展示与提交
|