初始化

.cursor/rules/vue-component.mdc

@@ -0,0 +1,72 @@
+---
+description: Vue 组件开发规范，适用于落地页组件
+globs: "**/*.vue"
+alwaysApply: false
+---
+
+# Vue 组件规范
+
+## 组件结构
+
+遵循 `<template>` → `<script>` → `<style>` 顺序:
+
+```vue
+<template>
+  <div class="pageName">
+    <!-- 内容 -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["os", "configs", "switchData"],
+  data() {
+    return {};
+  },
+  watch: {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.pageName {
+  /* 样式 */
+}
+</style>
+```
+
+## 命名约定
+
+- 文件名: 小写或 camelCase (`mobile1.vue`, `selectLinePopup.vue`)
+- 新落地页模板: `mobile{N}.vue` (移动端) / `pc{N}.vue` (PC 端)
+- CSS 类名: camelCase (`headerBox`, `floatingBox`, `bottomBox`)
+- 事件名: camelCase (`getApkInfo`, `recordClick`)
+
+## Props 通信
+
+落地页组件接收三个核心 props:
+
+| Prop | 说明 |
+|------|------|
+| `os` | 设备信息 (isPhone, userAgent 等) |
+| `configs` | 配置列表 (tg_group, potato_group 等) |
+| `switchData` | 开关数据 (下载链接、功能开关) |
+
+## 事件追踪
+
+使用 `landingPageClick` 上报用户点击行为，传入 tab 和坐标:
+
+```js
+import { landingPageClick } from "@/utils/eventTracker";
+landingPageClick(this, { tab_key, tab_name, click_coordinates_x, click_coordinates_y });
+```
+
+## 图片资源引用
+
+图片放在 `src/assets/images/{templateName}/` 下，在 SCSS 中通过相对路径引用:
+
+```scss
+background: url("./../../../assets/images/mobile1/logo.png") no-repeat;
+background-size: 100% 100%;
+```