Neo
6f8f12314f
包含多个会话的累积代码变更： - backend: AI 聊天服务、触发器调度、认证增强、WebSocket、调度器最小间隔 - admin-web: ETL 状态页、任务管理、调度配置、登录优化 - miniprogram: 看板页面、聊天集成、UI 组件、导航更新 - etl: DWS 新任务（finance_area_daily/board_cache）、连接器增强 - tenant-admin: 项目初始化 - db: 19 个迁移脚本（etl_feiqiu 11 + zqyy_app 8） - packages/shared: 枚举和工具函数更新 - tools: 数据库工具、报表生成、健康检查 - docs: PRD/架构/部署/合约文档更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.1 KiB
2.1 KiB
P8→NS1/RNS1 缺失项 #12：筛选项的动画效果
简要结论
- 状态：✅ 已解决
- 风险等级：🟡 低
- filter-dropdown 组件已实现展开/收起动画，包括面板滑入、箭头旋转、遮罩层
详细审查
审查范围
apps/miniprogram/miniprogram/components/filter-dropdown/filter-dropdown.tsapps/miniprogram/miniprogram/components/filter-dropdown/filter-dropdown.wxmlapps/miniprogram/miniprogram/components/filter-dropdown/filter-dropdown.wxss
发现
- 面板展开/收起动画已实现：WXSS 中
.dropdown-panel使用opacity+transform: translateY过渡动画，展开时从上方滑入（0.25s ease） - 箭头旋转动画已实现：
.filter-arrow使用transform: rotate(180deg)+transition: 0.25s ease实现展开时箭头翻转 - 遮罩层已实现：展开时显示半透明黑色遮罩
rgba(0, 0, 0, 0.5)，点击遮罩关闭下拉 - 按钮状态变化已实现：展开时按钮边框变为主色调
--color-primary，背景变为浅色--color-primary-light，有 0.2s 过渡 - 面板定位动态计算：展开时通过
createSelectorQuery计算按钮底部位置，面板从该位置展开
证据
WXSS 动画定义：
/* 面板展开/收起动画 */
.dropdown-panel {
opacity: 0;
transform: translateY(-16rpx);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.dropdown-panel--show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* 箭头旋转动画 */
.filter-arrow {
transition: transform 0.25s ease;
}
.filter-arrow--up {
transform: rotate(180deg);
}
/* 按钮状态过渡 */
.filter-dropdown {
transition: border-color 0.2s, background-color 0.2s;
}
WXML 动画触发：
<view class="dropdown-panel {{expanded ? 'dropdown-panel--show' : ''}}" style="top: {{panelTop}}px">
建议
无。动画效果已完整实现，包含面板滑入（opacity + translateY）、箭头旋转（rotate 180deg）、按钮状态变化（border-color + background-color），均使用 CSS transition 实现，性能良好。