前端

frontend/.cursorules/design.md

@@ -0,0 +1,63 @@
+# 胶卷风格AI工具设计规范（二次创适用版）
+
+
+## **核心风格定位**  
+「复古胶片暗调+现代代工具极简感」，以黑色基底为核心，叠加入胶片颗粒肌理，整体视觉克制而有质感，突出「剪辑工具的专业感」与「胶卷复古的氛围感」，避免与现有工具同质化。
+
+
+## **1. 颜色规范**  
+- **主色**：  
+  - 背景：#0D0D0D（深黑，带1%青灰调，区别纯黑）  
+  - 主功能色：#00B030（低饱和苔藓绿，用于按钮/选中态，与已知品牌色差异明显）  
+- **辅助色**：  
+  - 交互蓝：#1A66E0（用于预览/保存等次级操作）  
+  - 强调橙：#FF6A30（用于标记点/警告，低明度避免刺眼）  
+- **中性色**：  
+  - 模块底：#1A1A1A（比背景亮5%，区分层级）  
+  - 文本：#F2F2F2（正文）、#CCCCCC（次要文本）  
+  - 边框：#333333（1px细线条，弱化割裂感）  
+
+
+## **2. 质感与阴影**  
+- **肌理**：全局叠加原创胶片颗粒（3%灰度噪点，随机生成，非真实胶卷扫描图）  
+- **阴影**：  
+  - 卡片/模块：内阴影（0 2px 4px rgba(0,0,0,0.4)），无外阴影  
+  - 按钮hover：轻微发光（0 0 6px rgba(0,176,48,0.3)，主色低饱和光晕）  
+
+
+## **3. 图标选型**  
+- **风格**：线性几何风，线条粗细1.5px，圆角2px  
+- **载体**：统一使用 SVG（图标文件与 SVG Sprite/Icon 组件），禁止使用位图作为图标  
+- **禁用**：避免使用与知名剪辑工具高度相似的图标（如剪映、Pr的标志性符号）  
+
+
+## **4. 卡片规范**  
+- **形态**：圆角6px（非直角/大圆角），边框1px #333333  
+- **内容区**：内边距16px，底部可加「胶片式参数条」（黑底白字小文本，如“1080p | 30fps”，纯装饰）  
+- **状态**：  
+  - 活跃态：边框改为主色#00B030  
+  - hover态：背景色加深至#161616  
+
+
+## **5. 布局规范**  
+- **整体结构**：顶部导航（高52px）+ 左侧功能栏（宽60px图标/200px展开）+ 主内容区（占比70%）+ 右侧参数面板（占比30%）  
+- **间距**：模块间margin 20px，元素内padding 12-16px，避免拥挤  
+- **移动端**：左侧栏转为底部悬浮按钮组（4个核心功能+居中主按钮）  
+
+
+## **6. 标题与文本**  
+- **标题**：字体「Montserrat」（半粗体，20px），字间距0.5px，颜色#F2F2F2  
+- **正文**：字体「Inter」（常规，14px），行高1.5，颜色#F2F2F2  
+- **辅助文本**：字体「Inter」（常规，12px），颜色#CCCCCC  
+
+
+## **7. 设计提示词（供生成式设计/插画参考）**
+- **总体风格**：复古胶片暗调、现代极简 UI、低饱和高级质感、专业剪辑工具氛围、控色节制  
+- **质感**：微颗粒胶片噪点（3% 灰度随机）、内阴影层次、金属磨砂、磨光边缘  
+- **配色**：深黑 #0D0D0D 背景、模块底 #1A1A1A、主色 #00B030、交互蓝 #1A66E0、强调橙 #FF6A30、细边界 #333333  
+- **光影**：按钮 Hover 轻微发光（0 0 6px rgba(0,176,48,0.3)）、卡片内阴影（inset 0 2px 4px rgba(0,0,0,0.4)）  
+- **形态**：圆角 6px、1px 细边、紧凑留白（内边距 12–16px，模块间距 20px）  
+- **图标**：线性几何、1.5px 描边、统一 SVG、避免品牌相似符号  
+- **插画/装饰**：暗色渐变+噪点、胶片孔洞/标尺式细节可点缀，勿喧宾夺主  
+- **可用性**：高对比可读性、色弱可访问、交互状态清晰（禁用/加载/选中）  
+

frontend/.cursorules/vue.md

@@ -0,0 +1,87 @@
+---
+description: 现代 Web 应用中的 Vue.js 最佳实践与模式
+globs: **/*.vue, **/*.ts, components/**/*
+---
+
+# Vue.js 最佳实践
+
+## 组件结构
+- 优先使用组合式 API 而非选项式 API
+- 保持组件小巧且功能专注
+- 采用恰当的 TypeScript 集成方案
+- 实现规范的 props 验证
+- 使用标准的 emit 声明
+- 保持模板逻辑简洁
+- 优先使用template 语法，而不是函数组件
+
+## 组合式 API
+- 正确使用 ref 与 reactive
+- 合理实现生命周期钩子
+- 通过组合式函数封装可复用逻辑
+- 保持 setup 函数整洁
+- 规范使用计算属性
+- 合理实现侦听器
+
+## 状态管理
+- 使用 Pinia 进行状态管理
+- 保持仓库模块化
+- 采用合理的状态组织方式
+- 规范实现操作逻辑
+- 正确使用获取器
+- 妥善处理异步状态
+
+## 性能优化
+- 实现组件懒加载
+- 配置恰当的缓存策略
+- 高效使用计算属性
+- 避免不必要的侦听器
+- 区分使用 v-show 与 v-if
+- 实现科学的 key 管理
+
+## 路由管理
+- 规范使用 Vue Router
+- 实现完整的导航守卫
+- 合理配置路由元字段
+- 正确处理路由参数
+- 实现路由懒加载
+- 使用标准的导航方法
+
+## 表单处理
+- 正确使用 v-model
+- 实现完善的验证机制
+- 规范处理表单提交
+- 展示合理的加载状态
+- 配置完整的错误处理
+- 实现表单重置功能
+
+## TypeScript 集成
+- 使用规范的组件类型定义
+- 实现完整的 props 类型声明
+- 规范 emit 类型声明
+- 处理类型推断
+- 使用标准的组合函数类型
+- 实现完整的仓库类型定义
+
+## 测试策略
+- 编写规范的单元测试
+- 实现完整的组件测试
+- 正确使用 Vue Test Utils
+- 全面测试组合式函数
+- 实现科学的模拟机制
+- 测试异步操作流程
+
+## 开发规范
+- 遵循 Vue 样式指南
+- 使用统一的命名约定
+- 保持组件结构清晰
+- 实现完整的错误处理
+- 规范事件处理机制
+- 为复杂逻辑添加文档注释
+
+## 构建与工具链
+- 使用 Vite 进行开发
+- 配置完整的构建方案
+- 规范使用环境变量
+- 实现代码分割方案
+- 正确处理静态资源
+- 配置完整的优化策略