AI 提示词模板

目标清晰，用于简单的小部分代码修改

修改内容
目标：
替换：
内容
注意事项

尽量设置问题的边界，ai 会过度思考

请帮我对接一个新接口，具体要求如下：

【接口信息】
- 接口地址: POST /your-module/list
- 请求参数: cutoffDate(必填), dataType(可选), channel(可选)
- 响应数据: { list: [], total: 0 }

【字段说明】
请求参数：
- cutoffDate: 截止日期，格式 YYYY-MM-DD
- dataType: 数据类型，YTD/QTD/MTD
- channel: 渠道，可选

响应字段：
- id: 唯一标识
- name: 名称
- value: 数值
- rate: 比率

【页面需求】
1. 在 ProductBrand 页面调用此接口
2. 需要日期选择器和筛选下拉框
3. 数据展示在表格中
4. 支持加载状态和空数据提示

请参考项目已有的接口代码风格（如 src/api/productBrand.ts）进行实现。

生成组件的提示词模板

生成组件提示词 

请创建一个 Vue3 + TypeScript 的下拉菜单弹出层组件，要求如下：

## 组件要求
1. **技术栈**: Vue3 Composition API + TypeScript + `<script setup  lang='ts'>`
2. **定位方式**: 使用 `position: fixed` 实现绝对定位，确保弹窗脱离文档流
3. **核心功能**: 
   - 弹出层的打开/关闭/切换功能
   - 遮罩层显示与交互
   - 点击外部自动关闭
   - 响应式位置计算
4. **内容适应性**: 弹窗高度需根据内容动态撑开，支持自适应高度

## 组件结构
1. **DropdownMenu 主组件**:
   - 包含菜单栏插槽
   - 遮罩层（可配置是否显示）
   - 弹出层容器
   - 弹出内容插槽

2. **DropdownItem 菜单项组件**:
   - 可点击的菜单项
   - 状态指示（展开/收起图标）
   - 禁用状态支持

## 技术实现要点
1. **定位与高度计算**:
   - 使用 `getBoundingClientRect()` 计算菜单位置
   - 通过 `scrollHeight` 获取内容实际高度
   - 监听内容变化，动态更新弹窗高度
   - 使用 `MutationObserver` 监控内容 DOM 变化

2. **交互功能**:
   - 点击菜单项切换弹窗状态
   - 点击遮罩层关闭弹窗（可配置）
   - 点击弹窗外区域自动关闭
   - ESC 键关闭弹窗

3. **动画效果**:
   - CSS transition 实现平滑过渡
   - 遮罩层淡入淡出
   - 弹窗滑入滑出效果

4. **类型安全**:
   - 完整的 TypeScript 接口定义
   - Props、Emits、Refs 类型注解
   - 组件实例类型导出

## 样式要求
- 使用 BEM 命名规范
- 弹窗样式：白色背景、阴影、圆角
- 遮罩层：半透明黑色背景
- 菜单项：悬停效果、激活状态样式

## 提供以下代码：
1. DropdownMenu.vue 主组件（完整实现）
2. DropdownItem.vue 菜单项组件（完整实现）
3. 使用示例（包含各种场景演示）

## 额外要求：
- 支持向上/向下两种弹出方向
- 支持自定义最大高度
- 暴露 `open()`、`close()`、`toggle()` 方法
- 提供 `@open`、`@close` 事件监听
- 支持键盘导航和可访问性