feat(ecosystem): 小程序启动屏 + 应用堆栈系统重构 #144
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create MiniappSplashScreen component with theme-based glow rendering - Use CSS module for component styles (new convention) - Support themeColor extraction from hex/rgb/oklch/hsl formats - Generate analogous colors for three-layer glow effect - Add comprehensive unit tests (17 tests) - Add Storybook stories with real DOM tests - Include accessibility attributes (role, aria-label)
- Create types.ts with MiniappInstance, FlipFrames, and runtime state types - Create flip-animator.ts for FLIP animation calculations - Create iframe-manager.ts for iframe lifecycle (4 max background) - Create index.ts with store, actions, and selectors - Support launch/activate/deactivate/close app lifecycle - Support DOM ref registration for icons and window - Add FLIP animation playback with Web Animations API - Add gesture-controlled animation support - Add unit tests for flip-animator
- Update EcosystemSubPage type to include 'stack' - Add ECOSYSTEM_SUBPAGE_INDEX and ECOSYSTEM_INDEX_SUBPAGE mappings - Create AppStackPage component as third page background - Refactor EcosystemTab with Swiper Parallax module - Share IOSWallpaper across all three pages with -38.2% parallax - Disable sliding to stack page when no running apps - Remove IOSWallpaper from MyAppsPage (now provided by Parallax)
- Create MiniappWindow component as global popover layer - Add miniapp-window.module.css for window styles - Register icon refs in IOSDesktopIcon for FLIP animation - Integrate MiniappWindow in StackflowApp - Update EcosystemTab to use launchApp instead of push Activity - Auto-slide to stack page when launching app - Export MiniappRuntimeEvent type from service
- Create MiniappCapsule component (IconDots + close button) - Update MiniappWindow to not cover bottom TabBar - Use CSS variable --tab-bar-height for layout - Update flip-animator to calculate TabBar height - Replace temporary close button with capsule - Add miniapp-capsule.module.css with backdrop blur styling
- Create MiniappStackCard with swipe-up-to-close gesture - Create MiniappStackView container with Swiper EffectCards - Add swipe-up gesture detection on TabBar ecosystem button - Show running apps indicator (red dot) on ecosystem tab - Integrate stack view in StackflowApp - Export new components from index
- Create EcosystemTabIndicator component with crossfade animation - Show current page icon with dot indicators - Support click to switch pages - Bidirectional sync with Swiper slides - Position above TabBar - Hide stack page when no running apps
- Add guidance on when to use CSS Modules vs Tailwind - Document naming convention: component-name.module.css
- Add swipeToMyAppsPage helper for Swiper page navigation - Replace button clicks with swipe gestures - Add data-testid to IOSDesktopIcon for app icon selection - Update TabBar ecosystem icon logic (IconAppWindowFilled when running apps) - Update E2E screenshots for new UI layout
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
概述
重构小程序启动体验，实现类 macOS/iOS 的应用启动动画，引入「应用堆栈」机制支持多应用管理。
主要变更
1. 启动屏幕组件 (
MiniappSplashScreen)themeColor生成三层光晕渐变（主色 + hue±30° 邻近色）2. miniapp-runtime Service
3. EcosystemTab 三页布局
-38.2%视差）4. 小程序窗口重设计
MiniappWindow全局 Popover 层（不覆盖 TabBar）MiniappCapsule胶囊按钮（更多 + 关闭）5. 层叠视图
MiniappStackCard卡片 + 上滑关闭手势MiniappStackViewSwiper EffectCards6. Tab 指示器
EcosystemTabIndicator双向绑定7. 白皮书更新
新增组件
miniapp-splash-screen.tsx+.module.cssminiapp-window.tsx+.module.cssminiapp-capsule.tsx+.module.cssminiapp-stack-card.tsx+.module.cssminiapp-stack-view.tsx+.module.cssecosystem-tab-indicator.tsx+.module.cssapp-stack-page.tsx新增服务
src/services/miniapp-runtime/- 应用运行时服务测试
提交记录