48 lines
1.1 KiB
Markdown
48 lines
1.1 KiB
Markdown
---
|
|
name: frontend-web-view
|
|
description: Web 前台页面规范（Nuxt 4），页面文件组织与组件使用
|
|
globs:
|
|
- "frontend/web/app/pages/**/*.vue"
|
|
- "frontend/web/app/apps/**/pages/**/*.vue"
|
|
---
|
|
|
|
## 文件位置
|
|
|
|
主站页面：
|
|
|
|
```
|
|
frontend/web/app/pages/{module}/
|
|
├── index.vue # 列表/首页
|
|
├── [id].vue # 详情页
|
|
└── create.vue # 创建页
|
|
```
|
|
|
|
插件页面：
|
|
|
|
```
|
|
backend/plugin/{plugin}/resource/template/web/pages/{module}/{name}/
|
|
frontend/web/app/apps/{plugin}/pages/{module}/{name}/
|
|
```
|
|
|
|
插件开发必须先修改模板源，再同步到前端运行目录，并核对两者实现一致。
|
|
|
|
## 技术栈
|
|
|
|
- Vue 3 + Nuxt 4
|
|
- Element Plus
|
|
- Pinia
|
|
- UnoCSS
|
|
|
|
## 关键约定
|
|
|
|
- 页面使用 Nuxt 文件路由（`pages/` 目录自动生成路由）
|
|
- 动态路由使用 `[param].vue` 命名
|
|
- 布局文件使用 `layouts/` 目录
|
|
- 组件使用 `components/` 目录，自动全局注册
|
|
|
|
## 检查清单
|
|
|
|
- [ ] 页面文件命名是否符合 Nuxt 文件路由规范
|
|
- [ ] 是否使用了正确的布局
|
|
- [ ] API 调用是否通过 composable 封装
|