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>
60 lines
2.1 KiB
Markdown
60 lines
2.1 KiB
Markdown
# P8→NS1/RNS1 缺失项 #12：筛选项的动画效果
|
||
|
||
## 简要结论
|
||
- 状态：✅ 已解决
|
||
- 风险等级：🟡 低
|
||
- filter-dropdown 组件已实现展开/收起动画，包括面板滑入、箭头旋转、遮罩层
|
||
|
||
## 详细审查
|
||
|
||
### 审查范围
|
||
- `apps/miniprogram/miniprogram/components/filter-dropdown/filter-dropdown.ts`
|
||
- `apps/miniprogram/miniprogram/components/filter-dropdown/filter-dropdown.wxml`
|
||
- `apps/miniprogram/miniprogram/components/filter-dropdown/filter-dropdown.wxss`
|
||
|
||
### 发现
|
||
1. **面板展开/收起动画已实现**：WXSS 中 `.dropdown-panel` 使用 `opacity` + `transform: translateY` 过渡动画，展开时从上方滑入（0.25s ease）
|
||
2. **箭头旋转动画已实现**：`.filter-arrow` 使用 `transform: rotate(180deg)` + `transition: 0.25s ease` 实现展开时箭头翻转
|
||
3. **遮罩层已实现**：展开时显示半透明黑色遮罩 `rgba(0, 0, 0, 0.5)`，点击遮罩关闭下拉
|
||
4. **按钮状态变化已实现**：展开时按钮边框变为主色调 `--color-primary`，背景变为浅色 `--color-primary-light`，有 0.2s 过渡
|
||
5. **面板定位动态计算**：展开时通过 `createSelectorQuery` 计算按钮底部位置，面板从该位置展开
|
||
|
||
### 证据
|
||
|
||
WXSS 动画定义：
|
||
```css
|
||
/* 面板展开/收起动画 */
|
||
.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 动画触发：
|
||
```xml
|
||
<view class="dropdown-panel {{expanded ? 'dropdown-panel--show' : ''}}" style="top: {{panelTop}}px">
|
||
```
|
||
|
||
### 建议
|
||
无。动画效果已完整实现，包含面板滑入（opacity + translateY）、箭头旋转（rotate 180deg）、按钮状态变化（border-color + background-color），均使用 CSS transition 实现，性能良好。
|