初始化

2026-09-15 15:46:36 +07:00
commit da39ab9a2a
125 changed files with 25508 additions and 0 deletions
@@ -0,0 +1,97 @@
+---
+name: commit-convention
+description: 为本仓库生成符合团队规范的 Git 提交信息，并在用户要求提交代码时执行完整提交流程。用于 git commit、提交代码、写 commit message、创建提交、push 前整理提交等场景；Agent 代提交时必须使用 [Ai] 标记并写清业务变更。
+---
+
+# Git 提交规范（Agent 代提交）
+
+## 触发条件
+
+满足任一条件，**必须先加载本 skill**，再执行 `git add` / `git commit`：
+
+- 用户明确要求：提交、commit、git commit、保存提交、push 前先 commit 等
+- 用户规则中的「committing-changes-with-git」流程已启动
+
+**未获用户明确授权时，不得执行 commit。**
+
+---
+
+## Agent 代提交：标记规则（强制）
+
+由 Cursor Agent 发起的提交，**必须**在 subject 前加 `[Ai]`：
+
+```text
+[Ai] <type>(<scope>): <subject>
+
+<body 可选：业务背景、影响范围、关联 Bug>
+```
+
+- `type`：`feat` | `fix` | `refactor` | `style` | `perf` | `chore` | `docs` | `test` | `build` | `ci`
+- `scope`：模块/页面，如 `benefits`、`mine`、`community`、`player`
+- 可在正文末尾追加 trailer（可选）：
+
+```text
+Co-Authored-By: Cursor <noreply@cursor.com>
+```
+
+用户本人手动提交、且明确说明「人工提交」时，建议使用 `[Human]`；Agent **不要**替用户假标 `[Human]`。
+
+---
+
+## Subject 质量（强制）
+
+提交说明必须让人一眼看懂**改了什么业务**或**修了什么问题**。
+
+### 必须做到
+
+1. 先并行执行：`git status`、`git diff`（含 staged）、`git log -5 --oneline` 了解风格与变更范围
+2. subject 用**完整语义**描述，优先中文；可中英混用 scope
+3. 多文件、多模块时：一条 commit 只包同一业务目标；若混杂无关改动，先询问是否拆分
+4. body 写：原因、用户可见变化、风险点（如有）
+
+### 严禁（subject 不得仅为或等同于）
+
+`test`、`修改`、`update`、`fix`、`xxx`、`111`、`wip`、`temp`、`提交`、`save`、纯标点、纯数字、单字
+
+### 示例
+
+```text
+# ✅
+[Ai] feat(benefits): 新增七日签到弹窗与连续签到奖励展示
+[Ai] fix(player): 修复横屏切换后 HLS 首帧黑屏
+[Ai] refactor(mine): 签到任务列表抽离 useSignTask composable
+
+# ❌
+[Ai] fix: 修改
+[Ai] feat: test
+修改播放器
+111
+```
+
+---
+
+## 提交流程（与 user rule 对齐）
+
+1. `git status` + `git diff` + `git log`（可并行）
+2. 根据 diff **撰写**符合本规范的 message（HEREDOC 传 `-m`）
+3. 只 `git add` 与本次任务相关的文件
+4. **不得**提交 `.env`、密钥、凭据类文件；若用户在 staged 中含此类文件，警告并排除
+5. `git commit` 后 `git status` 确认成功
+6. hook 失败时：**不要** `commit --amend`，修 message 后**新建 commit**
+7. **除非用户明确要求，否则不 `git push`**
+
+---
+
+## 输出给用户
+
+提交完成后简要说明：
+
+- commit hash（若有）
+- 本次纳入的文件范围
+- message 摘要（一行）
+
+---
+
+## 与本地 Hook / CI 的关系
+
+本 skill 约束 **Agent 行为**。若仓库后续接入 `husky` + `commitlint` 或 CI，以仓库脚本校验为准；Agent 仍须预先满足 `[Ai]` 与 subject 质量，避免 hook 拒绝。
@@ -0,0 +1,196 @@
+---
+name: figma-to-landpage
+description: 将 Figma 设计稿转换为 Vue 2 落地页组件。当用户提供 Figma 链接并要求生成落地页、实现设计稿、创建新模板时触发。适用于移动端和 PC 端落地页开发。
+---
+
+# Figma 转落地页
+
+将 Figma 设计稿翻译为本项目的 Vue 2 落地页组件，保持视觉还原度。
+
+## 工作流程
+
+### 第 1 步: 获取设计稿信息
+
+从 Figma URL 中提取 `fileKey` 和 `nodeId`:
+- URL 格式: `https://figma.com/design/:fileKey/:fileName?node-id=1-2`
+- 将 `node-id` 中的 `-` 转为 `:`
+
+依次调用:
+1. `get_design_context(fileKey, nodeId)` — 获取布局、颜色、字体等结构化数据
+2. `get_screenshot(fileKey, nodeId)` — 获取视觉截图作为还原参考
+
+如果设计太复杂导致返回截断:
+1. 先调 `get_metadata(fileKey, nodeId)` 获取节点树
+2. 对各子节点分别调 `get_design_context`
+
+### 第 2 步: 确定模板编号
+
+查看 `src/views/land/components/` 下已有的模板文件:
+- 移动端: `mobile1.vue`, `mobile2.vue`, ...
+- PC 端: `pc1.vue`, `pc2.vue`, ...
+
+新模板使用下一个序号。
+
+### 第 3 步: 下载资源
+
+将设计稿中的图片、图标导出并放入:
+```
+src/assets/images/{templateName}/
+```
+
+例如 `mobile3` 模板的资源放在 `src/assets/images/mobile3/`。
+
+Figma MCP 返回的 localhost 资源链接可直接下载使用。
+
+### 第 4 步: 创建组件文件
+
+在 `src/views/land/components/` 下创建新的 `.vue` 文件。
+
+**必须遵循的组件结构:**
+
+```vue
+<template>
+  <div class="mobilePage" @click="pageClick">
+    <!-- 顶部固定区域 -->
+    <div class="headerBox" @click.stop="getApkInfo(os.isPhone && switchData.shopIosDownUrl ? 'shopIos' : true, $event)">
+      <div class="header-bg"></div>
+    </div>
+
+    <!-- 主体内容区 -->
+    <div class="main">
+      <!-- Figma 设计内容转换到这里 -->
+    </div>
+
+    <!-- 社交浮窗 -->
+    <div class="floatingBox" v-if="configs && configs.length">
+      <div class="telegram" v-if="cTg" @click="jumpUrl(cTg)"></div>
+      <div class="potato" v-if="cPotato" @click="jumpUrl(cPotato)"></div>
+      <div class="business" v-if="cBusiness" @click="jumpUrl(cBusiness)"></div>
+      <div class="channel" v-if="cChannel" @click="jumpUrl(cChannel)"></div>
+    </div>
+
+    <!-- 下载按钮区 -->
+    <div class="bottomBox" @click.stop="getApkInfo(true, $event)"></div>
+
+    <!-- 安卓/iOS 提示弹窗 -->
+    <van-overlay :show="androidPromptShow" z-index="999" class="androidOverlay">
+      <!-- ... -->
+    </van-overlay>
+    <van-overlay :show="iosPromptShow" z-index="999" class="iosOverlay">
+      <!-- ... -->
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+import { landingPageClick } from "@/utils/eventTracker";
+export default {
+  props: ["os", "configs", "switchData"],
+  data() {
+    return {
+      androidPromptShow: false,
+      iosPromptShow: false,
+      showTip: false,
+      currUrl: window.location.href,
+      cTg: "",
+      cPotato: "",
+      cBusiness: "",
+      cChannel: "",
+      showIosTip: true,
+    };
+  },
+  watch: {
+    configs(configs) {
+      configs.forEach((item) => {
+        if (item.configType === "tg_group") this.cTg = item.link;
+        else if (item.configType === "potato_group") this.cPotato = item.link;
+        else if (item.configType === "sw_cooperate") this.cBusiness = item.link;
+        else if (item.configType === "qd_cooperate") this.cChannel = item.link;
+      });
+    },
+  },
+  methods: {
+    pageClick(event) {
+      landingPageClick(this, {
+        tab_key: "main",
+        tab_name: "主页",
+        click_coordinates_x: event.clientX,
+        click_coordinates_y: event.clientY,
+      });
+    },
+    doCopy() {
+      this.$copyText(this.currUrl).then(() => { this.showTip = false; });
+    },
+    async showInstallTutorial(type) {
+      if (type === "ios") this.iosPromptShow = true;
+      else this.androidPromptShow = true;
+    },
+    async getApkInfo(flag, event) {
+      let type = this.os.isPhone ? "ios" : "android";
+      if (flag === "shopIos") type = "shopIos";
+      if (flag === "androidSpare") type = "androidSpare";
+      if (flag && flag !== "shopIos") await this.showInstallTutorial(type);
+      this.$emit("recordClick", type);
+      setTimeout(() => { this.$emit("getApkInfo", type); }, 500);
+      landingPageClick(this, {
+        tab_name: "下载按钮",
+        tab_key: "download",
+        click_coordinates_x: event.clientX,
+        click_coordinates_y: event.clientY,
+      });
+    },
+    jumpUrl(url) { window.open(url); },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 样式使用 SCSS + scoped，px 值基于 375 设计稿 */
+</style>
+```
+
+### 第 5 步: 样式转换要点
+
+将 Figma 设计数据转为 SCSS 时注意:
+
+1. **尺寸**: 基于 375px 设计稿直接写 px，px2rem 自动转换
+2. **颜色**: 使用 Figma 给出的精确色值
+3. **图片**: 大面积背景用 webp 格式，图标用 png
+4. **字体**: Figma 字体映射到系统字体栈
+5. **布局**: 优先 Flex 布局，配合 `position: fixed` 实现吸顶/吸底
+6. **Vant 组件覆写**: 使用 `::v-deep` 覆盖 Vant 默认样式
+7. **PC 端样式**: 选择器加 `pcm` 前缀以避免 px2rem 转换
+
+### 第 6 步: 注册组件
+
+在 `src/views/land/index.vue` 中导入并注册新模板:
+
+```js
+import mobileN from "./components/mobileN";
+// 在 components 中注册
+```
+
+并在模板切换逻辑中添加对应条件。
+
+### 第 7 步: 验证
+
+- [ ] 视觉与 Figma 截图对比一致
+- [ ] 移动端/PC 端分别测试
+- [ ] 下载按钮、社交链接、弹窗功能正常
+- [ ] 事件追踪正常上报
+- [ ] 图片资源加载无误
+
+## Figma 到 Vue 映射参考
+
+| Figma 属性 | Vue/SCSS 对应 |
+|------------|--------------|
+| Auto Layout (横向) | `display: flex` |
+| Auto Layout (纵向) | `display: flex; flex-direction: column` |
+| Fill 颜色 | `background-color: #xxx` |
+| 图片 Fill | `background: url("...") no-repeat; background-size: 100% 100%` |
+| 固定位置 | `position: fixed` |
+| 圆角 | `border-radius: Npx` |
+| 文字样式 | `font-size`, `font-weight`, `line-height`, `color` |
+| 阴影 | `box-shadow` |
+| 间距 (Gap) | `gap: Npx` 或 `margin`/`padding` |
+| 透明度 | `opacity` 或 `rgba()` |