Skip to content

AGENTS.md

Latest commit

 

History

History
77 lines (63 loc) · 3.21 KB

AGENTS.md

File metadata and controls

77 lines (63 loc) · 3.21 KB
Raw

AFunDog 个人网站 — 智能体协作规范

1. 核心原则

  • 设计风格：构成主义 × 极简主义，红/黑/白 + 橙色强调（#f7630c）
  • 技术栈：Vue 3 Composition API + <script setup lang="ts"> + Tailwind CSS 4
  • 所有颜色值必须引用 CSS 变量，禁止硬编码（如 #fff、#000）
  • 所有图片必须使用 ImageLoader 组件（带加载进度和淡入效果）
  • 所有外部链接使用 OutsideWebLinkButton 组件（含 target="_blank" rel="noopener noreferrer"）

2. 代码约定

2.1 Vue 组件

  • 使用 <script setup lang="ts">，禁止 Options API
  • Props 用 defineProps<T>() 或 withDefaults(defineProps<Props>(), { ... })
  • Emits 用 defineEmits<{ (e: 'name'): void }>()
  • CSS 使用 <style scoped>，避免全局污染
  • 类名合并使用 cn() 工具函数（clsx + tailwind-merge）

2.2 CSS 变量系统

--accent-color: #f7630c       /* 强调色 — 所有交互元素 */
--theme-color: #e67e22         /* 主题色 — 次要装饰 */
--foreground-color             /* 文字颜色（主题自动切换） */
--background-color             /* 背景色（主题自动切换） */
--ease-out-expo                /* 统一运动曲线 */
--global-border-radius*        /* 圆角系列 */
--shadow-*                     /* 阴影系列 */

2.3 动画规范

  • 路由过渡使用对角运动：translate(±5%, ±5%) scale(0.97) + opacity
  • 所有动画使用 var(--ease-out-expo) 曲线
  • 滚动入场使用 useScrollAnimation composable
  • 点击涟漪使用 useRipple composable
  • 避免在动画中使用 width/height（触发布局重排）
  • html { overflow-y: scroll; } 保持滚动条稳定

2.4 路由

  • 所有页面使用 () => import() 懒加载
  • 路由 meta 包含 icon、title、pageIndex、pageLabel
  • 动态标题通过 router.afterEach 设置
  • 404 路由被 NavBar 过滤（meta.title !== '404'）

2.5 Live2D

  • 使用 l2d-widget 库，位置 bottom-left
  • 模型路径：/live2d/anon/casual-2023/model.json
  • model.json 中必须有顶层 "idle" 键，引擎才能播放待机动作

3. 智能体行为约束

  • 修改代码前先阅读相关文件的完整内容
  • 新增功能需遵循现有设计风格和代码模式
  • 颜色/样式变更需使用 CSS 变量，不得引入新的硬编码色值
  • 新增组件需在 src/components/ 下创建，遵循现有命名和结构
  • 新增页面需在 src/views/ 下创建，并在 src/router.ts 注册懒加载路由
  • 构建前验证 npm run build 通过

4. 目录结构速览

src/
├── App.vue                # 根组件（布局、过渡、背景、Live2D）
├── main.ts                # 入口
├── router.ts              # 路由配置
├── components/            # 公共组件
├── composables/           # 组合式函数
├── css/                   # 全局样式
├── lib/                   # 工具库（theme、tools、live2d）
└── views/                 # 页面组件

5. 构建与部署

  • npm run dev — 开发服务器（localhost:5173）
  • npm run build — TypeScript 检查 + 构建
  • 部署：Cloudflare Pages（自动）/ GitHub Actions（推送 v* tag）