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
Gaubee
force-pushed
the
feat/miniapp-stack
branch
from
0eb52e1 to
29c5bb0
Compare
- 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
- Use CSS Modules for component styles - Scroll-driven animation: --header-scroll-percent 0% → 60% - Focus-within layer: --header-focus-percent +20% (progressive enhancement) - Date text color: text-foreground - Update best-practices for CSS Modules
…-timeline - Default: use 100% scrolled state for browsers without animation-timeline - @supports: enable scroll-driven animation when supported
- 新增 swiper-sync-context.tsx: Context + Controller 模块实现跨组件 Swiper 同步 - 新增 swiper-sync-demo: Controller 原理展示 + Context 封装展示 - EcosystemTab + TabBar 指示器双向绑定 - 指示器优化: 加宽触摸区域 (h-10 + 负边距)、slidesPerView auto、spaceBetween 间距 - 动态 allowTouchMove 基于 isActive 状态
- 启动屏添加 pointer-events: auto 防止事件穿透 - 胶囊始终显示（包括启动屏期间） - 胶囊容器层 z-index 优化确保可点击 - 启动动画完成后调用 activateApp 关闭启动屏 - 关闭动画失败时直接关闭应用
- 新增 EcosystemDesktop 组件，支持灵活配置（发现页开关、应用堆栈页 auto） - 壁纸宽度自适应页面数量，Parallax 视差效果 - MyAppsPage 支持 showSearch prop，关闭发现页时隐藏搜索框 - EcosystemTabIndicator 松耦合设计，默认从 store 读取状态 - 重构 EcosystemTab 使用新封装组件（~230 行简化到 ~110 行） - iOS icon 样式从 globals.css 移至 my-apps-page.module.css - 添加 scrollbar-none/scrollbar-thin 工具类
- Add MiniappFlow type to runtime types (opening/closing/backgrounding etc) - Add flow field to MiniappInstance, computed synchronously in updateAppState - Add deriveFlow function to compute directional flow from state transitions - Add settleFlow API for UI to notify runtime when animations complete - Refactor MiniappWindow to use runtime flow directly instead of useMiniappFlow hook - Add preparing state with readiness polling before launching - Add miniapp-motion-flow.ts for flow->variant mappings This fixes the first-launch animation issue where flow was computed async via useState+useEffect, causing first frame to render with wrong value.
Gaubee
force-pushed
the
feat/miniapp-stack
branch
from
911ad44 to
99f27fa
Compare
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/- 应用运行时服务测试
提交记录