Initial commit: G3FO recurring investment schedule frontend

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/rules/responsive-layout.mdc

@@ -0,0 +1,51 @@
+---
+description: PC/移动端响应式与布局（Mobile First）
+globs: src/**/*.{vue,scss}
+alwaysApply: false
+---
+
+# 响应式与布局
+
+完整条文见 `docs/RESPONSIVE_SPEC.md`。实现时必须遵守：
+
+## 断点（勿私自改数值）
+
+| 令牌 | 宽度 |
+|------|------|
+| sm | 576px |
+| md | 768px |
+| lg | 1024px |
+| xl | 1280px |
+
+- TS 真相：`src/constants/breakpoints.ts`；SCSS：`src/styles/breakpoints.scss`（两处数值一致）。
+
+## 样式
+
+- **移动优先**：默认小屏样式，用 `@include respond-up(md|lg)` 增强。
+- **禁止**业务里手写零散 `@media (max-width: 750px)`；Vite 已全局注入 `respond-up/down/between`。
+- 颜色/背景用 `var(--color-*)`；页面边距用 `var(--page-padding-x/y)`，勿写死 `padding: 32px`。
+- 可点击区域最小 **44×44px**。
+
+## 壳层结构
+
+```
+.app-shell > .app-container > AppHeader + 页面
+```
+
+- 路由视图根节点包 **`AppPage`**（`src/components/layout/AppPage.vue`）。
+- 内容最大宽度 `--layout-max-width`（1280px）。
+
+## 脚本
+
+```ts
+import { useBreakpoint } from '@/composables/useBreakpoint'
+const { isMobile, isDesktop } = useBreakpoint()
+```
+
+- 仅用于布局/组件属性（如表单 `label-position`）；勿用 `width` 驱动业务逻辑。
+- 勿在页面重复 `window.addEventListener('resize')`（图表等组件内除外）。
+
+## Element Plus
+
+- 栅格默认 `xs="24"`，再 `sm`/`lg` 分列；`gutter` 移动 12、PC 20 为宜。
+- 移动：`label-position="top"`；表格移动优先卡片或 `.app-table-scroll` 横滚。