---
description: Vue 单文件组件与本仓库写法
globs: src/**/*.vue
alwaysApply: false
---

# Vue SFC 约定

## 结构

- 路由页：`views/*` 根节点使用 `<AppPage>`；标题/导语可用 `.app-page__title`、`.app-page__lead`。
- 样式：`<style scoped lang="scss">`；需要断点时用 `respond-up` / `respond-down` mixin。
- 路径别名：`@/` → `src/`。

## 导航与 URL 参数

```vue
<script setup lang="ts">
import { useRouteWithPreferences } from '@/composables/useRouteWithPreferences'
const { linkTo } = useRouteWithPreferences()
</script>
<RouterLink :to="linkTo('/')">...</RouterLink>
```

## 表单示例（响应式）

```vue
<script setup lang="ts">
import { useBreakpoint } from '@/composables/useBreakpoint'
const { isMobile } = useBreakpoint()
</script>
<el-form :label-position="isMobile ? 'top' : 'right'">
```

## 禁止

- 不要复制 PC/H5 两套页面文件。
- 不要绕过 URL 直接改 `i18n.global.locale` 或 `applyTheme`（应走 store + query 同步链路）。