+ {/* 空状态提示（调试用，生产环境可移除） */}
+ {!hasRunningApps && (
+
+ )
+}
+
+export default AppStackPage
diff --git a/src/components/ecosystem/discover-page.module.css b/src/components/ecosystem/discover-page.module.css
new file mode 100644
index 00000000..3f60e004
--- /dev/null
+++ b/src/components/ecosystem/discover-page.module.css
@@ -0,0 +1,68 @@
+/* 发现页滚动驱动动画 */
+.discoverPage {
+ --header-height: 120px;
+}
+
+/* 默认样式：不支持 animation-timeline 时使用 100% 滚动状态 */
+.discoverHeader {
+ --header-scroll-percent: 60%;
+ --header-focus-percent: 0%;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ backdrop-filter: blur(24px);
+ background: color-mix(
+ in srgb,
+ var(--background) calc(var(--header-scroll-percent) + var(--header-focus-percent)),
+ transparent
+ );
+ transition: --header-focus-percent 0.2s ease;
+}
+
+/* 渐进增强：支持 animation-timeline 时启用滚动驱动动画 */
+@supports (animation-timeline: scroll()) {
+ /* 注册自定义属性以支持动画插值 */
+ @property --header-scroll-percent {
+ syntax: '
+
+ )}
+ 应用堆栈
+
- {/* BigHeader - sticky，scroll-driven animation */}
-
+
+ {/* BigHeader - sticky，scroll-driven background */}
+
= {
+ title: 'Ecosystem/EcosystemDesktop',
+ component: EcosystemDesktop,
+ parameters: {
+ layout: 'fullscreen',
+ viewport: {
+ defaultViewport: 'mobile1',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/** 完整桌面（发现页 + 我的页 + 应用堆栈页） */
+export const FullDesktop: Story = {
+ render: function FullDesktopStory() {
+ const desktopRef = useRef(null);
+
+ const myApps = mockApps.slice(0, 3).map((app, i) => ({
+ app,
+ lastUsed: Date.now() - i * 1000 * 60 * 60,
+ }));
+
+ const handleAppOpen = useCallback((app: MiniappManifest) => {
+ console.log('Open:', app.name);
+ const manifest: MiniappManifest = { ...app, targetDesktop: 'mine' };
+ desktopRef.current?.slideTo('mine');
+ requestAnimationFrame(() => launchApp(app.id, manifest));
+ }, []);
+
+ return (
+ <>
+ console.log('Detail:', app.name)}
+ onAppRemove={(id) => console.log('Remove:', id)}
+ />
+ {/* 底部指示器（松耦合，自动从 store 读取状态） */}
+ console.log('Open:', app.name)}
+ onAppDetail={(app) => console.log('Detail:', app.name)}
+ onAppRemove={(id) => console.log('Remove:', id)}
+ />
+ (null);
+ const [showDiscoverPage, setShowDiscoverPage] = useState(true);
+ const [showStackPage, setShowStackPage] = useState('auto');
+
+ const myApps = mockApps.map((app, i) => ({
+ app,
+ lastUsed: Date.now() - i * 1000 * 60 * 60,
+ }));
+
+ return (
+ console.log('Open:', app.name)}
+ onAppDetail={(app) => console.log('Detail:', app.name)}
+ onAppRemove={(id) => console.log('Remove:', id)}
+ />
+ (
+ function EcosystemDesktop(props, ref) {
+ const {
+ // 配置
+ showDiscoverPage = true,
+ showStackPage = 'auto',
+ initialPage,
+ // 数据
+ apps,
+ myApps,
+ featuredApps = [],
+ recommendedApps = [],
+ hotApps = [],
+ // 回调
+ onAppOpen,
+ onAppDetail,
+ onAppRemove,
+ } = props;
+
+ const swiperRef = useRef(null);
+ const discoverPageRef = useRef(null);
+ const currentPageRef = useRef('mine');
+
+ // 如果启动了小程序，则强制滑到对应的 targetDesktop（mine/stack）
+ const forcedSubPage = useStore(miniappRuntimeStore, (state) => {
+ if (state.presentations.size === 0) return null;
+
+ const visiblePresentations = Array.from(state.presentations.values()).filter((p) => p.state !== 'hidden');
+ if (visiblePresentations.length === 0) return null;
+
+ const focusedId = state.focusedAppId ?? state.activeAppId;
+ const focusedPresentation = focusedId ? state.presentations.get(focusedId) : null;
+ const targetDesktop =
+ focusedPresentation?.desktop ??
+ (focusedId ? (state.apps.get(focusedId)?.manifest.targetDesktop ?? null) : null);
+
+ const desktopToSubPage = (desktop: string | null | undefined): EcosystemSubPage => {
+ return desktop === 'stack' ? 'stack' : 'mine';
+ };
+
+ if (targetDesktop) return desktopToSubPage(targetDesktop);
+
+ const topmost = visiblePresentations.reduce((acc, cur) => (cur.zOrder > acc.zOrder ? cur : acc));
+ return desktopToSubPage(topmost.desktop);
+ });
+
+ // 监听是否有 stack-target 应用（用于决定是否展示 stack 页）
+ const hasRunningStackApps = useStore(miniappRuntimeStore, miniappRuntimeSelectors.hasRunningStackApps);
+
+ // 计算实际显示的页面
+ const actualShowStackPage = showStackPage === 'auto' ? hasRunningStackApps : showStackPage;
+
+ // 可用页面列表
+ const availablePages = useMemo(() => {
+ const pages: EcosystemSubPage[] = [];
+ if (showDiscoverPage) pages.push('discover');
+ pages.push('mine');
+ if (actualShowStackPage) pages.push('stack');
+ return pages;
+ }, [showDiscoverPage, actualShowStackPage]);
+
+ const pageCount = availablePages.length;
+
+ // 计算初始滑动索引
+ const initialSlideIndex = useMemo(() => {
+ const page = initialPage ?? (showDiscoverPage ? 'discover' : 'mine');
+ const idx = availablePages.indexOf(page);
+ return idx >= 0 ? idx : 0;
+ }, [initialPage, showDiscoverPage, availablePages]);
+
+ // 使用 Swiper 同步 hook
+ const { onSwiper: syncOnSwiper, controlledSwiper } = useSwiperMember('ecosystem-main', 'ecosystem-indicator');
+
+ // 注册主 Swiper
+ const handleMainSwiper = useCallback((swiper: SwiperType) => {
+ swiperRef.current = swiper;
+ syncOnSwiper(swiper);
+
+ const page = availablePages[swiper.activeIndex] ?? 'mine';
+ currentPageRef.current = page;
+ ecosystemActions.setActiveSubPage(page);
+ ecosystemActions.setAvailableSubPages(availablePages);
+ }, [syncOnSwiper, availablePages]);
+
+ // 当可用页面列表变化时，同步到 store，避免指示器与页面不一致
+ useEffect(() => {
+ ecosystemActions.setAvailableSubPages(availablePages);
+ }, [availablePages]);
+
+ // 当有小程序启动时，强制切到 targetDesktop 所在页
+ useEffect(() => {
+ if (!forcedSubPage) return;
+ if (currentPageRef.current === forcedSubPage) return;
+
+ const idx = availablePages.indexOf(forcedSubPage);
+ if (idx < 0) return;
+ swiperRef.current?.slideTo(idx);
+ }, [forcedSubPage, availablePages]);
+
+ // 更新进度到 Store
+ const handleProgress = useCallback((_: SwiperType, progress: number) => {
+ ecosystemActions.setSwiperProgress(progress * (pageCount - 1));
+ }, [pageCount]);
+
+ // Swiper 滑动事件
+ const handleSlideChange = useCallback((swiper: SwiperType) => {
+ const newPage = availablePages[swiper.activeIndex] ?? 'mine';
+ currentPageRef.current = newPage;
+ ecosystemActions.setActiveSubPage(newPage);
+ }, [availablePages]);
+
+ // 搜索胶囊点击：滑到发现页 + 聚焦搜索框
+ const handleSearchClick = useCallback(() => {
+ if (!showDiscoverPage) return;
+ const discoverIndex = availablePages.indexOf('discover');
+ if (discoverIndex >= 0) {
+ swiperRef.current?.slideTo(discoverIndex);
+ setTimeout(() => discoverPageRef.current?.focusSearch(), 300);
+ }
+ }, [showDiscoverPage, availablePages]);
+
+ // 暴露控制句柄
+ useImperativeHandle(ref, () => ({
+ slideTo: (page: EcosystemSubPage) => {
+ const idx = availablePages.indexOf(page);
+ if (idx >= 0) swiperRef.current?.slideTo(idx);
+ },
+ focusSearch: () => {
+ if (showDiscoverPage) {
+ discoverPageRef.current?.focusSearch();
+ }
+ },
+ getCurrentPage: () => currentPageRef.current,
+ getSwiper: () => swiperRef.current,
+ }), [availablePages, showDiscoverPage]);
+
+ // 精选应用第一个
+ const featuredApp = featuredApps[0];
+
+ return (
+ (arr: T[]): T {
- return arr[Math.floor(Math.random() * arr.length)];
+ return arr[Math.floor(Math.random() * arr.length)]!;
}
function getMsUntilNextHour(): number {
@@ -31,9 +31,10 @@ function getMsUntilNextHour(): number {
export interface IOSWallpaperProps {
className?: string;
children?: React.ReactNode;
+ variant?: WallpaperVariant;
}
-export function IOSWallpaper({ className, children }: IOSWallpaperProps) {
+export function IOSWallpaper({ className, children, variant: forcedVariant }: IOSWallpaperProps) {
const theme = useStore(preferencesStore, (s) => s.theme);
const isDark = resolveIsDark(theme);
const [isAnimating, setIsAnimating] = useState(false);
@@ -44,7 +45,7 @@ export function IOSWallpaper({ className, children }: IOSWallpaperProps) {
light: pickRandom(lightWallpapers),
}), []);
- const variant = isDark ? selectedWallpapers.dark : selectedWallpapers.light;
+ const variant = forcedVariant ?? (isDark ? selectedWallpapers.dark : selectedWallpapers.light);
// 整点报时动画
useEffect(() => {
diff --git a/src/components/ecosystem/miniapp-capsule.module.css b/src/components/ecosystem/miniapp-capsule.module.css
new file mode 100644
index 00000000..8fd5e463
--- /dev/null
+++ b/src/components/ecosystem/miniapp-capsule.module.css
@@ -0,0 +1,132 @@
+/**
+ * MiniappCapsule 胶囊按钮样式
+ *
+ * 模拟微信小程序的胶囊按钮设计
+ */
+
+.widgetContainer {
+ position: fixed;
+ top: max(env(safe-area-inset-top, 0px), 8px);
+ right: 8px;
+ z-index: 20;
+
+ /* 确保子元素重叠 */
+ display: grid;
+ place-items: center;
+}
+.glassBg {
+ /* 绝对定位铺满 */
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 8px;
+
+ /* 这里的反转是为了让底板跟背景拉开反差 */
+ backdrop-filter: invert(1) grayscale(1);
+ background: rgba(255, 255, 255, 0.1); /* 极淡的背景 */
+ z-index: 0;
+}
+
+.capsule {
+ display: flex;
+ align-items: center;
+ height: 32px;
+ padding: 0 4px;
+
+ /* 胶囊外观 */
+ border: 0.5px solid transparent;
+ border-radius: 16px;
+
+ /* 阴影 */
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.themeDark {
+ color: rgba(255, 255, 255, 0.92);
+ background: rgba(0, 0, 0, 0.22);
+ border-color: rgba(0, 0, 0, 0.16);
+ backdrop-filter: blur(20px) saturate(180%);
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+.themeLight {
+ color: rgba(0, 0, 0, 0.82);
+ background: rgba(255, 255, 255, 0.36);
+ border-color: rgba(255, 255, 255, 0.22);
+ backdrop-filter: blur(20px) saturate(180%);
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+.themeAuto {
+ /* 1. 容器样式：制造一个反色的“玻璃板” */
+ backdrop-filter: invert(1) grayscale(1.1) contrast(20);
+ background: rgba(255, 255, 255, 0.3); /* 保持轻微透明度 */
+ border: 1px solid rgba(255, 255, 255, 0.2); /* mix-blend-mode边框建议用中性灰，黑白背景都能看见 */
+
+ /* 2. 关键点：让文字颜色永远是背景的“反色” */
+ /* 这里必须设为纯白，配合 difference 模式 */
+ color: #fff;
+ mix-blend-mode: difference;
+}
+
+.themeAuto > * {
+ mix-blend-mode: difference;
+}
+
+.button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 24px;
+ padding: 0;
+ margin: 0;
+
+ background: transparent;
+ border: none;
+ cursor: pointer;
+
+ color: inherit;
+ transition: opacity 0.15s ease;
+}
+
+.button:active {
+ opacity: 0.6;
+}
+
+.icon {
+ width: 18px;
+ height: 18px;
+}
+
+.divider {
+ width: 0.5px;
+ height: 16px;
+ background: currentColor;
+ opacity: 0.22;
+}
+
+.themeAuto .divider {
+ opacity: 0.3;
+}
+
+/* 关闭图标 - 圆圈包围的点 */
+.closeIcon {
+ position: relative;
+ width: 18px;
+ height: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ /* 外圈 */
+ border: 1.5px solid currentColor;
+ border-radius: 50%;
+}
+
+.closeIconInner {
+ width: 8px;
+ height: 8px;
+}
diff --git a/src/components/ecosystem/miniapp-capsule.tsx b/src/components/ecosystem/miniapp-capsule.tsx
new file mode 100644
index 00000000..355e0fe1
--- /dev/null
+++ b/src/components/ecosystem/miniapp-capsule.tsx
@@ -0,0 +1,60 @@
+/**
+ * MiniappCapsule - 小程序胶囊按钮
+ *
+ * 悬浮在小程序窗口右上角的胶囊形按钮组
+ * 包含：多功能按钮（动态图标）+ 关闭按钮
+ */
+
+import { forwardRef } from 'react';
+import { IconDots, IconPointFilled } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
+import type { CapsuleTheme } from '@/services/miniapp-runtime';
+import styles from './miniapp-capsule.module.css';
+
+export interface MiniappCapsuleProps {
+ /** 胶囊主题 */
+ theme?: CapsuleTheme;
+ /** 多功能按钮的自定义图标 */
+ actionIcon?: React.ReactNode;
+ /** 多功能按钮点击回调 */
+ onAction?: () => void;
+ /** 关闭按钮点击回调 */
+ onClose?: () => void;
+ /** 是否显示 */
+ visible?: boolean;
+ /** 自定义类名 */
+ className?: string;
+}
+
+export const MiniappCapsule = forwardRef(function MiniappCapsule(
+ { theme = 'auto', actionIcon, onAction, onClose, visible = true, className },
+ ref,
+) {
+ if (!visible) return null;
+
+ const themeClassName = theme === 'dark' ? styles.themeDark : theme === 'light' ? styles.themeLight : styles.themeAuto;
+
+ return (
+ (
- function MiniappIcon(
- {
- src,
- name = 'App',
- size = 'md',
- customSize,
- badge = 'none',
- shadow = false,
- border = true,
- glass = false,
- loading = false,
- disabled = false,
- className,
- onClick,
- },
- ref
- ) {
- const [imageError, setImageError] = useState(false)
- const [imageLoaded, setImageLoaded] = useState(false)
+export const MiniappIcon = forwardRef(function MiniappIcon(
+ {
+ src,
+ name = 'App',
+ size = 'md',
+ customSize,
+ badge = 'none',
+ shadow = false,
+ border = true,
+ glass = false,
+ loading = false,
+ disabled = false,
+ className,
+ onClick,
+ },
+ ref,
+) {
+ const [imageError, setImageError] = useState(false);
+ const [imageLoaded, setImageLoaded] = useState(false);
- // 计算实际尺寸
- const sizeConfig = MINIAPP_ICON_SIZES[size]
- const actualSize = customSize ?? sizeConfig.size
- const actualRadius = customSize
- ? Math.round(customSize * 0.22)
- : sizeConfig.radius
+ // 计算实际尺寸
+ const sizeConfig = MINIAPP_ICON_SIZES[size];
+ const actualSize = customSize ?? sizeConfig.size;
+ const actualRadius = customSize ? Math.round(customSize * 0.22) : sizeConfig.radius;
- // 阴影类名
- const shadowClass = shadow === true || shadow === 'md'
+ // 阴影类名
+ const shadowClass =
+ shadow === true || shadow === 'md'
? 'shadow-lg shadow-black/10 dark:shadow-black/30'
: shadow === 'sm'
- ? 'shadow-md shadow-black/5 dark:shadow-black/20'
- : shadow === 'lg'
- ? 'shadow-xl shadow-black/15 dark:shadow-black/40'
- : ''
+ ? 'shadow-md shadow-black/5 dark:shadow-black/20'
+ : shadow === 'lg'
+ ? 'shadow-xl shadow-black/15 dark:shadow-black/40'
+ : '';
- // 是否显示占位符
- const showPlaceholder = !src || imageError
+ // 是否显示占位符
+ const showPlaceholder = !src || imageError;
- // 徽章位置和大小（基于图标尺寸）
- const badgeSize = Math.max(16, actualSize * 0.3)
- const badgeOffset = -badgeSize * 0.2
+ // 徽章位置和大小（基于图标尺寸）
+ const badgeSize = Math.max(16, actualSize * 0.3);
+ const badgeOffset = -badgeSize * 0.2;
- return (
+ return (
+
-
{/* 搜索框 */}
diff --git a/src/components/ecosystem/ecosystem-desktop.stories.tsx b/src/components/ecosystem/ecosystem-desktop.stories.tsx
new file mode 100644
index 00000000..d3104559
--- /dev/null
+++ b/src/components/ecosystem/ecosystem-desktop.stories.tsx
@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState, useCallback, useRef } from 'react';
+import { EcosystemDesktop, type EcosystemDesktopHandle } from './ecosystem-desktop';
+import { EcosystemTabIndicator } from './ecosystem-tab-indicator';
+import { SwiperSyncProvider } from '@/components/common/swiper-sync-context';
+import { launchApp } from '@/services/miniapp-runtime';
+import type { MiniappManifest } from '@/services/ecosystem';
+
+// Mock 数据
+const mockApps: MiniappManifest[] = [
+ {
+ id: 'forge',
+ name: '锻造',
+ description: '铸造和管理你的 NFT 资产',
+ icon: '/miniapps/forge/logo.webp',
+ url: 'https://localhost:5182/',
+ version: '1.0.0',
+ themeColor: '#FF6B35',
+ splashScreen: true,
+ sourceName: 'BioChain',
+ sourceIcon: '/logo.webp',
+ },
+ {
+ id: 'teleport',
+ name: '传送',
+ description: '跨链资产转移',
+ icon: '/miniapps/teleport/logo.webp',
+ url: 'https://localhost:5183/',
+ version: '1.0.0',
+ themeColor: '#6366F1',
+ splashScreen: true,
+ sourceName: 'BioChain',
+ sourceIcon: '/logo.webp',
+ },
+ {
+ id: 'market',
+ name: '市场',
+ description: 'NFT 交易市场',
+ icon: '/miniapps/forge/logo.webp',
+ url: 'https://example.com/market',
+ version: '1.0.0',
+ themeColor: '#10B981',
+ sourceName: 'Community',
+ sourceIcon: '/logo.webp',
+ },
+ {
+ id: 'wallet',
+ name: '钱包',
+ description: '数字资产管理',
+ icon: '/miniapps/teleport/logo.webp',
+ url: 'https://example.com/wallet',
+ version: '1.0.0',
+ themeColor: '#F59E0B',
+ sourceName: 'BioChain',
+ sourceIcon: '/logo.webp',
+ },
+];
+
+const meta: Meta{getTodayDate()}
+{getTodayDate()}
+
+
+ desktopRef.current?.slideTo(page)} />
+
+
+ );
+ },
+};
+
+/** 仅我的页（无发现页，无搜索框） */
+export const MyAppsOnly: Story = {
+ render: function MyAppsOnlyStory() {
+ const myApps = mockApps.map((app, i) => ({
+ app,
+ lastUsed: Date.now() - i * 1000 * 60 * 60,
+ }));
+
+ return (
+ <>
+
+
+
+ );
+ },
+};
+
+/** 可配置桌面 */
+export const Configurable: Story = {
+ render: function ConfigurableStory() {
+ const desktopRef = useRef
+ {/* 控制面板 */}
+
+ );
+ },
+};
+
+/** 空状态 */
+export const EmptyState: Story = {
+ render: function EmptyStateStory() {
+ return (
+ <>
+
+
+
+
+
+ {/* 桌面 */}
+
+ {
+ console.log('Open:', app.name);
+ const manifest: MiniappManifest = { ...app, targetDesktop: 'mine' };
+ desktopRef.current?.slideTo('mine');
+ requestAnimationFrame(() => launchApp(app.id, manifest));
+ }}
+ onAppDetail={(app) => console.log('Detail:', app.name)}
+ onAppRemove={(id) => console.log('Remove:', id)}
+ />
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/src/components/ecosystem/ecosystem-desktop.tsx b/src/components/ecosystem/ecosystem-desktop.tsx
new file mode 100644
index 00000000..5a16f8d1
--- /dev/null
+++ b/src/components/ecosystem/ecosystem-desktop.tsx
@@ -0,0 +1,283 @@
+/**
+ * EcosystemDesktop - 生态系统桌面组件
+ *
+ * 灵活配置的三页式桌面：发现页 | 我的页 | 应用堆栈页
+ * 支持动态开关页面，壁纸宽度自适应
+ */
+import { useCallback, useRef, useMemo, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Parallax, Controller } from 'swiper/modules';
+import type { Swiper as SwiperType } from 'swiper';
+import 'swiper/css';
+import { useStore } from '@tanstack/react-store';
+import { useSwiperMember } from '@/components/common/swiper-sync-context';
+import { DiscoverPage, MyAppsPage, IOSWallpaper, type DiscoverPageRef } from '@/components/ecosystem';
+import { AppStackPage } from '@/components/ecosystem/app-stack-page';
+import { MiniappWindowStack } from '@/components/ecosystem/miniapp-window-stack';
+import { ecosystemActions, type EcosystemSubPage } from '@/stores/ecosystem';
+import { miniappRuntimeStore, miniappRuntimeSelectors } from '@/services/miniapp-runtime';
+import type { MiniappManifest } from '@/services/ecosystem';
+
+/** Parallax 视差系数 */
+const PARALLAX_OFFSET = '-38.2%';
+/** 最大页面数量（用于计算壁纸宽度） */
+const MAX_PAGE_COUNT = 3;
+/** Parallax 壁纸宽度：始终按最大页数计算，避免动态变化导致的问题 */
+const PARALLAX_WIDTH = `${100 + (MAX_PAGE_COUNT - 1) * Math.abs(parseFloat(PARALLAX_OFFSET))}%`;
+
+/** 桌面配置 */
+export interface EcosystemDesktopConfig {
+ /** 是否显示发现页（默认 true） */
+ showDiscoverPage?: boolean;
+ /** 是否显示应用堆栈页（默认 'auto'，根据是否有运行中的应用自动判断） */
+ showStackPage?: boolean | 'auto';
+ /** 初始页面（默认根据配置自动选择） */
+ initialPage?: EcosystemSubPage;
+}
+
+/** 桌面数据 */
+export interface EcosystemDesktopData {
+ /** 所有应用列表 */
+ apps: MiniappManifest[];
+ /** 我的应用（带最后使用时间） */
+ myApps: Array<{ app: MiniappManifest; lastUsed: number }>;
+ /** 精选应用 */
+ featuredApps?: MiniappManifest[];
+ /** 推荐应用 */
+ recommendedApps?: MiniappManifest[];
+ /** 热门应用 */
+ hotApps?: MiniappManifest[];
+}
+
+/** 桌面回调 */
+export interface EcosystemDesktopCallbacks {
+ /** 打开应用 */
+ onAppOpen: (app: MiniappManifest) => void;
+ /** 查看应用详情 */
+ onAppDetail: (app: MiniappManifest) => void;
+ /** 移除应用 */
+ onAppRemove: (appId: string) => void;
+}
+
+export interface EcosystemDesktopProps extends EcosystemDesktopConfig, EcosystemDesktopData, EcosystemDesktopCallbacks {}
+
+/** 桌面控制句柄 */
+export interface EcosystemDesktopHandle {
+ /** 滑动到指定页面 */
+ slideTo: (page: EcosystemSubPage) => void;
+ /** 聚焦搜索框（需要发现页可见） */
+ focusSearch: () => void;
+ /** 获取当前页面 */
+ getCurrentPage: () => EcosystemSubPage;
+ /** 获取 Swiper 实例 */
+ getSwiper: () => SwiperType | null;
+}
+
+export const EcosystemDesktop = forwardRef
+
+ {/* Parallax 共享壁纸 */}
+
+
+ )}
+
+ {/* 我的页 */}
+
+
+
+ {/* 应用堆栈页 */}
+ {actualShowStackPage && (
+
+
+ )}
+
+
+ );
+ }
+);
diff --git a/src/components/ecosystem/ecosystem-tab-indicator.module.css b/src/components/ecosystem/ecosystem-tab-indicator.module.css
new file mode 100644
index 00000000..626436ec
--- /dev/null
+++ b/src/components/ecosystem/ecosystem-tab-indicator.module.css
@@ -0,0 +1,77 @@
+/**
+ * EcosystemTabIndicator 指示器样式
+ */
+
+.indicator {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 12px;
+
+ background: transparent;
+ border: none;
+ cursor: pointer;
+
+ transition: opacity 0.15s ease;
+}
+
+.indicator:active {
+ opacity: 0.7;
+}
+
+/* 图标容器 */
+.iconWrapper {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.icon {
+ width: 20px;
+ height: 20px;
+ color: var(--foreground);
+
+ /* Crossfade 动画 */
+ animation: iconFadeIn 0.2s ease-out;
+}
+
+@keyframes iconFadeIn {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* 页面点指示器 */
+.dots {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.dot {
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: var(--muted-foreground);
+ opacity: 0.4;
+
+ transition:
+ opacity 0.2s ease,
+ transform 0.2s ease,
+ background 0.2s ease;
+}
+
+.dotActive {
+ opacity: 1;
+ transform: scale(1.25);
+ background: var(--primary);
+}
diff --git a/src/components/ecosystem/ecosystem-tab-indicator.tsx b/src/components/ecosystem/ecosystem-tab-indicator.tsx
new file mode 100644
index 00000000..6035fc4a
--- /dev/null
+++ b/src/components/ecosystem/ecosystem-tab-indicator.tsx
@@ -0,0 +1,117 @@
+/**
+ * EcosystemTabIndicator - 生态 Tab 页面指示器
+ *
+ * 松耦合设计：
+ * - 默认从 store 读取状态（无需 props）
+ * - 支持外部控制（传入 props 覆盖）
+ */
+
+import { useCallback, useMemo } from 'react'
+import { useStore } from '@tanstack/react-store'
+import { IconApps, IconBrandMiniprogram, IconStack2 } from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+import { ecosystemStore, type EcosystemSubPage } from '@/stores/ecosystem'
+import { miniappRuntimeStore, miniappRuntimeSelectors } from '@/services/miniapp-runtime'
+import styles from './ecosystem-tab-indicator.module.css'
+
+export interface EcosystemTabIndicatorProps {
+ /** 当前页面（可选，默认从 store 读取） */
+ activePage?: EcosystemSubPage
+ /** 切换页面回调（可选，用于外部控制） */
+ onPageChange?: (page: EcosystemSubPage) => void
+ /** 是否有运行中的应用（可选，默认从 store 读取） */
+ hasRunningApps?: boolean
+ /** 自定义类名 */
+ className?: string
+}
+
+/** 页面顺序 */
+const PAGE_ORDER: EcosystemSubPage[] = ['discover', 'mine', 'stack']
+
+/** 页面图标配置 */
+const PAGE_ICONS = {
+ discover: IconApps,
+ mine: IconBrandMiniprogram,
+ stack: IconStack2,
+} as const
+
+/** 页面标签 */
+const PAGE_LABELS = {
+ discover: '发现',
+ mine: '我的',
+ stack: '堆栈',
+} as const
+
+export function EcosystemTabIndicator({
+ activePage: activePageProp,
+ onPageChange,
+ hasRunningApps: hasRunningAppsProp,
+ className,
+}: EcosystemTabIndicatorProps) {
+ // 从 store 读取状态（松耦合）
+ const storeActivePage = useStore(ecosystemStore, (s) => s.activeSubPage)
+ const storeAvailablePages = useStore(ecosystemStore, (s) => s.availableSubPages)
+ const storeHasRunningApps = useStore(miniappRuntimeStore, miniappRuntimeSelectors.hasRunningApps)
+
+ // 使用 props 覆盖 store 值（支持受控模式）
+ const activePage = activePageProp ?? storeActivePage
+ const hasRunningApps = hasRunningAppsProp ?? storeHasRunningApps
+
+ // 计算可用页面
+ const availablePages = useMemo(() => {
+ if (storeAvailablePages?.length) return storeAvailablePages
+ if (hasRunningApps) return PAGE_ORDER
+ return PAGE_ORDER.filter((p) => p !== 'stack')
+ }, [storeAvailablePages, hasRunningApps])
+
+ // 当前页面索引
+ const activeIndex = availablePages.indexOf(activePage)
+
+ // 获取下一页
+ const getNextPage = useCallback(() => {
+ const nextIndex = (activeIndex + 1) % availablePages.length
+ return availablePages[nextIndex]
+ }, [activeIndex, availablePages])
+
+ // 处理点击
+ const handleClick = useCallback(() => {
+ const nextPage = getNextPage()
+ if (nextPage) {
+ onPageChange?.(nextPage)
+ }
+ }, [getNextPage, onPageChange])
+
+ // 当前图标
+ const Icon = PAGE_ICONS[activePage]
+ const label = PAGE_LABELS[activePage]
+
+ return (
+
+ )
+}
+
+export default EcosystemTabIndicator
diff --git a/src/components/ecosystem/index.ts b/src/components/ecosystem/index.ts
index 5d396eb1..5454f607 100644
--- a/src/components/ecosystem/index.ts
+++ b/src/components/ecosystem/index.ts
@@ -35,3 +35,49 @@ export {
IOSWallpaper,
type IOSWallpaperProps,
} from './ios-wallpaper'
+
+export {
+ MiniappSplashScreen,
+ extractHue,
+ generateGlowHues,
+ type MiniappSplashScreenProps,
+} from './miniapp-splash-screen'
+
+export {
+ AppStackPage,
+ type AppStackPageProps,
+} from './app-stack-page'
+
+export {
+ MiniappWindow,
+ type MiniappWindowProps,
+} from './miniapp-window'
+
+export {
+ MiniappCapsule,
+ type MiniappCapsuleProps,
+} from './miniapp-capsule'
+
+export {
+ MiniappStackCard,
+ type MiniappStackCardProps,
+} from './miniapp-stack-card'
+
+export {
+ MiniappStackView,
+ type MiniappStackViewProps,
+} from './miniapp-stack-view'
+
+export {
+ EcosystemTabIndicator,
+ type EcosystemTabIndicatorProps,
+} from './ecosystem-tab-indicator'
+
+export {
+ EcosystemDesktop,
+ type EcosystemDesktopProps,
+ type EcosystemDesktopConfig,
+ type EcosystemDesktopData,
+ type EcosystemDesktopCallbacks,
+ type EcosystemDesktopHandle,
+} from './ecosystem-desktop'
diff --git a/src/components/ecosystem/ios-wallpaper.tsx b/src/components/ecosystem/ios-wallpaper.tsx
index 7a107e51..e86b2b8c 100644
--- a/src/components/ecosystem/ios-wallpaper.tsx
+++ b/src/components/ecosystem/ios-wallpaper.tsx
@@ -18,7 +18,7 @@ function resolveIsDark(theme: 'light' | 'dark' | 'system'): boolean {
}
function pickRandom
+
+
+ {/* 发现页 */}
+ {showDiscoverPage && (
+
+
+
+
+
+
+
+ {/**/}
+
+ );
+});
+
+export default MiniappCapsule;
diff --git a/src/components/ecosystem/miniapp-icon.tsx b/src/components/ecosystem/miniapp-icon.tsx
index bf892182..c7ac06f8 100644
--- a/src/components/ecosystem/miniapp-icon.tsx
+++ b/src/components/ecosystem/miniapp-icon.tsx
@@ -1,10 +1,10 @@
/**
* Miniapp Icon Component
- *
+ *
* 统一的小程序图标渲染组件，遵循 iOS App Icon 设计规范
- *
+ *
* ## 图标规格标准
- *
+ *
* | Size | Dimensions | Border Radius | Use Case |
* |--------|------------|---------------|-----------------------------|
* | xs | 32x32 | 7px | 列表紧凑模式、通知 |
@@ -13,10 +13,10 @@
* | lg | 60x60 | 13px | iOS 桌面风格、网格 |
* | xl | 80x80 | 18px | 详情页、精选卡片 |
* | 2xl | 120x120 | 27px | 大型展示、启动页 |
- *
+ *
* ## 圆角计算公式
* borderRadius = size * 0.22 (iOS 标准比例)
- *
+ *
* ## 设计规范
* - 图标应为正方形
* - 支持 SVG、PNG、WebP 格式
@@ -24,9 +24,9 @@
* - 背景不透明（iOS 风格）
*/
-import { forwardRef, useState } from 'react'
-import { IconApps, IconSparkles } from '@tabler/icons-react'
-import { cn } from '@/lib/utils'
+import { forwardRef, useState } from 'react';
+import { IconApps, IconSparkles } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
// ============================================
// 图标尺寸配置
@@ -38,198 +38,189 @@ export const MINIAPP_ICON_SIZES = {
lg: { size: 60, radius: 13 },
xl: { size: 80, radius: 18 },
'2xl': { size: 120, radius: 27 },
-} as const
+} as const;
-export type MiniappIconSize = keyof typeof MINIAPP_ICON_SIZES
+export type MiniappIconSize = keyof typeof MINIAPP_ICON_SIZES;
// ============================================
// 徽章类型
// ============================================
-export type MiniappBadge = 'beta' | 'new' | 'update' | 'none'
+export type MiniappBadge = 'beta' | 'new' | 'update' | 'none';
// ============================================
// Props
// ============================================
export interface MiniappIconProps {
/** 图标 URL */
- src?: string | null
+ src?: string | null;
/** 应用名称（用于 alt 和占位符） */
- name?: string
+ name?: string;
/** 图标尺寸 */
- size?: MiniappIconSize
+ size?: MiniappIconSize;
/** 自定义尺寸（覆盖 size） */
- customSize?: number
+ customSize?: number;
/** 徽章类型 */
- badge?: MiniappBadge
+ badge?: MiniappBadge;
/** 是否显示阴影 */
- shadow?: boolean | 'sm' | 'md' | 'lg'
+ shadow?: boolean | 'sm' | 'md' | 'lg';
/** 是否显示边框 */
- border?: boolean
+ border?: boolean;
/** 是否为玻璃态背景（用于深色/渐变背景上） */
- glass?: boolean
+ glass?: boolean;
/** 加载状态 */
- loading?: boolean
+ loading?: boolean;
/** 禁用状态 */
- disabled?: boolean
+ disabled?: boolean;
/** 自定义类名 */
- className?: string
+ className?: string;
/** 点击事件 */
- onClick?: () => void
+ onClick?: () => void;
}
// ============================================
// 组件
// ============================================
-export const MiniappIcon = forwardRef
+ {/* 多功能按钮 */}
+
+
+ {/* 分隔线 */}
+
+
+ {/* 关闭按钮 - 使用 IconPointFilled 模拟国内小程序的关闭图标 */}
+
+
+
+ {/* 主图标容器 */}
- size: number
- offset: number
+ type: Exclude;
+ size: number;
+ offset: number;
}
function Badge({ type, size, offset }: BadgeProps) {
@@ -249,17 +240,17 @@ function Badge({ type, size, offset }: BadgeProps) {
bg: 'bg-red-500',
color: 'text-white',
},
- }
+ };
- const config = configs[type]
+ const config = configs[type];
return (
{
/** 图标尺寸，默认 lg */
- size?: MiniappIconSize
+ size?: MiniappIconSize;
/** 应用名称 */
- name: string
+ name: string;
/** 最大行数 */
- maxLines?: 1 | 2
+ maxLines?: 1 | 2;
/** 是否显示名称 */
- showLabel?: boolean
+ showLabel?: boolean;
}
export function MiniappIconWithLabel({
@@ -301,30 +288,17 @@ export function MiniappIconWithLabel({
className,
...iconProps
}: MiniappIconWithLabelProps) {
- const sizeConfig = MINIAPP_ICON_SIZES[size]
-
+ const sizeConfig = MINIAPP_ICON_SIZES[size];
+
// 根据图标尺寸计算字体大小
- const fontSize = Math.max(10, Math.min(13, sizeConfig.size * 0.18))
-
+ const fontSize = Math.max(10, Math.min(13, sizeConfig.size * 0.18));
+
return (
-
- {/* 主图标容器 */}
-
+ );
+});
// ============================================
// 徽章组件
// ============================================
interface BadgeProps {
- type: Exclude
- {/* 加载状态 */}
- {loading && (
- 
setImageLoaded(true)}
- onError={() => setImageError(true)}
- draggable={false}
- />
- )}
-
- {/* 玻璃态高光覆盖层 */}
- {glass && (
- setImageLoaded(true)}
+ onError={() => setImageError(true)}
+ draggable={false}
+ />
+ )}
- {/* 徽章 */}
- {badge !== 'none' && (
-
- )
- }
-)
+
+ {/* 徽章 */}
+ {badge !== 'none' &&
-
-
- )}
-
- {/* 图片 */}
- {src && !imageError && (
-
+ {/* 加载状态 */}
+ {loading && (
+
+ {/* 图片 */}
+ {src && !imageError && (
+
+
- )}
+
+ )}
- {/* 占位符 */}
- {showPlaceholder && !loading && (
-
-
- )}
-
+
+ )}
- {'icon' in config ? (
-
- )
+ );
}
// ============================================
@@ -284,13 +271,13 @@ function Badge({ type, size, offset }: BadgeProps) {
// ============================================
export interface MiniappIconWithLabelProps extends Omit
- = {
+ closed: 'closed',
+ opening: 'open',
+ splash: 'open',
+ opened: 'open',
+ backgrounding: 'open',
+ backgrounded: 'closed',
+ foregrounding: 'open',
+ closing: 'open',
+}
+
+/**
+ * splash-bg 层级（和 iframe 互斥，作为内容层）
+ * - top: 在 iframe 上方，可见（启动中）
+ * - bottom: 在 iframe 下方，隐藏（已打开）
+ * - gone: display:none（后台、已关闭）
+ */
+export const flowToSplashBgLayer: Record = {
+ closed: 'gone',
+ opening: 'top',
+ splash: 'top',
+ opened: 'bottom',
+ backgrounding: 'bottom',
+ backgrounded: 'gone',
+ foregrounding: 'bottom',
+ closing: 'bottom', // 关闭时 splash-bg 不显示，只有 splash-icon 做动画
+}
+
+/**
+ * iframe 层级（和 splash-bg 互斥，作为内容层）
+ * - top: 在 splash-bg 上方，可见（已打开）
+ * - bottom: 在 splash-bg 下方，隐藏（启动中）
+ * - gone: display:none（后台、已关闭）
+ */
+export const flowToIframeLayer: Record = {
+ closed: 'gone',
+ opening: 'bottom',
+ splash: 'bottom',
+ opened: 'top',
+ backgrounding: 'top',
+ backgrounded: 'gone',
+ foregrounding: 'top',
+ closing: 'top', // 关闭时 iframe 保持在上层，通过 opacity 淡出
+}
+
+/**
+ * splash-icon 层级（独立于内容层，只在 opening/closing 时出现做动画）
+ */
+export const flowToSplashIconLayer: Record = {
+ closed: 'gone',
+ opening: 'top',
+ splash: 'top',
+ opened: 'gone',
+ backgrounding: 'gone',
+ backgrounded: 'gone',
+ foregrounding: 'gone',
+ closing: 'top',
+}
+
+export const flowToCapsule: Record = {
+ closed: 'hide',
+ opening: 'show',
+ splash: 'show',
+ opened: 'show',
+ backgrounding: 'show',
+ backgrounded: 'hide',
+ foregrounding: 'show',
+ closing: 'show',
+}
+
+export const flowToCornerBadge: Record = {
+ closed: 'show',
+ opening: 'hide',
+ splash: 'hide',
+ opened: 'hide',
+ backgrounding: 'hide',
+ backgrounded: 'show',
+ foregrounding: 'hide',
+ closing: 'hide',
+}
+
+/**
+ * splash-icon 的 layoutId 是否启用
+ * 只在 opening 和 closing 时启用，做 shared layout 动画
+ */
+export const flowToSplashIconLayoutId: Record = {
+ closed: false,
+ opening: true,
+ splash: false,
+ opened: false,
+ backgrounding: false,
+ backgrounded: false,
+ foregrounding: false,
+ closing: true,
+}
+
+/**
+ * 将 runtime state 映射到稳定态 flow（不包含方向性瞬时态）
+ *
+ * 方向性（opening/backgrounding/foregrounding）由上层根据前后状态推导。
+ */
+export function runtimeStateToStableFlow(state: MiniappState | null): MiniappFlow {
+ if (!state) return 'closed'
+ if (state === 'preparing') return 'closed'
+ if (state === 'launching') return 'opening'
+ if (state === 'splash') return 'splash'
+ if (state === 'active') return 'opened'
+ if (state === 'background') return 'backgrounded'
+ return 'closing'
+}
diff --git a/src/components/ecosystem/miniapp-splash-screen.module.css b/src/components/ecosystem/miniapp-splash-screen.module.css
new file mode 100644
index 00000000..8aab8df2
--- /dev/null
+++ b/src/components/ecosystem/miniapp-splash-screen.module.css
@@ -0,0 +1,176 @@
+/**
+ * MiniappSplashScreen 启动屏幕样式
+ *
+ * 使用基于应用 themeColor 的光晕渲染方案
+ * 参考 ios-wallpaper--rainbow 的实现
+ */
+
+.splashScreen {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ z-index: 10;
+ pointer-events: auto;
+
+ /* 动画状态 */
+ opacity: 1;
+ transition: opacity 0.3s ease-out;
+}
+
+.splashScreen[data-visible="false"] {
+ opacity: 0;
+ pointer-events: none;
+}
+
+/* 光晕背景层 - 使用 CSS 变量动态设置颜色 */
+.glowLayer {
+ position: absolute;
+ inset: -30%;
+ pointer-events: none;
+}
+
+/* 主光晕层 - 主色 */
+.glowPrimary {
+ background: radial-gradient(
+ ellipse 50% 50% at 30% 35%,
+ oklch(0.7 0.2 var(--splash-hue-primary) / 0.4),
+ transparent 70%
+ );
+ mix-blend-mode: normal;
+ filter: blur(40px);
+}
+
+/* 次光晕层 - 邻近色1 (hue + 30) */
+.glowSecondary {
+ background: radial-gradient(
+ ellipse 45% 45% at 70% 65%,
+ oklch(0.65 0.18 var(--splash-hue-secondary) / 0.35),
+ transparent 70%
+ );
+ mix-blend-mode: normal;
+ filter: blur(50px);
+}
+
+/* 第三光晕层 - 邻近色2 (hue - 30) */
+.glowTertiary {
+ background: radial-gradient(
+ ellipse 40% 40% at 50% 20%,
+ oklch(0.75 0.15 var(--splash-hue-tertiary) / 0.3),
+ transparent 70%
+ );
+ mix-blend-mode: normal;
+ filter: blur(45px);
+}
+
+/* 深色模式调整 */
+:global(.dark) .splashScreen {
+ background: oklch(0.15 0.02 var(--splash-hue-primary));
+}
+
+:global(.dark) .glowPrimary {
+ background: radial-gradient(
+ ellipse 50% 50% at 30% 35%,
+ oklch(0.5 0.25 var(--splash-hue-primary) / 0.5),
+ transparent 70%
+ );
+ mix-blend-mode: color-dodge;
+}
+
+:global(.dark) .glowSecondary {
+ background: radial-gradient(
+ ellipse 45% 45% at 70% 65%,
+ oklch(0.45 0.22 var(--splash-hue-secondary) / 0.4),
+ transparent 70%
+ );
+ mix-blend-mode: screen;
+}
+
+:global(.dark) .glowTertiary {
+ background: radial-gradient(
+ ellipse 40% 40% at 50% 20%,
+ oklch(0.55 0.18 var(--splash-hue-tertiary) / 0.35),
+ transparent 70%
+ );
+ mix-blend-mode: screen;
+}
+
+/* 内容区域 */
+.content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+/* 应用图标 */
+.appIcon {
+ width: 5rem;
+ height: 5rem;
+ border-radius: 1.125rem; /* 22% of 80px */
+ overflow: hidden;
+ box-shadow:
+ 0 4px 12px rgba(0, 0, 0, 0.15),
+ 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.appIcon img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* 加载指示器 */
+.spinner {
+ width: 1.5rem;
+ height: 1.5rem;
+ border: 2px solid oklch(0.8 0.1 var(--splash-hue-primary) / 0.3);
+ border-top-color: oklch(0.6 0.2 var(--splash-hue-primary));
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+:global(.dark) .spinner {
+ border-color: oklch(0.4 0.15 var(--splash-hue-primary) / 0.3);
+ border-top-color: oklch(0.7 0.2 var(--splash-hue-primary));
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* 呼吸动画 - 整点报时或加载中 */
+.splashScreen[data-animating="true"] .glowPrimary {
+ animation: glowFloat 5s ease-in-out infinite;
+}
+
+.splashScreen[data-animating="true"] .glowSecondary {
+ animation: glowFloat 6s ease-in-out infinite reverse;
+}
+
+.splashScreen[data-animating="true"] .glowTertiary {
+ animation: glowFloat 4.5s ease-in-out infinite;
+ animation-delay: -1s;
+}
+
+@keyframes glowFloat {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 25% {
+ transform: translate(5%, 5%) scale(1.05);
+ }
+ 50% {
+ transform: translate(-3%, 8%) scale(0.98);
+ }
+ 75% {
+ transform: translate(-5%, -3%) scale(1.02);
+ }
+}
diff --git a/src/components/ecosystem/miniapp-splash-screen.stories.tsx b/src/components/ecosystem/miniapp-splash-screen.stories.tsx
new file mode 100644
index 00000000..947809e5
--- /dev/null
+++ b/src/components/ecosystem/miniapp-splash-screen.stories.tsx
@@ -0,0 +1,329 @@
+import { useState, useEffect } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn, expect, waitFor, within } from '@storybook/test'
+import { MiniappSplashScreen } from './miniapp-splash-screen'
+
+const meta: Meta = {
+ title: 'Ecosystem/MiniappSplashScreen',
+ component: MiniappSplashScreen,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ },
+ decorators: [
+ (Story) => (
+
+
+// 默认紫色主题
+export const Default: Story = {
+ args: {
+ app: {
+ name: '转账助手',
+ icon: 'https://picsum.photos/seed/splash1/200',
+ themeColor: 280, // 紫色
+ },
+ },
+}
+
+// 蓝色主题
+export const BlueTheme: Story = {
+ args: {
+ app: {
+ name: 'DeFi 收益',
+ icon: 'https://picsum.photos/seed/splash2/200',
+ themeColor: 220, // 蓝色
+ },
+ },
+}
+
+// 绿色主题
+export const GreenTheme: Story = {
+ args: {
+ app: {
+ name: '质押挖矿',
+ icon: 'https://picsum.photos/seed/splash3/200',
+ themeColor: 145, // 绿色
+ },
+ },
+}
+
+// 橙色主题
+export const OrangeTheme: Story = {
+ args: {
+ app: {
+ name: 'NFT 市场',
+ icon: 'https://picsum.photos/seed/splash4/200',
+ themeColor: 45, // 橙色
+ },
+ },
+}
+
+// 红色主题
+export const RedTheme: Story = {
+ args: {
+ app: {
+ name: '风险提醒',
+ icon: 'https://picsum.photos/seed/splash5/200',
+ themeColor: 25, // 红色
+ },
+ },
+}
+
+// 使用 hex 颜色
+export const HexColor: Story = {
+ args: {
+ app: {
+ name: '跨链桥',
+ icon: 'https://picsum.photos/seed/splash6/200',
+ themeColor: '#6366f1', // Indigo
+ },
+ },
+}
+
+// 使用 oklch 颜色
+export const OklchColor: Story = {
+ args: {
+ app: {
+ name: '链上投票',
+ icon: 'https://picsum.photos/seed/splash7/200',
+ themeColor: 'oklch(0.6 0.2 180)',
+ },
+ },
+}
+
+// 深色模式
+export const DarkMode: Story = {
+ args: {
+ app: {
+ name: '暗黑钱包',
+ icon: 'https://picsum.photos/seed/splash8/200',
+ themeColor: 280,
+ },
+ },
+ decorators: [
+ (Story) => (
+ setVisible(false)}
+ />
+ )
+}
+
+export const AutoClose: Story = {
+ render: () => (null)
+ const [isDragging, setIsDragging] = useState(false)
+ const [dragOffset, setDragOffset] = useState(0)
+ const [isClosing, setIsClosing] = useState(false)
+
+ // 触摸状态
+ const touchState = useRef({
+ startY: 0,
+ startTime: 0,
+ currentY: 0,
+ })
+
+ const handleTouchStart = useCallback((e: React.TouchEvent) => {
+ const touch = e.touches[0]
+ if (!touch) return
+
+ touchState.current = {
+ startY: touch.clientY,
+ startTime: Date.now(),
+ currentY: touch.clientY,
+ }
+ setIsDragging(true)
+ }, [])
+
+ const handleTouchMove = useCallback((e: React.TouchEvent) => {
+ if (!isDragging) return
+
+ const touch = e.touches[0]
+ if (!touch) return
+
+ touchState.current.currentY = touch.clientY
+ const deltaY = touchState.current.startY - touch.clientY
+
+ // 只允许向上拖动
+ if (deltaY > 0) {
+ setDragOffset(deltaY)
+ }
+ }, [isDragging])
+
+ const handleTouchEnd = useCallback(() => {
+ if (!isDragging) return
+
+ const deltaY = touchState.current.startY - touchState.current.currentY
+ const deltaTime = Date.now() - touchState.current.startTime
+ const velocity = deltaY / deltaTime
+
+ // 判断是否触发关闭
+ const shouldClose = deltaY > SWIPE_UP_THRESHOLD || velocity > SWIPE_VELOCITY_THRESHOLD
+
+ if (shouldClose && deltaY > 0) {
+ setIsClosing(true)
+ // 播放关闭动画后回调
+ setTimeout(() => {
+ onSwipeUp?.()
+ }, 200)
+ } else {
+ // 回弹
+ setDragOffset(0)
+ }
+
+ setIsDragging(false)
+ }, [isDragging, onSwipeUp])
+
+ const handleClick = useCallback(() => {
+ if (!isDragging && dragOffset === 0) {
+ onTap?.()
+ }
+ }, [isDragging, dragOffset, onTap])
+
+ // 卡片样式
+ const cardStyle: React.CSSProperties = {
+ transform: isClosing
+ ? 'translateY(-100vh) scale(0.8)'
+ : dragOffset > 0
+ ? `translateY(-${dragOffset}px) scale(${1 - dragOffset * 0.001})`
+ : undefined,
+ opacity: isClosing ? 0 : dragOffset > 0 ? 1 - dragOffset * 0.003 : 1,
+ transition: isDragging ? 'none' : 'transform 0.3s ease, opacity 0.3s ease',
+ }
+
+ return (
+ (null)
+
+ // 获取所有运行中的应用
+ const apps = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getApps) as MiniappInstance[]
+ const activeAppId = useStore(miniappRuntimeStore, (s) => s.activeAppId)
+
+ // 当应用列表变化时，如果没有应用了就关闭视图
+ useEffect(() => {
+ if (visible && apps.length === 0) {
+ onClose?.()
+ closeStackView()
+ }
+ }, [visible, apps.length, onClose])
+
+ // 处理卡片点击 - 激活应用并退出层叠视图
+ const handleCardTap = useCallback((appId: string) => {
+ activateApp(appId)
+ closeStackView()
+ onClose?.()
+ }, [onClose])
+
+ // 处理上滑关闭
+ const handleSwipeUp = useCallback((appId: string) => {
+ closeApp(appId)
+
+ // 如果关闭后还有其他应用，停留在层叠视图
+ // 如果没有应用了，useEffect 会自动关闭视图
+ }, [])
+
+ // 处理滑动切换
+ const handleSlideChange = useCallback((swiper: SwiperType) => {
+ const currentApp = apps[swiper.activeIndex]
+ if (currentApp) {
+ // 只更新选中状态，不激活应用
+ // activateApp 会在点击卡片时调用
+ }
+ }, [apps])
+
+ if (!visible || apps.length === 0) {
+ return null
+ }
+
+ // 找到当前激活应用的索引
+ const initialIndex = apps.findIndex((app) => app.appId === activeAppId)
+
+ return (
+
+
- )
+ );
}
// ============================================
@@ -342,15 +316,15 @@ export function MiniappIconWithLabel({
// ============================================
export interface MiniappIconGridProps {
/** 列数 */
- columns?: 3 | 4 | 5 | 6
+ columns?: 3 | 4 | 5 | 6;
/** 图标尺寸 */
- iconSize?: MiniappIconSize
+ iconSize?: MiniappIconSize;
/** 间距 */
- gap?: 'sm' | 'md' | 'lg'
+ gap?: 'sm' | 'md' | 'lg';
/** 子元素 */
- children: React.ReactNode
+ children: React.ReactNode;
/** 自定义类名 */
- className?: string
+ className?: string;
}
export function MiniappIconGrid({
@@ -364,20 +338,16 @@ export function MiniappIconGrid({
sm: 'gap-2',
md: 'gap-4',
lg: 'gap-6',
- }[gap]
+ }[gap];
return (
{children}
- )
+ );
}
diff --git a/src/components/ecosystem/miniapp-motion-flow.ts b/src/components/ecosystem/miniapp-motion-flow.ts
new file mode 100644
index 00000000..086980c0
--- /dev/null
+++ b/src/components/ecosystem/miniapp-motion-flow.ts
@@ -0,0 +1,130 @@
+import type { MiniappState } from '@/services/miniapp-runtime'
+
+export const MINIAPP_FLOW = [
+ 'closed',
+ 'opening',
+ 'splash',
+ 'opened',
+ 'backgrounding',
+ 'backgrounded',
+ 'foregrounding',
+ 'closing',
+] as const
+
+export type MiniappFlow = (typeof MINIAPP_FLOW)[number]
+
+export type WindowContainerVariant = 'open' | 'closed'
+export type VisibilityVariant = 'show' | 'hide'
+/** 层级变体：top=上层可见，bottom=下层隐藏，gone=display:none */
+export type LayerVariant = 'top' | 'bottom' | 'gone'
+
+export const flowToWindowContainer: Record
+
+ ),
+ ],
+ args: {
+ visible: true,
+ animating: true,
+ onClose: fn(),
+ },
+}
+
+export default meta
+type Story = StoryObj
+
+ ),
+ ],
+}
+
+// 无动画
+export const NoAnimation: Story = {
+ args: {
+ app: {
+ name: '静态启动',
+ icon: 'https://picsum.photos/seed/splash9/200',
+ themeColor: 200,
+ },
+ animating: false,
+ },
+}
+
+// 隐藏状态
+export const Hidden: Story = {
+ args: {
+ app: {
+ name: '隐藏的应用',
+ icon: 'https://picsum.photos/seed/splash10/200',
+ themeColor: 280,
+ },
+ visible: false,
+ },
+}
+
+// 自动关闭演示
+function AutoCloseDemo() {
+ const [visible, setVisible] = useState(true)
+
+ useEffect(() => {
+ const timer = setTimeout(() => setVisible(false), 3000)
+ return () => clearTimeout(timer)
+ }, [])
+
+ return (
+
+
+
+ )
+ },
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement)
+
+ await step('初始状态应该可见', async () => {
+ const splash = canvas.getByTestId('miniapp-splash-screen')
+ await expect(splash).toHaveAttribute('data-visible', 'true')
+ })
+
+ await step('点击按钮切换隐藏', async () => {
+ const btn = canvas.getByTestId('toggle-btn')
+ btn.click()
+
+ await waitFor(() => {
+ const splash = canvas.getByTestId('miniapp-splash-screen')
+ expect(splash).toHaveAttribute('data-visible', 'false')
+ })
+ })
+
+ await step('再次点击切换显示', async () => {
+ const btn = canvas.getByTestId('toggle-btn')
+ btn.click()
+
+ await waitFor(() => {
+ const splash = canvas.getByTestId('miniapp-splash-screen')
+ expect(splash).toHaveAttribute('data-visible', 'true')
+ })
+ })
+ },
+}
+
+// 响应式布局测试
+export const ResponsiveTest: Story = {
+ args: {
+ app: {
+ name: '响应式测试',
+ icon: 'https://picsum.photos/seed/test5/200',
+ themeColor: 280,
+ },
+ },
+ parameters: {
+ viewport: {
+ defaultViewport: 'mobile1',
+ },
+ },
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement)
+
+ await step('移动端视图验证', async () => {
+ const splash = canvas.getByTestId('miniapp-splash-screen')
+ await expect(splash).toBeInTheDocument()
+ })
+ },
+}
diff --git a/src/components/ecosystem/miniapp-splash-screen.test.tsx b/src/components/ecosystem/miniapp-splash-screen.test.tsx
new file mode 100644
index 00000000..ce9e31f4
--- /dev/null
+++ b/src/components/ecosystem/miniapp-splash-screen.test.tsx
@@ -0,0 +1,161 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import {
+ MiniappSplashScreen,
+ extractHue,
+ generateGlowHues,
+} from './miniapp-splash-screen'
+
+describe('MiniappSplashScreen', () => {
+ const defaultApp = {
+ name: 'Test App',
+ icon: 'https://example.com/icon.png',
+ themeColor: '#ff0000',
+ }
+
+ describe('extractHue', () => {
+ it('returns default hue for undefined', () => {
+ expect(extractHue(undefined)).toBe(280)
+ })
+
+ it('handles number input directly', () => {
+ expect(extractHue(120)).toBe(120)
+ expect(extractHue(400)).toBe(40) // normalized
+ expect(extractHue(-30)).toBe(330) // normalized
+ })
+
+ it('extracts hue from hex color', () => {
+ // Red
+ expect(extractHue('#ff0000')).toBe(0)
+ // Green
+ expect(extractHue('#00ff00')).toBe(120)
+ // Blue
+ expect(extractHue('#0000ff')).toBe(240)
+ })
+
+ it('extracts hue from rgb color', () => {
+ expect(extractHue('rgb(255, 0, 0)')).toBe(0)
+ expect(extractHue('rgb(0, 255, 0)')).toBe(120)
+ expect(extractHue('rgb(0, 0, 255)')).toBe(240)
+ })
+
+ it('extracts hue from oklch color', () => {
+ expect(extractHue('oklch(0.6 0.2 30)')).toBe(30)
+ expect(extractHue('oklch(0.5 0.15 280)')).toBe(280)
+ })
+
+ it('extracts hue from hsl color', () => {
+ expect(extractHue('hsl(180, 50%, 50%)')).toBe(180)
+ expect(extractHue('hsl(45, 100%, 75%)')).toBe(45)
+ })
+ })
+
+ describe('generateGlowHues', () => {
+ it('generates three hues with correct offsets', () => {
+ const [primary, secondary, tertiary] = generateGlowHues(100)
+ expect(primary).toBe(100)
+ expect(secondary).toBe(130) // +30
+ expect(tertiary).toBe(70) // -30
+ })
+
+ it('normalizes hues correctly', () => {
+ const [primary, secondary, tertiary] = generateGlowHues(350)
+ expect(primary).toBe(350)
+ expect(secondary).toBe(20) // 350 + 30 = 380 -> 20
+ expect(tertiary).toBe(320) // 350 - 30 = 320
+ })
+
+ it('handles zero hue', () => {
+ const [primary, secondary, tertiary] = generateGlowHues(0)
+ expect(primary).toBe(0)
+ expect(secondary).toBe(30)
+ expect(tertiary).toBe(330) // 0 - 30 = -30 -> 330
+ })
+ })
+
+ describe('rendering', () => {
+ it('renders with correct test id', () => {
+ render(
+ {/* 光晕背景层 */}
+
+
+
+
+ {/* 内容区域 */}
+ {(showIcon || showSpinner) && (
+
+ )
+}
+
+export default MiniappSplashScreen
diff --git a/src/components/ecosystem/miniapp-stack-card.module.css b/src/components/ecosystem/miniapp-stack-card.module.css
new file mode 100644
index 00000000..d8bac753
--- /dev/null
+++ b/src/components/ecosystem/miniapp-stack-card.module.css
@@ -0,0 +1,143 @@
+/**
+ * MiniappStackCard 层叠卡片样式
+ */
+
+.card {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 16px;
+ overflow: hidden;
+ background: var(--card);
+ box-shadow:
+ 0 4px 20px rgba(0, 0, 0, 0.15),
+ 0 0 0 1px rgba(0, 0, 0, 0.05);
+
+ /* 触摸优化 */
+ touch-action: pan-y;
+ user-select: none;
+ -webkit-user-select: none;
+
+ /* 过渡 */
+ transition:
+ transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
+ opacity 0.3s ease,
+ box-shadow 0.2s ease;
+}
+
+.card.active {
+ box-shadow:
+ 0 8px 32px rgba(0, 0, 0, 0.2),
+ 0 0 0 2px var(--primary);
+}
+
+.card.dragging {
+ cursor: grabbing;
+}
+
+.card.closing {
+ pointer-events: none;
+}
+
+/* 卡片头部 */
+.header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ background: var(--card);
+ border-bottom: 1px solid var(--border);
+}
+
+.headerInfo {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.appName {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--foreground);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.appDesc {
+ font-size: 12px;
+ color: var(--muted-foreground);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* 卡片内容 */
+.content {
+ flex: 1;
+ position: relative;
+ background: var(--background);
+}
+
+.iframeWrapper {
+ position: absolute;
+ inset: 0;
+}
+
+.iframePlaceholder,
+.placeholder {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(
+ 135deg,
+ var(--muted) 0%,
+ var(--background) 100%
+ );
+}
+
+/* 上滑提示 */
+.swipeHint {
+ position: absolute;
+ bottom: 8px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 4px 8px;
+ opacity: 0.6;
+}
+
+.swipeIndicator {
+ width: 32px;
+ height: 4px;
+ background: var(--muted-foreground);
+ border-radius: 2px;
+ animation: swipeHintPulse 2s ease-in-out infinite;
+}
+
+@keyframes swipeHintPulse {
+ 0%, 100% {
+ opacity: 0.4;
+ transform: translateY(0);
+ }
+ 50% {
+ opacity: 0.8;
+ transform: translateY(-4px);
+ }
+}
+
+/* 深色模式 */
+:global(.dark) .card {
+ box-shadow:
+ 0 4px 20px rgba(0, 0, 0, 0.4),
+ 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+:global(.dark) .card.active {
+ box-shadow:
+ 0 8px 32px rgba(0, 0, 0, 0.5),
+ 0 0 0 2px var(--primary);
+}
diff --git a/src/components/ecosystem/miniapp-stack-card.tsx b/src/components/ecosystem/miniapp-stack-card.tsx
new file mode 100644
index 00000000..e303766d
--- /dev/null
+++ b/src/components/ecosystem/miniapp-stack-card.tsx
@@ -0,0 +1,186 @@
+/**
+ * MiniappStackCard - 层叠视图中的应用卡片
+ *
+ * 显示单个后台应用的预览卡片
+ * 支持上滑关闭手势
+ */
+
+import { useRef, useState, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+import { MiniappIcon } from './miniapp-icon'
+import type { MiniappInstance } from '@/services/miniapp-runtime'
+import styles from './miniapp-stack-card.module.css'
+
+/** 上滑关闭的阈值（像素） */
+const SWIPE_UP_THRESHOLD = 100
+
+/** 上滑关闭的速度阈值（像素/毫秒） */
+const SWIPE_VELOCITY_THRESHOLD = 0.5
+
+export interface MiniappStackCardProps {
+ /** 应用实例 */
+ app: MiniappInstance
+ /** 是否为当前选中的卡片 */
+ isActive?: boolean
+ /** 点击卡片回调 */
+ onTap?: () => void
+ /** 上滑关闭回调 */
+ onSwipeUp?: () => void
+ /** 自定义类名 */
+ className?: string
+}
+
+export function MiniappStackCard({
+ app,
+ isActive = false,
+ onTap,
+ onSwipeUp,
+ className,
+}: MiniappStackCardProps) {
+ const cardRef = useRef
+ {/* 应用图标 */}
+ {showIcon && (
+
+ {!imageError && (
+ 
setImageLoaded(true)}
+ onError={() => setImageError(true)}
+ style={{ opacity: imageLoaded ? 1 : 0 }}
+ />
+ )}
+
+ )}
+
+ {/* 加载指示器 */}
+ {showSpinner && }
+
+ )}
+
+ {/* 卡片头部 - 应用信息 */}
+
+ )
+}
+
+export default MiniappStackCard
diff --git a/src/components/ecosystem/miniapp-stack-view.module.css b/src/components/ecosystem/miniapp-stack-view.module.css
new file mode 100644
index 00000000..7c80e126
--- /dev/null
+++ b/src/components/ecosystem/miniapp-stack-view.module.css
@@ -0,0 +1,103 @@
+/**
+ * MiniappStackView 层叠视图容器样式
+ */
+
+.container {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: var(--tab-bar-height);
+
+ /* 进入动画 */
+ animation: stackViewEnter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+}
+
+@keyframes stackViewEnter {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* 背景遮罩 */
+.backdrop {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(20px) saturate(180%);
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+/* 标题 */
+.title {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 16px;
+ padding-top: max(env(safe-area-inset-top, 16px), 16px);
+
+ color: white;
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.count {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 20px;
+ height: 20px;
+ padding: 0 6px;
+
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 10px;
+
+ font-size: 12px;
+ font-weight: 500;
+}
+
+/* Swiper 区域 */
+.swiperWrapper {
+ position: relative;
+ z-index: 1;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+.swiper {
+ width: 100%;
+ max-width: 320px;
+ height: 100%;
+ max-height: 480px;
+}
+
+.slide {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 16px;
+ overflow: hidden;
+}
+
+/* 操作提示 */
+.hints {
+ position: relative;
+ z-index: 1;
+ text-align: center;
+ padding: 12px 16px;
+
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 12px;
+}
+
+/* 深色模式 - 已经是深色背景，无需调整 */
diff --git a/src/components/ecosystem/miniapp-stack-view.tsx b/src/components/ecosystem/miniapp-stack-view.tsx
new file mode 100644
index 00000000..30c1e83f
--- /dev/null
+++ b/src/components/ecosystem/miniapp-stack-view.tsx
@@ -0,0 +1,144 @@
+/**
+ * MiniappStackView - 层叠视图容器
+ *
+ * 显示所有运行中的应用卡片
+ * 使用 Swiper 实现左右滑动切换
+ * 支持上滑关闭应用
+ */
+
+import { useCallback, useRef, useEffect } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { EffectCards } from 'swiper/modules'
+import type { Swiper as SwiperType } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/effect-cards'
+import { useStore } from '@tanstack/react-store'
+import { cn } from '@/lib/utils'
+import {
+ miniappRuntimeStore,
+ miniappRuntimeSelectors,
+ activateApp,
+ closeApp,
+ closeStackView,
+} from '@/services/miniapp-runtime'
+import type { MiniappInstance } from '@/services/miniapp-runtime'
+import { MiniappStackCard } from './miniapp-stack-card'
+import styles from './miniapp-stack-view.module.css'
+
+export interface MiniappStackViewProps {
+ /** 是否可见 */
+ visible?: boolean
+ /** 关闭回调（退出层叠视图） */
+ onClose?: () => void
+ /** 自定义类名 */
+ className?: string
+}
+
+export function MiniappStackView({
+ visible = false,
+ onClose,
+ className,
+}: MiniappStackViewProps) {
+ const swiperRef = useRef
+
+
+ {/* 卡片内容 - iframe 预览 */}
+
+ {app.manifest.name}
+ {app.manifest.description}
+
+
+ {app.iframeRef ? (
+
+
+ {/* 上滑提示 */}
+ {isActive && (
+
+ {/* iframe 会由 runtime service 管理，这里只是容器 */}
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+ )}
+
+ {/* 背景遮罩 */}
+ (null)
+ const [desktop, setDesktop] = useState(null)
+
+ const presentations = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getPresentations)
+
+ // 通过 DOM 祖先自识别该层属于 mine 还是 stack
+ useEffect(() => {
+ const root = rootRef.current
+ if (!root) return
+
+ const page = root.closest('[data-ecosystem-subpage]')?.getAttribute('data-ecosystem-subpage') ?? null
+ setDesktop(isTargetDesktop(page) ? page : null)
+ }, [])
+
+ // 注册/注销 grid host ref（便于 runtime 定位）
+ useEffect(() => {
+ const root = rootRef.current
+ if (!root || !desktop) return
+
+ registerDesktopGridHostRef(desktop, root)
+ return () => unregisterDesktopGridHostRef(desktop)
+ }, [desktop])
+
+ const slotPresentations = useMemo(() => {
+ if (!desktop) return []
+ return presentations.filter((p) => p.desktop === desktop && p.state !== 'hidden')
+ }, [desktop, presentations])
+
+ return (
+ ;
+
+// Mock 应用数据
+const mockApps: MiniappManifest[] = [
+ {
+ id: 'gaubee',
+ name: 'Gaubee',
+ description: 'gaubee.com',
+ icon: 'https://gaubee.com/icon-192x192.png',
+ url: 'https://gaubee.com/',
+ version: '1.0.0',
+ themeColor: '#4285F4',
+ splashScreen: true,
+ capsuleTheme: 'auto',
+ },
+ {
+ id: 'wikipedia',
+ name: 'Wikipedia',
+ description: 'The Free Encyclopedia',
+ icon: 'https://www.wikipedia.org/static/favicon/wikipedia.ico',
+ url: 'https://www.wikipedia.org/',
+ version: '1.0.0',
+ themeColor: '#111827',
+ splashScreen: { timeout: 1200 },
+ capsuleTheme: 'auto',
+ },
+ {
+ id: 'kingsword-blog',
+ name: 'Kingsword Blog',
+ description: 'blog.kingsword.tech',
+ icon: 'https://blog.kingsword.tech/favicon.png',
+ url: 'https://blog.kingsword.tech/',
+ version: '1.0.0',
+ themeColor: '#0f172a',
+ capsuleTheme: 'auto',
+ },
+ {
+ id: 'openai',
+ name: 'OpenAI',
+ description: 'Research (no splash)',
+ icon: 'https://openai.com/favicon.ico',
+ url: 'https://openai.com/',
+ version: '1.0.0',
+ themeColor: '#10a37f',
+ },
+];
+
+/** 单独测试启动屏幕 */
+export const SplashScreenOnly: Story = {
+ render: () => (
+
+
+ ),
+ ],
+ render: function LaunchDemoStory() {
+ const desktopRef = useRef(null);
+ const [timeScale, setTimeScale] = useState(1);
+
+ // 清理旧状态
+ useEffect(() => {
+ // 清理之前可能残留的应用状态
+ closeAllApps();
+ resetMiniappVisualConfig();
+ setMiniappMotionTimeScale(1);
+
+ return () => {
+ resetMiniappVisualConfig();
+ };
+ }, []);
+
+ useEffect(() => {
+ setMiniappMotionTimeScale(timeScale);
+ }, [timeScale]);
+
+ const myApps = mockApps.map((app, i) => ({
+ app,
+ lastUsed: Date.now() - i * 1000 * 60 * 60,
+ }));
+
+ const handleAppOpen = (app: MiniappManifest) => {
+ console.log('[LaunchDemo] Opening app:', app.name);
+ // 关键：动画目标来自 targetDesktop 对应 slide 的 rect，因此必须先切到该页
+ const manifest: MiniappManifest = { ...app, targetDesktop: 'mine' };
+ desktopRef.current?.slideTo('mine');
+ requestAnimationFrame(() => launchApp(app.id, manifest));
+ };
+
+ return (
+
+
+ );
+ },
+};
diff --git a/src/components/ecosystem/miniapp-window.tsx b/src/components/ecosystem/miniapp-window.tsx
new file mode 100644
index 00000000..7cf284d5
--- /dev/null
+++ b/src/components/ecosystem/miniapp-window.tsx
@@ -0,0 +1,332 @@
+/**
+ * MiniappWindow - 小程序窗口容器
+ *
+ * 作为 stack-slide 的子元素，用于显示小程序内容
+ * 使用 portal 渲染到 slide 提供的 slot 容器中（尺寸由 desktop/slide 决定）
+ * 无 Popover API 依赖
+ */
+
+import { useEffect, useLayoutEffect, useRef, useCallback, useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { useStore } from '@tanstack/react-store';
+import { cn } from '@/lib/utils';
+import { AnimatePresence, motion } from 'motion/react';
+import {
+ miniappRuntimeStore,
+ miniappRuntimeSelectors,
+ type MiniappInstance,
+ type MiniappPresentation,
+ registerWindowRef,
+ registerWindowInnerRef,
+ getDesktopAppSlotRef,
+ requestDismiss,
+ requestDismissSplash,
+ didDismiss,
+ didPresent,
+ settleFlow,
+} from '@/services/miniapp-runtime';
+import { getMiniappMotionPresets, type MiniappMotionPresets } from '@/services/miniapp-runtime/visual-config';
+import { MiniappSplashScreen } from './miniapp-splash-screen';
+import { MiniappCapsule } from './miniapp-capsule';
+import { MiniappIcon } from './miniapp-icon';
+import {
+ flowToCapsule,
+ flowToSplashBgLayer,
+ flowToSplashIconLayer,
+ flowToIframeLayer,
+ flowToSplashIconLayoutId,
+ flowToWindowContainer,
+} from './miniapp-motion-flow';
+import styles from './miniapp-window.module.css';
+
+export interface MiniappWindowProps {
+ className?: string;
+}
+
+const WINDOW_CONTAINER_VARIANTS = {
+ open: { opacity: 1, pointerEvents: 'auto' },
+ closed: { opacity: 0, pointerEvents: 'none' },
+} as const;
+
+const VISIBILITY_VARIANTS = {
+ show: { opacity: 1, pointerEvents: 'auto' },
+ hide: { opacity: 0, pointerEvents: 'none' },
+} as const;
+
+/**
+ * 层级变体：z-index 和 opacity 联动
+ * top: 上层可见，bottom: 下层隐藏，gone: display:none
+ */
+const LAYER_VARIANTS = {
+ top: { zIndex: 10, opacity: 1, pointerEvents: 'auto' },
+ bottom: { zIndex: 0, opacity: 0, pointerEvents: 'none' },
+ gone: { zIndex: 0, opacity: 0, display: 'none', pointerEvents: 'none' },
+};
+
+export function MiniappWindow({ className }: MiniappWindowProps) {
+ const presentations = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getPresentations);
+ const focusedAppId = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getFocusedAppId);
+ const visualConfig = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getVisualConfig);
+ const motionPresets = getMiniappMotionPresets(visualConfig);
+
+ if (presentations.length === 0) return null;
+
+ return (
+ <>
+ {presentations
+ .filter((p) => p.state !== 'hidden')
+ .map((p) => (
+ (null);
+ const iframeContainerRef = useRef(null);
+ const [presentApp, setPresentApp] = useState(null);
+ const exitScheduledRef = useRef(false);
+ const exitingTransitionIdRef = useRef(null);
+
+ const app = useStore(miniappRuntimeStore, (s) => s.apps.get(appId) ?? null);
+ const isAnimating = useStore(miniappRuntimeStore, (s) => {
+ const a = s.apps.get(appId);
+ return a?.state === 'launching' || a?.state === 'splash' || a?.state === 'closing';
+ });
+
+ const portalHost = getDesktopAppSlotRef(presentation.desktop, appId);
+
+ useLayoutEffect(() => {
+ if (!app) {
+ setPresentApp(null);
+ exitScheduledRef.current = false;
+ return;
+ }
+
+ if (app.state === 'preparing') {
+ setPresentApp(null);
+ exitScheduledRef.current = false;
+ return;
+ }
+
+ if (presentation.state === 'dismissing' || app.state === 'closing') {
+ if (exitScheduledRef.current) return;
+
+ // 先渲染一帧 closing visuals，再触发 exit（layoutId -> icon）
+ setPresentApp(app);
+ exitingTransitionIdRef.current = presentation.transitionId;
+ exitScheduledRef.current = true;
+ requestAnimationFrame(() => setPresentApp(null));
+ return;
+ }
+
+ exitScheduledRef.current = false;
+ setPresentApp(app);
+ }, [app?.appId, app?.state, presentation.state, presentation.transitionId]);
+
+ useEffect(() => {
+ if (!presentApp) return;
+ if (presentation.state !== 'presenting') return;
+ if (presentation.transitionKind !== 'present') return;
+ if (!presentation.transitionId) return;
+ didPresent(appId, presentation.transitionId);
+ }, [appId, presentApp, presentation.state, presentation.transitionKind, presentation.transitionId]);
+
+ const lastFlowRef = useRef('closed');
+ if (presentApp?.flow) {
+ lastFlowRef.current = presentApp.flow;
+ }
+ const flow = presentApp ? presentApp.flow : lastFlowRef.current;
+
+ const handleLayoutAnimationComplete = useCallback(() => {
+ if (presentApp?.appId) {
+ settleFlow(presentApp.appId);
+ }
+ }, [presentApp?.appId]);
+
+ const windowContainerVariant = flowToWindowContainer[flow];
+ const splashBgLayerVariant = flowToSplashBgLayer[flow];
+ const splashIconLayerVariant = flowToSplashIconLayer[flow];
+ const iframeLayerVariant = flowToIframeLayer[flow];
+ const splashIconHasLayoutId = flowToSplashIconLayoutId[flow];
+ const capsuleVariant = flowToCapsule[flow];
+ const isTransitioning = flow === 'opening' || flow === 'closing';
+
+ const appDisplay = useMemo(() => {
+ return {
+ appId: presentApp?.appId ?? '',
+ name: presentApp?.manifest.name ?? '',
+ icon: presentApp?.manifest.icon ?? '',
+ themeColor: presentApp?.manifest.themeColorFrom ?? 280,
+ };
+ }, [presentApp?.appId, presentApp?.manifest.name, presentApp?.manifest.icon, presentApp?.manifest.themeColorFrom]);
+
+ useEffect(() => {
+ if (!portalHost) return;
+ if (windowRef.current) registerWindowRef(windowRef.current);
+ if (iframeContainerRef.current) registerWindowInnerRef(iframeContainerRef.current);
+ }, [portalHost]);
+
+ useEffect(() => {
+ const iframe = presentApp?.iframeRef;
+ const container = iframeContainerRef.current;
+ if (!iframe || !container) return;
+
+ if (iframe.parentElement !== container) {
+ container.appendChild(iframe);
+ }
+
+ if (iframe.style.display === 'none') {
+ iframe.style.display = '';
+ }
+ }, [presentApp?.iframeRef, presentApp?.appId, portalHost]);
+
+ const handleClose = useCallback(() => {
+ requestDismiss(appId);
+ }, [appId]);
+
+ const handleSplashClose = useCallback(() => {
+ requestDismissSplash(appId);
+ }, [appId]);
+
+ if (!portalHost) return null;
+
+ const node = (
+ {
+ const exitingTransitionId = exitingTransitionIdRef.current;
+ if (exitingTransitionId) {
+ didDismiss(appId, exitingTransitionId);
+ }
+ exitingTransitionIdRef.current = null;
+ lastFlowRef.current = 'closed';
+ }}
+ >
+ {presentApp && (
+
+ );
+
+ return createPortal(node, portalHost);
+}
+
+export default MiniappWindow;
diff --git a/src/components/ecosystem/my-apps-page.module.css b/src/components/ecosystem/my-apps-page.module.css
new file mode 100644
index 00000000..041e992e
--- /dev/null
+++ b/src/components/ecosystem/my-apps-page.module.css
@@ -0,0 +1,105 @@
+/**
+ * MyAppsPage 组件样式
+ * iOS Desktop Icon 相关样式（popover + 菜单）
+ */
+
+/* 占位容器 */
+.iconWrapper {
+ position: relative;
+}
+
+/* Popover 基础样式（未打开状态 - 强制可见） */
+.iconPopover {
+ display: block !important;
+ position: static !important;
+ inset: auto !important;
+ margin: 0 !important;
+ background: transparent;
+ border: none;
+ padding: 0;
+ overflow: visible;
+}
+
+/* 菜单模式：popover 打开时固定定位 */
+.iconPopover:popover-open:not([data-launching]) {
+ position: fixed;
+ inset: auto;
+ top: var(--popover-top);
+ left: var(--popover-left);
+ margin: 0;
+ z-index: 50;
+}
+
+/* 菜单模式：::backdrop 背景模糊 */
+.iconPopover:not([data-launching])::backdrop {
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(40px) saturate(180%);
+ -webkit-backdrop-filter: blur(40px) saturate(180%);
+ opacity: var(--backdrop-opacity, 1);
+ transition:
+ opacity calc(0.2s / var(--miniapp-motion-time-scale, 1)) ease-out,
+ backdrop-filter calc(0.2s / var(--miniapp-motion-time-scale, 1)) ease-out,
+ -webkit-backdrop-filter calc(0.2s / var(--miniapp-motion-time-scale, 1)) ease-out,
+ display calc(0.2s / var(--miniapp-motion-time-scale, 1)) ease-out allow-discrete,
+ overlay calc(0.2s / var(--miniapp-motion-time-scale, 1)) ease-out allow-discrete;
+}
+
+@starting-style {
+ .iconPopover:not([data-launching])::backdrop {
+ opacity: 0;
+ backdrop-filter: blur(0) saturate(100%);
+ -webkit-backdrop-filter: blur(0) saturate(100%);
+ }
+}
+
+/* 菜单模式：图标浮起效果 */
+.iconPopover:popover-open:not([data-launching]) .iconButton {
+ transform: scale(1.08) translateY(-4px);
+ filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
+}
+
+/* 启动模式：隐藏 backdrop */
+.iconPopover[data-launching]::backdrop {
+ display: none;
+}
+
+/* 启动模式：禁用图标效果（由 Web Animation API 控制） */
+.iconPopover[data-launching] .iconButton {
+ transform: none !important;
+ filter: none !important;
+}
+
+/* 图标按钮（用于 CSS 选择器定位） */
+.iconButton {
+ /* 基础样式由 Tailwind 提供 */
+}
+
+/* 点击拦截层 */
+.backdropClickArea {
+ background: transparent;
+}
+
+/* 上下文菜单 */
+.contextMenu {
+ z-index: 51;
+ transform-origin: center bottom;
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ transition:
+ opacity calc(0.2s / var(--miniapp-motion-time-scale, 1)) cubic-bezier(0.34, 1.56, 0.64, 1),
+ transform calc(0.25s / var(--miniapp-motion-time-scale, 1)) cubic-bezier(0.34, 1.56, 0.64, 1),
+ display calc(0.25s / var(--miniapp-motion-time-scale, 1)) allow-discrete;
+}
+
+@starting-style {
+ .contextMenu {
+ opacity: 0;
+ transform: scale(0.85) translateY(8px);
+ }
+}
+
+/* 菜单退出动画 */
+.contextMenuClosing {
+ opacity: 0;
+ transform: scale(0.9) translateY(4px);
+}
diff --git a/src/components/ecosystem/my-apps-page.stories.tsx b/src/components/ecosystem/my-apps-page.stories.tsx
index fe9d6857..afb571c9 100644
--- a/src/components/ecosystem/my-apps-page.stories.tsx
+++ b/src/components/ecosystem/my-apps-page.stories.tsx
@@ -11,6 +11,7 @@ const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
name: '转账助手',
description: '快速安全的转账工具',
icon: 'https://picsum.photos/seed/app1/200',
+ url: 'https://example.com/app-1',
version: '1.0.0',
permissions: [],
},
@@ -22,6 +23,7 @@ const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
name: 'DeFi 收益',
description: '一站式 DeFi 收益管理',
icon: 'https://picsum.photos/seed/app2/200',
+ url: 'https://example.com/app-2',
version: '1.0.0',
permissions: [],
},
@@ -33,6 +35,7 @@ const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
name: 'NFT 市场',
description: '发现和交易 NFT',
icon: 'https://picsum.photos/seed/app3/200',
+ url: 'https://example.com/app-3',
version: '1.0.0',
permissions: [],
},
@@ -44,6 +47,7 @@ const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
name: '链上投票',
description: '参与 DAO 治理投票',
icon: 'https://picsum.photos/seed/app4/200',
+ url: 'https://example.com/app-4',
version: '1.0.0',
permissions: [],
},
@@ -55,6 +59,7 @@ const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
name: '跨链桥',
description: '多链资产跨链转移',
icon: 'https://picsum.photos/seed/app5/200',
+ url: 'https://example.com/app-5',
version: '1.0.0',
permissions: [],
},
@@ -66,6 +71,7 @@ const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
name: '质押挖矿',
description: '质押代币获取收益',
icon: 'https://picsum.photos/seed/app6/200',
+ url: 'https://example.com/app-6',
version: '1.0.0',
permissions: [],
},
diff --git a/src/components/ecosystem/my-apps-page.tsx b/src/components/ecosystem/my-apps-page.tsx
index 06ed459d..3014adfc 100644
--- a/src/components/ecosystem/my-apps-page.tsx
+++ b/src/components/ecosystem/my-apps-page.tsx
@@ -1,15 +1,29 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useStore } from '@tanstack/react-store';
import { IconDownload, IconPlayerPlay, IconInfoCircle, IconTrash } from '@tabler/icons-react';
import { cn } from '@/lib/utils';
+import { motion, LayoutGroup } from 'motion/react';
import { MiniappIcon } from './miniapp-icon';
import { SourceIcon } from './source-icon';
import { IOSSearchCapsule } from './ios-search-capsule';
-import { IOSWallpaper } from './ios-wallpaper';
import type { MiniappManifest } from '@/services/ecosystem';
+import { flowToCornerBadge, runtimeStateToStableFlow } from './miniapp-motion-flow';
+import {
+ miniappRuntimeStore,
+ miniappRuntimeSelectors,
+ registerDesktopContainerRef,
+ registerIconRef,
+ registerIconInnerRef,
+ unregisterDesktopContainerRef,
+ unregisterIconRef,
+} from '@/services/miniapp-runtime';
+import { getMiniappMotionPresets } from '@/services/miniapp-runtime/visual-config';
+import styles from './my-apps-page.module.css';
// ============================================
// iOS 桌面图标（带 Popover 菜单）
// ============================================
+
interface IOSDesktopIconProps {
app: MiniappManifest;
onTap: () => void;
@@ -20,30 +34,80 @@ interface IOSDesktopIconProps {
function IOSDesktopIcon({ app, onTap, onOpen, onDetail, onRemove }: IOSDesktopIconProps) {
const popoverRef = useRef(null);
+ const iconRef = useRef(null);
+ const menuRef = useRef(null);
const longPressTimer = useRef | null>(null);
const didLongPress = useRef(false);
const [isOpen, setIsOpen] = useState(false);
const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+ const runtimeState = useStore(miniappRuntimeStore, (s) => s.apps.get(app.id)?.state ?? null);
+ const visualConfig = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getVisualConfig);
+ const motionPresets = getMiniappMotionPresets(visualConfig);
+ const focusedAppId = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getFocusedAppId);
+ const isFocusedApp = focusedAppId === app.id;
+ const presentationState = useStore(
+ miniappRuntimeStore,
+ (s) => s.presentations.get(app.id)?.state ?? null,
+ );
+ const iconFlow = runtimeStateToStableFlow(runtimeState);
+ const iconStackingVariant =
+ isFocusedApp && (iconFlow === 'opening' || iconFlow === 'splash') ? 'elevated' : 'normal';
+ const cornerBadgeVariant = flowToCornerBadge[iconFlow];
+ // icon 只在窗口 transitioning 阶段持有 shared layout（present/dismiss）
+ const enableSharedLayout =
+ presentationState === null || presentationState === 'presenting' || presentationState === 'dismissing';
+ const sharedLayoutIds = enableSharedLayout
+ ? {
+ container: `miniapp:${app.id}:container`,
+ logo: `miniapp:${app.id}:logo`,
+ inner: `miniapp:${app.id}:inner`,
+ }
+ : null;
+
+ const ICON_STACKING_VARIANTS = {
+ normal: { zIndex: 0, pointerEvents: 'auto' },
+ elevated: { zIndex: 50, pointerEvents: 'none' },
+ } as const;
+
+ const CORNER_BADGE_VARIANTS = {
+ show: { opacity: 1, scale: 1 },
+ hide: { opacity: 0, scale: 0.6 },
+ } as const;
+
+ // 注册图标 ref 到 runtime（用于 rect 计算 / 共享元素动画）
+ useEffect(() => {
+ if (popoverRef.current) {
+ registerIconRef(app.id, popoverRef.current);
+ }
+ if (iconRef.current) {
+ registerIconInnerRef(app.id, iconRef.current);
+ }
+ return () => {
+ unregisterIconRef(app.id);
+ };
+ }, [app.id]);
+
+ // 动画引用
+ const popoverAnimationRef = useRef(null);
+ const iconAnimationRef = useRef(null);
+ const menuAnimationRef = useRef(null);
+
const showMenu = () => {
const popover = popoverRef.current;
- if (!popover) return;
-
- // 计算位置（在 showPopover 之前，popover 还在文档流中）
+ const icon = iconRef.current;
+ if (!popover || !icon) return;
+
const rect = popover.getBoundingClientRect();
-
- // 设置 CSS 变量（通过 !important 生效）
- popover.style.setProperty('--popover-top', `${rect.top}px`);
- popover.style.setProperty('--popover-left', `${rect.left}px`);
-
+
// 菜单位置（图标上方）
const menuWidth = 224;
const menuHeight = 180;
const gap = 16;
-
+
let menuTop = rect.top - menuHeight - gap;
let menuLeft = rect.left + rect.width / 2 - menuWidth / 2;
-
+
if (menuLeft < 16) menuLeft = 16;
if (menuLeft + menuWidth > window.innerWidth - 16) {
menuLeft = window.innerWidth - menuWidth - 16;
@@ -51,39 +115,118 @@ function IOSDesktopIcon({ app, onTap, onOpen, onDetail, onRemove }: IOSDesktopIc
if (menuTop < 16) {
menuTop = rect.bottom + gap;
}
-
+
setMenuPosition({ top: menuTop, left: menuLeft });
+
+ // 用 Web Animation API 设置 popover 位置（fill: forwards 保持最终状态）
+ popoverAnimationRef.current = popover.animate(
+ [
+ {
+ position: 'fixed',
+ top: `${rect.top}px`,
+ left: `${rect.left}px`,
+ margin: '0',
+ inset: 'auto',
+ zIndex: '50',
+ },
+ ],
+ {
+ duration: 0,
+ fill: 'forwards',
+ },
+ );
+
+ // 图标浮起动画
+ iconAnimationRef.current = icon.animate(
+ [
+ { transform: 'scale(1) translateY(0)', filter: 'drop-shadow(0 0 0 transparent)' },
+ { transform: 'scale(1.08) translateY(-4px)', filter: 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3))' },
+ ],
+ {
+ duration: 200,
+ easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+ fill: 'forwards',
+ },
+ );
+
popover.showPopover();
setIsOpen(true);
+
+ requestAnimationFrame(() => {
+ const menu = menuRef.current;
+ if (menu) {
+ menuAnimationRef.current = menu.animate(
+ [
+ { opacity: 0, transform: 'scale(0.85) translateY(8px)' },
+ { opacity: 1, transform: 'scale(1) translateY(0)' },
+ ],
+ {
+ duration: 250,
+ easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+ fill: 'forwards',
+ },
+ );
+ }
+ });
};
const hideMenu = () => {
const popover = popoverRef.current;
+ const icon = iconRef.current;
+ const menu = menuRef.current;
if (!popover) return;
-
- // 触发退出动画
- const menu = popover.querySelector('.ios-context-menu');
- menu?.classList.add('closing');
- popover.style.setProperty('--backdrop-opacity', '0');
-
- // 等待动画完成后隐藏 popover
+
+ // 图标恢复动画
+ if (icon) {
+ iconAnimationRef.current?.cancel();
+ iconAnimationRef.current = icon.animate(
+ [
+ { transform: 'scale(1.08) translateY(-4px)', filter: 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3))' },
+ { transform: 'scale(1) translateY(0)', filter: 'drop-shadow(0 0 0 transparent)' },
+ ],
+ {
+ duration: 150,
+ easing: 'ease-out',
+ fill: 'forwards',
+ },
+ );
+ }
+
+ // 菜单退出动画
+ if (menu) {
+ menuAnimationRef.current = menu.animate(
+ [
+ { opacity: 1, transform: 'scale(1) translateY(0)' },
+ { opacity: 0, transform: 'scale(0.9) translateY(4px)' },
+ ],
+ {
+ duration: 150,
+ easing: 'ease-out',
+ fill: 'forwards',
+ },
+ );
+ }
+
setTimeout(() => {
popover.hidePopover();
setIsOpen(false);
- menu?.classList.remove('closing');
- popover.style.removeProperty('--backdrop-opacity');
- }, 200);
+ popoverAnimationRef.current?.cancel();
+ iconAnimationRef.current?.cancel();
+ menuAnimationRef.current?.cancel();
+ popoverAnimationRef.current = null;
+ iconAnimationRef.current = null;
+ menuAnimationRef.current = null;
+ }, 150);
};
- // 监听 popover toggle 事件
useEffect(() => {
const el = popoverRef.current;
if (!el) return;
-
+
const handleToggle = (e: ToggleEvent) => {
setIsOpen(e.newState === 'open');
};
-
+
el.addEventListener('toggle', handleToggle);
return () => el.removeEventListener('toggle', handleToggle);
}, []);
@@ -132,26 +275,18 @@ function IOSDesktopIcon({ app, onTap, onOpen, onDetail, onRemove }: IOSDesktopIc
return (
// 占位容器（在网格中保持位置）
-
{
+ closeStackView()
+ onClose?.()
+ }}
+ />
+
+ {/* 标题 */}
+
+ )
+}
+
+export default MiniappStackView
diff --git a/src/components/ecosystem/miniapp-window-stack.tsx b/src/components/ecosystem/miniapp-window-stack.tsx
new file mode 100644
index 00000000..fa98026d
--- /dev/null
+++ b/src/components/ecosystem/miniapp-window-stack.tsx
@@ -0,0 +1,109 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Buffer } from 'buffer'
+import { useStore } from '@tanstack/react-store'
+import {
+ miniappRuntimeStore,
+ miniappRuntimeSelectors,
+ registerDesktopGridHostRef,
+ unregisterDesktopGridHostRef,
+ registerDesktopAppSlotRef,
+ unregisterDesktopAppSlotRef,
+} from '@/services/miniapp-runtime'
+import type { MiniappTargetDesktop } from '@/services/ecosystem/types'
+
+function base64UrlEncode(input: string): string {
+ const bytes = new TextEncoder().encode(input)
+ let binary = ''
+ bytes.forEach((b) => {
+ binary += String.fromCharCode(b)
+ })
+
+ const base64 =
+ typeof globalThis.btoa === 'function'
+ ? globalThis.btoa(binary)
+ : Buffer.from(binary, 'binary').toString('base64')
+
+ return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+}
+
+function isTargetDesktop(value: string | null | undefined): value is MiniappTargetDesktop {
+ return value === 'mine' || value === 'stack'
+}
+
+/**
+ * MiniappWindowStack
+ *
+ * 一个统一的“窗口堆栈层”覆盖网格：
+ * - 由 slide 决定布局（本组件只提供 slot 容器）
+ * - slot 统一叠放在同一 grid cell（1 / 1）
+ * - 本组件不区分 mine/stack 的 props，通过 DOM 上的 `data-ecosystem-subpage` 自识别
+ */
+export function MiniappWindowStack() {
+ const rootRef = useRef
+ 正在运行的应用
+ {apps.length}
+
+
+ {/* 卡片滑动区域 */}
+
+ = 0 ? initialIndex : 0}
+ onSwiper={(swiper) => { swiperRef.current = swiper }}
+ onSlideChange={handleSlideChange}
+ cardsEffect={{
+ slideShadows: false,
+ perSlideOffset: 8,
+ perSlideRotate: 2,
+ }}
+ className={styles.swiper}
+ >
+ {apps.map((app, index) => (
+
+ handleCardTap(app.appId)}
+ onSwipeUp={() => handleSwipeUp(app.appId)}
+ />
+
+ ))}
+
+
+
+ {/* 操作提示 */}
+
+ 左右滑动切换 · 点击打开 · 上滑关闭
+
+
+ {slotPresentations.map((p) => {
+ const areaName = base64UrlEncode(p.appId)
+ const setSlotRef = (el: HTMLDivElement | null) => {
+ if (!desktop) return
+ if (el) {
+ registerDesktopAppSlotRef(desktop, p.appId, el)
+ return
+ }
+ unregisterDesktopAppSlotRef(desktop, p.appId)
+ }
+
+ return (
+
+ )
+ })}
+
+ )
+}
+
+export default MiniappWindowStack
diff --git a/src/components/ecosystem/miniapp-window.module.css b/src/components/ecosystem/miniapp-window.module.css
new file mode 100644
index 00000000..29ec8feb
--- /dev/null
+++ b/src/components/ecosystem/miniapp-window.module.css
@@ -0,0 +1,82 @@
+/**
+ * MiniappWindow 小程序窗口样式
+ */
+
+.window {
+ position: static;
+ width: 100%;
+ height: 100%;
+}
+
+.windowInner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background: var(--background);
+ overflow: hidden;
+
+ /* 变换原点：居中 */
+ transform-origin: center center;
+
+ /* 默认隐藏，避免 layoutId 初次挂载闪现 */
+ opacity: 0;
+}
+
+/**
+ * 内容层容器：包含 splash-bg 和 iframe
+ * 使用 isolation 隔离混合模式
+ */
+.contentLayer {
+ position: absolute;
+ inset: 0;
+ isolation: isolate;
+}
+
+/* 只在动画过程中启用混合模式 */
+.contentLayer.blending [data-animate='top'] {
+ mix-blend-mode: plus-lighter;
+}
+
+/**
+ * splash-bg 层（和 iframe 互斥）
+ */
+.splashBgLayer {
+ position: absolute;
+ inset: 0;
+}
+
+/**
+ * iframe 层（和 splash-bg 互斥）
+ */
+.iframeLayer {
+ position: absolute;
+ inset: 0;
+}
+
+.iframeLayer iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background: transparent;
+}
+
+.window.animating {
+ /* 动画期间仅禁用 iframe 交互，保留胶囊按钮可强制关闭 */
+}
+
+.window.animating .iframeLayer {
+ pointer-events: none;
+}
+
+/* 胶囊容器层 - 在 iframe 之上 */
+.capsuleLayer {
+ position: absolute;
+ inset: 0;
+ /* 必须高于 splash/launch overlay，确保卡在 splash 也能关闭 */
+ z-index: 2000;
+ pointer-events: none;
+}
+
+.capsuleLayer > * {
+ pointer-events: auto;
+}
diff --git a/src/components/ecosystem/miniapp-window.stories.tsx b/src/components/ecosystem/miniapp-window.stories.tsx
new file mode 100644
index 00000000..7383a135
--- /dev/null
+++ b/src/components/ecosystem/miniapp-window.stories.tsx
@@ -0,0 +1,273 @@
+/**
+ * MiniappWindow Stories
+ *
+ * 演示小程序窗口组件和启动动画
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useRef, useEffect, useState } from 'react';
+import { MiniappSplashScreen } from './miniapp-splash-screen';
+import { MiniappCapsule } from './miniapp-capsule';
+import { MiniappWindow } from './miniapp-window';
+import { EcosystemDesktop, type EcosystemDesktopHandle } from './ecosystem-desktop';
+import { SwiperSyncProvider } from '@/components/common/swiper-sync-context';
+import { TabBar } from '@/stackflow/components/TabBar';
+import {
+ closeAllApps,
+ launchApp,
+ resetMiniappVisualConfig,
+ setMiniappMotionTimeScale,
+} from '@/services/miniapp-runtime';
+import { MiniappVisualProvider } from '@/services/miniapp-runtime/MiniappVisualProvider';
+import type { MiniappManifest } from '@/services/ecosystem';
+
+const meta: Meta = {
+ title: 'Ecosystem/MiniappWindow',
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export default meta;
+type Story = StoryObj
+
+ ),
+};
+
+/** 单独测试胶囊按钮 */
+export const CapsuleOnly: Story = {
+ render: () => (
+
+ console.log('Action clicked')}
+ onClose={() => console.log('Close clicked')}
+ />
+
+ ),
+};
+
+/** 不同主题色的启动屏幕 */
+export const SplashScreenThemes: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/**
+ * 启动动画演示
+ *
+ * 点击图标启动应用，观察 FLIP 动画效果：
+ * - 锻造/传送：有 splash screen（路径 1）
+ * - 市场/钱包：无 splash screen（路径 2）
+ */
+export const LaunchDemo: Story = {
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+
+
+
+
+ {}} />
+
+ {/* 提示 + 速度调控 */}
+
+
+ console.log('Detail:', app.name)}
+ onAppRemove={(id) => console.log('Remove:', id)}
+ />
+
+ {/* 窗口层 */}
+
+
+ {/* 真实项目底部指示器（TabBar 内置生态 indicator） */}
+
+
+
+
+
+ setTimeScale(Number(e.target.value))}
+ aria-label="Miniapp motion speed"
+ />
+ 点击图标启动应用 | 锻造/传送有 Splash | 市场/钱包直接打开
+
+
+
+
+ x{timeScale.toFixed(2)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {
+ // TODO: 显示更多操作菜单
+ }}
+ onClose={handleClose}
+ />
+
+
+
+
{/* Popover（打开时提升到顶层） */}
-
+
{/* 点击拦截层（视觉效果由 ::backdrop 提供） */}
{isOpen && (
-
+
)}
- {/* 图标按钮 */}
+ {/* 图标按钮（只包含图标，不包含 label；label 必须留在静态布局中） */}
{/* 菜单 */}
{isOpen && (
- (null);
+
+ useEffect(() => {
+ const el = mineContainerRef.current;
+ if (!el) return;
+ registerDesktopContainerRef('mine', el);
+ return () => unregisterDesktopContainerRef('mine');
+ }, []);
+
return (
-
+
);
}
diff --git a/src/components/ecosystem/source-icon.tsx b/src/components/ecosystem/source-icon.tsx
index 9697d0c0..537c653d 100644
--- a/src/components/ecosystem/source-icon.tsx
+++ b/src/components/ecosystem/source-icon.tsx
@@ -1,81 +1,73 @@
/**
* Source Icon Component
- *
+ *
* 订阅源图标组件
* - 有自定义图标时显示图标
* - 没有图标时显示 HTTPS 锁图标（表示安全来源）
*/
-import { forwardRef } from 'react'
-import { IconLock } from '@tabler/icons-react'
-import { cn } from '@/lib/utils'
+import { forwardRef } from 'react';
+import { IconLock } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
export interface SourceIconProps {
/** 图标 URL */
- src?: string | null
+ src?: string | null;
/** 订阅源名称 */
- name?: string
+ name?: string;
/** 尺寸 */
- size?: 'sm' | 'md' | 'lg'
+ size?: 'sm' | 'md' | 'lg';
/** 自定义类名 */
- className?: string
+ className?: string;
}
const SIZES = {
sm: { icon: 24, lock: 14 },
md: { icon: 32, lock: 18 },
lg: { icon: 40, lock: 22 },
-}
-
-export const SourceIcon = forwardRef(
- function SourceIcon({ src, name = 'Source', size = 'md', className }, ref) {
- const { icon: iconSize, lock: lockSize } = SIZES[size]
- const radius = Math.round(iconSize * 0.22)
+};
- // 有自定义图标
- if (src) {
- return (
- (function SourceIcon(
+ { src, name = 'Source', size = 'md', className },
+ ref,
+) {
+ const { icon: iconSize, lock: lockSize } = SIZES[size];
+ const radius = Math.round(iconSize * 0.22);
- // 默认 HTTPS 锁图标
+ // 有自定义图标
+ if (src) {
return (
= {
+ title: 'Ecosystem/SwiperSyncDemo',
+ component: SwiperSyncDemo,
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/** Controller 模块原理展示 */
+export const Controller: Story = {};
+
+/** Context 封装模式（跨组件同步） */
+export const ContextMode: StoryObj = {
+ render: () => (null);
+ const [indicatorSwiper, setIndicatorSwiper] = useState(null);
+
+ // 用于 UI 显示的进度（不参与同步逻辑）
+ const [displayProgress, setDisplayProgress] = useState(0);
+
+ return (
+
+
+ );
+}
+
+export default SwiperSyncDemo;
diff --git a/src/components/layout/swipeable-tabs.test.tsx b/src/components/layout/swipeable-tabs.test.tsx
index b02f8773..e1ba6af0 100644
--- a/src/components/layout/swipeable-tabs.test.tsx
+++ b/src/components/layout/swipeable-tabs.test.tsx
@@ -139,7 +139,7 @@ describe('SwipeableTabs', () => {
{(tab) =>
)
- const indicator = container.querySelector('[class*="transition-transform"]')
+ const indicator = container.querySelector('div[style*="--tab-index"]')
expect(indicator).toBeInTheDocument()
})
@@ -151,8 +151,9 @@ describe('SwipeableTabs', () => {
const historyTab = screen.getByRole('button', { name: /交易/i })
await userEvent.click(historyTab)
- const contentContainer = container.querySelector('[class*="transition-transform"]')
- expect(contentContainer).toBeInTheDocument()
+ const indicator = container.querySelector('div[style*="--tab-index"]') as HTMLElement | null
+ expect(indicator).toBeInTheDocument()
+ expect(indicator?.style.transform).toContain('translateX')
})
it('respects controlled activeTab', () => {
diff --git a/src/lib/crypto/bioforest.test.ts b/src/lib/crypto/bioforest.test.ts
index 7d9de378..1fa5e035 100644
--- a/src/lib/crypto/bioforest.test.ts
+++ b/src/lib/crypto/bioforest.test.ts
@@ -298,7 +298,9 @@ describe('BioForest Crypto', () => {
expect(derived.address.startsWith('c')).toBe(true)
const addresses = deriveBioforestAddressesFromChainConfigs('test', [customConfig])
- expect(addresses).toEqual([{ chainId: 'custom-bioforest', address: derived.address }])
+ expect(addresses).toEqual([
+ { chainId: 'custom-bioforest', address: derived.address, publicKey: derived.publicKey },
+ ])
})
it('should reject non-bioforest configs', () => {
diff --git a/src/lib/crypto/bioforest.ts b/src/lib/crypto/bioforest.ts
index 329eaf28..ad1e4d72 100644
--- a/src/lib/crypto/bioforest.ts
+++ b/src/lib/crypto/bioforest.ts
@@ -157,7 +157,10 @@ export function deriveBioforestAddresses(
}))
}
- return deriveBioforestAddressesFromChainConfigs(secret, chainConfigs)
+ return deriveBioforestAddressesFromChainConfigs(secret, chainConfigs).map(({ chainId, address }) => ({
+ chainId,
+ address,
+ }))
}
// ==================== Base58 编码 ====================
diff --git a/src/pages/ecosystem/miniapp.tsx b/src/pages/ecosystem/miniapp.tsx
deleted file mode 100644
index 37a86ac8..00000000
--- a/src/pages/ecosystem/miniapp.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-/**
- * MiniApp Container Page
- *
- * Runs a miniapp in an iframe with Bio SDK integration
- */
-
-import { useEffect, useRef, useCallback, useState, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { getAppById, getBridge, initBioProvider } from '@/services/ecosystem'
-import type { MiniappManifest, BioAccount, TransferParams, BioUnsignedTransaction, BioSignedTransaction } from '@/services/ecosystem'
-import {
- setWalletPicker,
- setGetAccounts,
-} from '@/services/ecosystem/handlers/wallet'
-import { setSigningDialog } from '@/services/ecosystem/handlers/signing'
-import { setTransferDialog } from '@/services/ecosystem/handlers/transfer'
-import { setSignTransactionDialog } from '@/services/ecosystem/handlers/transaction'
-import { walletStore, walletSelectors, type ChainAddress } from '@/stores'
-import { usePreferences } from '@/stores/preferences'
-import { getLanguageDirection } from '@/i18n/index'
-import { useFlow } from '@/stackflow/stackflow'
-import { IconX, IconDots } from '@tabler/icons-react'
-
-// 获取解析后的主题（system -> light/dark）
-function resolveColorMode(theme: 'light' | 'dark' | 'system'): 'light' | 'dark' {
- if (theme !== 'system') return theme
- if (typeof window === 'undefined') return 'light'
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-// 默认主题色 hue（粉色）
-const DEFAULT_PRIMARY_HUE = 323
-const DEFAULT_PRIMARY_SATURATION = 0.26
-
-interface MiniappPageProps {
- appId: string
- onClose?: () => void
-}
-
-export function MiniappPage({ appId, onClose }: MiniappPageProps) {
- const { t, i18n } = useTranslation('common')
- const { push } = useFlow()
- const iframeRef = useRef(null)
- const [app, setApp] = useState(null)
- const [loading, setLoading] = useState(true)
- const [splashVisible, setSplashVisible] = useState(false)
- const [error, setError] = useState(null)
- const splashTimeoutRef = useRef | null>(null)
- const preferences = usePreferences()
-
- // 构建 context 状态
- const contextState = useMemo(() => ({
- theme: {
- colorMode: resolveColorMode(preferences.theme),
- primaryHue: DEFAULT_PRIMARY_HUE,
- primarySaturation: DEFAULT_PRIMARY_SATURATION,
- },
- locale: {
- lang: preferences.language,
- rtl: getLanguageDirection(preferences.language) === 'rtl',
- },
- env: {
- platform: 'web' as const,
- version: '1.0.0',
- safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
- },
- a11y: {
- fontScale: 1.0,
- reduceMotion: false,
- },
- }), [preferences.theme, preferences.language])
-
- // 构建带 context 参数的 iframe URL
- const iframeUrl = useMemo(() => {
- if (!app) return ''
- const url = new URL(app.url, window.location.origin)
- url.searchParams.set('colorMode', contextState.theme.colorMode)
- url.searchParams.set('primaryHue', String(contextState.theme.primaryHue))
- url.searchParams.set('primarySaturation', String(contextState.theme.primarySaturation))
- url.searchParams.set('lang', contextState.locale.lang)
- url.searchParams.set('rtl', String(contextState.locale.rtl))
- url.searchParams.set('platform', contextState.env.platform)
- url.searchParams.set('version', contextState.env.version)
- return url.toString()
- }, [app, contextState])
-
- // 当 context 变化时通知 iframe
- useEffect(() => {
- if (!iframeRef.current?.contentWindow) return
- iframeRef.current.contentWindow.postMessage({
- type: 'keyapp:context-update',
- payload: contextState,
- }, '*')
- }, [contextState])
-
- useEffect(() => {
- const manifest = getAppById(appId)
- if (!manifest) {
- setError('小程序不存在')
- setLoading(false)
- return
- }
- setApp(manifest)
- }, [appId, t])
-
- // 钱包选择器
- const showWalletPicker = useCallback(
- (opts?: { chain?: string; exclude?: string }): Promise => {
- return new Promise((resolve) => {
- const handleSelect = (e: Event) => {
- const detail = (e as CustomEvent).detail
- window.removeEventListener('wallet-picker-select', handleSelect)
- window.removeEventListener('wallet-picker-cancel', handleCancel)
- resolve({
- address: detail.address,
- chain: detail.chain,
- name: detail.name,
- })
- }
-
- const handleCancel = () => {
- window.removeEventListener('wallet-picker-select', handleSelect)
- window.removeEventListener('wallet-picker-cancel', handleCancel)
- resolve(null)
- }
-
- window.addEventListener('wallet-picker-select', handleSelect)
- window.addEventListener('wallet-picker-cancel', handleCancel)
-
- const params: Record = {}
- if (opts?.chain) params.chain = opts.chain
- if (opts?.exclude) params.exclude = opts.exclude
- if (app?.name) params.appName = app.name
- if (app?.icon) params.appIcon = app.icon
- push('WalletPickerJob', params)
- })
- },
- [push, app?.name, app?.icon]
- )
-
- // 获取已连接账户
- const getConnectedAccounts = useCallback((): BioAccount[] => {
- const state = walletStore.state
- const wallet = walletSelectors.getCurrentWallet(state)
- if (!wallet) return []
-
- return wallet.chainAddresses.map((ca: ChainAddress) => ({
- address: ca.address,
- chain: ca.chain,
- name: wallet.name,
- }))
- }, [])
-
- // 签名对话框 - 集成真实签名服务
- const showSigningDialog = useCallback(
- (params: { message: string; address: string; app: { name: string; icon?: string } }): Promise<{ signature: string; publicKey: string } | null> => {
- return new Promise((resolve) => {
- const handleConfirm = (e: Event) => {
- const detail = (e as CustomEvent).detail
- window.removeEventListener('signing-confirm', handleConfirm)
- if (detail.confirmed && detail.signature && detail.publicKey) {
- // 返回签名和公钥（hex 格式）
- resolve({ signature: detail.signature, publicKey: detail.publicKey })
- } else {
- resolve(null)
- }
- }
-
- window.addEventListener('signing-confirm', handleConfirm)
-
- // 根据 address 找到对应的链
- const state = walletStore.state
- const wallet = walletSelectors.getCurrentWallet(state)
- let chainName = 'bioforest'
- if (wallet) {
- const chainAddr = wallet.chainAddresses.find(
- (ca: ChainAddress) => ca.address.toLowerCase() === params.address.toLowerCase()
- )
- if (chainAddr) {
- chainName = chainAddr.chain
- }
- }
-
- push('SigningConfirmJob', {
- message: params.message,
- address: params.address,
- appName: params.app.name,
- appIcon: params.app.icon ?? app?.icon ?? '',
- chainName,
- })
- })
- },
- [push, app?.icon]
- )
-
- // 转账对话框
- const showTransferDialog = useCallback(
- (params: TransferParams & { app: { name: string; icon?: string } }): Promise<{ txHash: string } | null> => {
- return new Promise((resolve) => {
- const handleResult = (e: Event) => {
- const detail = (e as CustomEvent).detail
- window.removeEventListener('miniapp-transfer-confirm', handleResult)
- if (detail.confirmed) {
- resolve({ txHash: detail.txHash })
- } else {
- resolve(null)
- }
- }
-
- window.addEventListener('miniapp-transfer-confirm', handleResult)
-
- push('MiniappTransferConfirmJob', {
- appName: params.app.name,
- appIcon: params.app.icon ?? app?.icon ?? '',
- from: params.from,
- to: params.to,
- amount: params.amount,
- chain: params.chain,
- ...(params.asset ? { asset: params.asset } : {}),
- })
- })
- },
- [push, app?.icon]
- )
-
- // 交易签名对话框
- const showSignTransactionDialog = useCallback(
- (params: { from: string; chain: string; unsignedTx: BioUnsignedTransaction; app: { name: string; icon?: string } }): Promise => {
- return new Promise((resolve) => {
- const handleResult = (e: Event) => {
- const detail = (e as CustomEvent).detail as { confirmed?: boolean; signedTx?: BioSignedTransaction }
- window.removeEventListener('miniapp-sign-transaction-confirm', handleResult)
- if (detail.confirmed && detail.signedTx) {
- resolve(detail.signedTx)
- } else {
- resolve(null)
- }
- }
-
- window.addEventListener('miniapp-sign-transaction-confirm', handleResult)
-
- push('MiniappSignTransactionJob', {
- appName: params.app.name,
- appIcon: params.app.icon ?? app?.icon ?? '',
- from: params.from,
- chain: params.chain,
- unsignedTx: JSON.stringify(params.unsignedTx),
- })
- })
- },
- [push, app?.icon],
- )
-
- // 权限请求对话框
- const requestPermission = useCallback(
- (_appId: string, appName: string, permissions: string[]): Promise => {
- return new Promise((resolve) => {
- const handleResult = (e: Event) => {
- const detail = (e as CustomEvent).detail
- window.removeEventListener('permission-request', handleResult)
- resolve(detail.approved === true)
- }
-
- window.addEventListener('permission-request', handleResult)
-
- push('PermissionRequestJob', {
- appName,
- appIcon: app?.icon ?? '',
- permissions: JSON.stringify(permissions),
- })
- })
- },
- [push, app?.icon]
- )
-
- // 注册回调
- useEffect(() => {
- setWalletPicker(showWalletPicker)
- setGetAccounts(getConnectedAccounts)
- setSigningDialog(showSigningDialog)
- setTransferDialog(showTransferDialog)
- setSignTransactionDialog(showSignTransactionDialog)
-
- return () => {
- setWalletPicker(null)
- setGetAccounts(null)
- setSigningDialog(null)
- setTransferDialog(null)
- setSignTransactionDialog(null)
- }
- }, [showWalletPicker, getConnectedAccounts, showSigningDialog, showTransferDialog, showSignTransactionDialog])
-
- useEffect(() => {
- // Initialize provider on mount
- initBioProvider()
- }, [])
-
- // 关闭启动屏
- const closeSplashScreen = useCallback(() => {
- if (splashTimeoutRef.current) {
- clearTimeout(splashTimeoutRef.current)
- splashTimeoutRef.current = null
- }
- setSplashVisible(false)
- setLoading(false)
- }, [])
-
- const handleIframeLoad = useCallback(() => {
- if (!iframeRef.current || !app) return
-
- // Attach bridge to iframe
- const bridge = getBridge()
- bridge.setPermissionRequestCallback(requestPermission)
- bridge.attach(iframeRef.current, app.id, app.name, app.permissions ?? [])
-
- // 检查是否有启动屏配置
- if (app.splashScreen) {
- // 有启动屏配置：显示启动屏，等待 closeSplashScreen 调用或超时
- setLoading(false)
- setSplashVisible(true)
-
- // splashScreen 可以是 true 或 { timeout?: number }
- const timeout = (typeof app.splashScreen === 'object' ? app.splashScreen.timeout : undefined) ?? 5000
- splashTimeoutRef.current = setTimeout(() => {
- console.warn('[MiniappPage] Splash screen timeout, auto-closing')
- closeSplashScreen()
- }, timeout)
- } else {
- // 无启动屏配置：直接隐藏 loading
- setLoading(false)
- }
-
- // Emit connect event
- bridge.emit('connect', { chainId: 'bfmeta' })
- }, [app, requestPermission, closeSplashScreen])
-
- // 监听 bio_closeSplashScreen 消息
- useEffect(() => {
- const handleMessage = (event: MessageEvent) => {
- if (event.data?.type === 'bio_request' && event.data?.method === 'bio_closeSplashScreen') {
- closeSplashScreen()
- // 发送响应
- if (iframeRef.current?.contentWindow) {
- iframeRef.current.contentWindow.postMessage({
- type: 'bio_response',
- id: event.data.id,
- success: true,
- result: undefined,
- }, '*')
- }
- }
- }
-
- window.addEventListener('message', handleMessage)
- return () => window.removeEventListener('message', handleMessage)
- }, [closeSplashScreen])
-
- useEffect(() => {
- return () => {
- // Cleanup on unmount
- getBridge().detach()
- if (splashTimeoutRef.current) {
- clearTimeout(splashTimeoutRef.current)
- }
- }
- }, [])
-
- if (error) {
- return (
-
+): HTMLIFrameElement {
+ const iframe = document.createElement('iframe')
+ iframe.id = `miniapp-iframe-${appId}`
+ iframe.dataset.appId = appId
+
+ // 构建带参数的 URL
+ const iframeUrl = new URL(url, window.location.origin)
+ if (contextParams) {
+ Object.entries(contextParams).forEach(([key, value]) => {
+ iframeUrl.searchParams.set(key, value)
+ })
+ }
+ iframe.src = iframeUrl.toString()
+
+ // 安全沙箱
+ iframe.sandbox.add('allow-scripts', 'allow-forms', 'allow-same-origin')
+
+ // 样式
+ iframe.style.cssText = `
+ width: 100%;
+ height: 100%;
+ border: none;
+ background: transparent;
+ `
+
+ return iframe
+}
+
+/**
+ * 将 iframe 挂载到可见容器
+ */
+export function mountIframeVisible(iframe: HTMLIFrameElement): void {
+ const container = getOrCreateContainer(IFRAME_CONTAINER_ID, false)
+ container.appendChild(iframe)
+}
+
+/**
+ * 将 iframe 移到隐藏容器（后台）
+ */
+export function moveIframeToBackground(iframe: HTMLIFrameElement): void {
+ const container = getOrCreateContainer(HIDDEN_CONTAINER_ID, true)
+ container.appendChild(iframe)
+}
+
+/**
+ * 将 iframe 从隐藏容器移回可见
+ */
+export function moveIframeToForeground(iframe: HTMLIFrameElement): void {
+ const container = getOrCreateContainer(IFRAME_CONTAINER_ID, false)
+ container.appendChild(iframe)
+}
+
+/**
+ * 从 DOM 移除 iframe
+ */
+export function removeIframe(iframe: HTMLIFrameElement): void {
+ // 先清空 src 以停止加载
+ iframe.src = 'about:blank'
+ iframe.remove()
+}
+
+/**
+ * 根据 appId 查找 iframe
+ */
+export function findIframe(appId: string): HTMLIFrameElement | null {
+ return document.getElementById(`miniapp-iframe-${appId}`) as HTMLIFrameElement | null
+}
+
+/**
+ * 管理后台 iframe 数量
+ * 超出限制时移除最旧的
+ */
+export function enforceBackgroundLimit(
+ apps: Map,
+ activeAppId: string | null,
+ maxBackground: number = MAX_BACKGROUND_IFRAMES
+): string[] {
+ const removedAppIds: string[] = []
+
+ // 获取所有后台应用，按最后激活时间排序
+ const backgroundApps = Array.from(apps.values())
+ .filter((app) => app.appId !== activeAppId && app.state === 'background')
+ .sort((a, b) => a.lastActiveAt - b.lastActiveAt)
+
+ // 移除超出限制的
+ while (backgroundApps.length > maxBackground) {
+ const oldest = backgroundApps.shift()
+ if (oldest?.iframeRef) {
+ removeIframe(oldest.iframeRef)
+ oldest.iframeRef = null
+ removedAppIds.push(oldest.appId)
+ }
+ }
+
+ return removedAppIds
+}
+
+/**
+ * 清理所有 iframe
+ */
+export function cleanupAllIframes(): void {
+ const visibleContainer = document.getElementById(IFRAME_CONTAINER_ID)
+ const hiddenContainer = document.getElementById(HIDDEN_CONTAINER_ID)
+
+ if (visibleContainer) {
+ visibleContainer.innerHTML = ''
+ visibleContainer.remove()
+ }
+
+ if (hiddenContainer) {
+ hiddenContainer.innerHTML = ''
+ hiddenContainer.remove()
+ }
+}
+
+/**
+ * 获取当前后台 iframe 数量
+ */
+export function getBackgroundIframeCount(): number {
+ const container = document.getElementById(HIDDEN_CONTAINER_ID)
+ return container?.children.length ?? 0
+}
diff --git a/src/services/miniapp-runtime/index.ts b/src/services/miniapp-runtime/index.ts
new file mode 100644
index 00000000..1f043cc4
--- /dev/null
+++ b/src/services/miniapp-runtime/index.ts
@@ -0,0 +1,926 @@
+/**
+ * Miniapp Runtime Service
+ *
+ * 微型操作系统内核，管理小程序的生命周期和动画
+ *
+ * 职责：
+ * - 管理应用状态（启动、激活、后台、关闭）
+ * - 管理 iframe 生命周期
+ * - 计算 FLIP 动画帧
+ * - 提供 DOM ref 管理
+ */
+
+import { Store } from '@tanstack/react-store'
+export type {
+ MiniappInstance,
+ MiniappState,
+ MiniappFlow,
+ MiniappPresentation,
+ MiniappPresentationState,
+ MiniappProcessStatus,
+ MiniappReadinessState,
+ MiniappTransition,
+ MiniappTransitionKind,
+ MiniappTransitionStatus,
+ MiniappRuntimeState,
+ MiniappRuntimeEvent,
+ MiniappRuntimeListener,
+ FlipFrames,
+ AnimationConfig,
+ CapsuleTheme,
+ MiniappContext,
+} from './types'
+import type {
+ MiniappContext,
+ MiniappFlow,
+ MiniappPresentation,
+ MiniappPresentationState,
+ MiniappProcessStatus,
+ MiniappReadinessState,
+ MiniappState,
+ MiniappTransition,
+ MiniappTransitionKind,
+ MiniappTransitionStatus,
+} from './types'
+import {
+ DEFAULT_MINIAPP_VISUAL_CONFIG,
+ mergeMiniappVisualConfig,
+ type MiniappVisualConfigUpdate,
+} from './visual-config'
+import {
+ createIframe,
+ mountIframeVisible,
+ moveIframeToBackground,
+ moveIframeToForeground,
+ removeIframe,
+ enforceBackgroundLimit,
+ cleanupAllIframes,
+} from './iframe-manager'
+import type { MiniappManifest, MiniappTargetDesktop } from '../ecosystem/types'
+import { getBridge } from '../ecosystem/provider'
+import { toastService } from '../toast'
+import { getDesktopAppSlotRect, getIconRef } from './runtime-refs'
+export {
+ getDesktopContainerRef,
+ getDesktopAppSlotRect,
+ getDesktopAppSlotRef,
+ getDesktopRect,
+ getDesktopGridHostRef,
+ getIconInnerRef,
+ getIconRef,
+ getSplashBgRef,
+ getSplashIconRef,
+ getStackRect,
+ getWindowInnerRef,
+ getWindowRef,
+ getStackContainerRef,
+ registerDesktopAppSlotRef,
+ registerDesktopContainerRef,
+ registerDesktopGridHostRef,
+ registerIconInnerRef,
+ registerIconRef,
+ registerSplashBgRef,
+ registerSplashIconRef,
+ registerStackContainerRef,
+ registerWindowInnerRef,
+ registerWindowRef,
+ unregisterDesktopAppSlotRef,
+ unregisterIconRef,
+ unregisterDesktopGridHostRef,
+ unregisterDesktopContainerRef,
+ unregisterStackContainerRef,
+ unregisterSplashBgRef,
+ unregisterSplashIconRef,
+} from './runtime-refs'
+
+// 动画实现已迁移到 motion/layoutId；旧版 FLIP/Popover 动画模块保留为备份文件（*.bak）
+
+/** 初始状态 */
+const initialState: MiniappRuntimeState = {
+ apps: new Map(),
+ visualConfig: DEFAULT_MINIAPP_VISUAL_CONFIG,
+ activeAppId: null,
+ focusedAppId: null,
+ presentations: new Map(),
+ zOrderSeed: 1,
+ isStackViewOpen: false,
+ maxBackgroundApps: 4,
+}
+
+function attachBioProvider(appId: string): void {
+ const app = miniappRuntimeStore.state.apps.get(appId)
+ const iframe = app?.iframeRef
+ if (!app || !iframe) return
+
+ getBridge().attach(iframe, appId, app.manifest.name, app.manifest.permissions ?? [])
+}
+
+function attachBioProviderToIframe(appId: string, iframe: HTMLIFrameElement, manifest: MiniappManifest): void {
+ getBridge().attach(iframe, appId, manifest.name, manifest.permissions ?? [])
+}
+
+/** Store 实例 */
+export const miniappRuntimeStore = new Store(initialState)
+
+export function setMiniappVisualConfig(update: MiniappVisualConfigUpdate): void {
+ miniappRuntimeStore.setState((s) => ({
+ ...s,
+ visualConfig: mergeMiniappVisualConfig(s.visualConfig, update),
+ }))
+}
+
+export function setMiniappMotionTimeScale(timeScale: number): void {
+ setMiniappVisualConfig({ motion: { timeScale } })
+}
+
+export function resetMiniappVisualConfig(): void {
+ miniappRuntimeStore.setState((s) => ({ ...s, visualConfig: DEFAULT_MINIAPP_VISUAL_CONFIG }))
+}
+
+/** 事件监听器 */
+const listeners = new Set()
+
+/**
+ * 发送事件
+ */
+function emit(event: MiniappRuntimeEvent): void {
+ listeners.forEach((listener) => listener(event))
+}
+
+let transitionSeq = 0
+
+function createTransition(kind: MiniappTransitionKind, appId: string): MiniappTransition {
+ transitionSeq += 1
+ return {
+ id: `${kind}:${appId}:${Date.now()}:${transitionSeq}`,
+ kind,
+ status: 'requested',
+ startedAt: Date.now(),
+ }
+}
+
+function getSplashTimeout(manifest: MiniappManifest): number | null {
+ const splash = manifest.splashScreen
+ if (!splash) return null
+ if (typeof splash === 'object' && typeof splash.timeout === 'number') return splash.timeout
+ return 5000
+}
+
+/**
+ * 根据状态变化推导 flow（包含方向性）
+ */
+function deriveFlow(prevState: MiniappState | null, nextState: MiniappState): MiniappFlow {
+ // 从无到有：opening
+ if (!prevState || prevState === 'preparing') {
+ if (nextState === 'launching') return 'opening'
+ if (nextState === 'splash') return 'splash'
+ if (nextState === 'active') return 'opened'
+ }
+
+ // launching -> splash
+ if (prevState === 'launching' && nextState === 'splash') return 'splash'
+
+ // launching/splash -> active
+ if ((prevState === 'launching' || prevState === 'splash') && nextState === 'active') return 'opened'
+
+ // active -> background
+ if (prevState === 'active' && nextState === 'background') return 'backgrounding'
+
+ // background -> active
+ if (prevState === 'background' && nextState === 'active') return 'foregrounding'
+
+ // any -> closing
+ if (nextState === 'closing') return 'closing'
+
+ // 兜底：根据 nextState 推导稳定态
+ if (nextState === 'preparing') return 'closed'
+ if (nextState === 'launching') return 'opening'
+ if (nextState === 'splash') return 'splash'
+ if (nextState === 'active') return 'opened'
+ if (nextState === 'background') return 'backgrounded'
+
+ return 'closed'
+}
+
+/**
+ * 更新应用状态
+ */
+function updateAppState(appId: string, state: MiniappState): void {
+ miniappRuntimeStore.setState((s) => {
+ const app = s.apps.get(appId)
+ if (!app) return s
+
+ const flow = deriveFlow(app.state, state)
+ const newApps = new Map(s.apps)
+ newApps.set(appId, { ...app, state, flow })
+
+ return { ...s, apps: newApps }
+ })
+
+ emit({ type: 'app:state-change', appId, state })
+}
+
+function updateAppProcessStatus(appId: string, processStatus: MiniappProcessStatus): void {
+ miniappRuntimeStore.setState((s) => {
+ const app = s.apps.get(appId)
+ if (!app) return s
+ if (app.processStatus === processStatus) return s
+
+ const newApps = new Map(s.apps)
+ newApps.set(appId, { ...app, processStatus })
+ return { ...s, apps: newApps }
+ })
+}
+
+function updateAppReadiness(appId: string, readiness: MiniappReadinessState): void {
+ miniappRuntimeStore.setState((s) => {
+ const app = s.apps.get(appId)
+ if (!app) return s
+ if (app.readiness === readiness) return s
+
+ const newApps = new Map(s.apps)
+ newApps.set(appId, { ...app, readiness })
+ return { ...s, apps: newApps }
+ })
+}
+
+function readyGateOpened(appId: string): void {
+ updateAppReadiness(appId, 'ready')
+
+ const app = miniappRuntimeStore.state.apps.get(appId)
+ if (!app) return
+
+ if (!app.manifest.splashScreen && (app.state === 'launching' || app.state === 'splash')) {
+ activateApp(appId)
+ }
+}
+
+/**
+ * 将方向性 flow 转为稳定态的映射
+ */
+function getSettledFlow(flow: MiniappFlow): MiniappFlow {
+ switch (flow) {
+ case 'opening':
+ return 'opened'
+ case 'backgrounding':
+ return 'backgrounded'
+ case 'foregrounding':
+ return 'opened'
+ // closing 特殊处理：app 会被移除，不需要 settle
+ // splash、opened、backgrounded、closed 已经是稳定态
+ default:
+ return flow
+ }
+}
+
+/**
+ * 将方向性 flow 转为稳定态（动画完成时由 UI 调用）
+ */
+export function settleFlow(appId: string): void {
+ miniappRuntimeStore.setState((s) => {
+ const app = s.apps.get(appId)
+ if (!app) return s
+
+ const settledFlow = getSettledFlow(app.flow)
+ if (settledFlow === app.flow) return s // 已经是稳定态
+
+ const newApps = new Map(s.apps)
+ newApps.set(appId, { ...app, flow: settledFlow })
+ return { ...s, apps: newApps }
+ })
+}
+
+// ============================================
+// Public API
+// ============================================
+
+/** 动画时间配置 */
+const ANIMATION_TIMING = {
+ /** 有 splash 时，launching -> splash 的延时 */
+ launchToSplash: 100,
+}
+
+const launchTimeouts = new Map[]>()
+
+const splashTimeouts = new Map>()
+
+const closeTimeouts = new Map>()
+
+const DISMISS_WATCHDOG_DELAY = 30_000
+
+const PREPARING_TIMEOUT = 2500
+
+const preparingControllers = new Map()
+
+function cancelPreparing(appId: string): void {
+ const controller = preparingControllers.get(appId)
+ if (!controller) return
+
+ controller.cancelled = true
+ if (controller.rafId !== null) cancelAnimationFrame(controller.rafId)
+ preparingControllers.delete(appId)
+}
+
+function isElementRectReady(el: HTMLElement | null): boolean {
+ if (!el) return false
+ const rect = el.getBoundingClientRect()
+ return rect.width > 0 && rect.height > 0
+}
+
+function isIframeReady(iframe: HTMLIFrameElement | null): boolean {
+ return !!iframe && iframe.isConnected
+}
+
+function clearSplashTimeout(appId: string): void {
+ const timeout = splashTimeouts.get(appId)
+ if (!timeout) return
+ clearTimeout(timeout)
+ splashTimeouts.delete(appId)
+}
+
+function upsertPresentation(appId: string, desktop: MiniappTargetDesktop, next: Partial): void {
+ miniappRuntimeStore.setState((s) => {
+ const prev = s.presentations.get(appId)
+ const base: MiniappPresentation =
+ prev ??
+ ({
+ appId,
+ desktop,
+ state: 'hidden' as MiniappPresentationState,
+ zOrder: s.zOrderSeed,
+ transitionId: null,
+ transitionKind: null,
+ } satisfies MiniappPresentation)
+
+ const merged: MiniappPresentation = {
+ ...base,
+ ...next,
+ appId,
+ desktop: next.desktop ?? base.desktop,
+ }
+
+ const newPresentations = new Map(s.presentations)
+ newPresentations.set(appId, merged)
+
+ return { ...s, presentations: newPresentations }
+ })
+}
+
+function deletePresentation(appId: string): void {
+ miniappRuntimeStore.setState((s) => {
+ if (!s.presentations.has(appId)) return s
+ const newPresentations = new Map(s.presentations)
+ newPresentations.delete(appId)
+ return { ...s, presentations: newPresentations }
+ })
+}
+
+export function requestFocus(appId: string): void {
+ miniappRuntimeStore.setState((s) => {
+ const presentation = s.presentations.get(appId)
+ const nextZ = s.zOrderSeed + 1
+
+ const newPresentations = new Map(s.presentations)
+ if (presentation) {
+ newPresentations.set(appId, { ...presentation, zOrder: nextZ })
+ }
+
+ return {
+ ...s,
+ activeAppId: appId,
+ focusedAppId: appId,
+ presentations: newPresentations,
+ zOrderSeed: nextZ,
+ }
+ })
+}
+
+export function didPresent(appId: string, transitionId: string): void {
+ const presentation = miniappRuntimeStore.state.presentations.get(appId)
+ if (!presentation) return
+ if (presentation.transitionKind !== 'present' || presentation.transitionId !== transitionId) return
+
+ upsertPresentation(appId, presentation.desktop, {
+ state: 'presented',
+ transitionId: null,
+ transitionKind: null,
+ })
+}
+
+export function didDismiss(appId: string, transitionId: string): void {
+ const presentation = miniappRuntimeStore.state.presentations.get(appId)
+ if (!presentation) return
+ if (presentation.transitionKind !== 'dismiss' || presentation.transitionId !== transitionId) return
+
+ finalizeCloseApp(appId)
+}
+
+export function requestDismissSplash(appId: string): void {
+ clearSplashTimeout(appId)
+ readyGateOpened(appId)
+ activateApp(appId)
+}
+
+function failPreparing(appId: string, message: string): void {
+ cancelPreparing(appId)
+
+ const app = miniappRuntimeStore.state.apps.get(appId)
+
+ if (app?.iframeRef) {
+ removeIframe(app.iframeRef)
+ }
+
+ miniappRuntimeStore.setState((s) => {
+ const newApps = new Map(s.apps)
+ newApps.delete(appId)
+
+ const newPresentations = new Map(s.presentations)
+ newPresentations.delete(appId)
+
+ return {
+ ...s,
+ apps: newApps,
+ presentations: newPresentations,
+ activeAppId: s.activeAppId === appId ? null : s.activeAppId,
+ focusedAppId: s.focusedAppId === appId ? null : s.focusedAppId,
+ }
+ })
+
+ toastService.show({ message, duration: 2000 })
+}
+
+function beginLaunchSequence(appId: string, hasSplash: boolean): void {
+ updateAppState(appId, 'launching')
+
+ clearLaunchTimeouts(appId)
+
+ if (hasSplash) {
+ const splashTimeout = setTimeout(() => {
+ const app = miniappRuntimeStore.state.apps.get(appId)
+ if (!app || app.state !== 'launching') return
+ updateAppState(appId, 'splash')
+
+ clearSplashTimeout(appId)
+ const timeout = getSplashTimeout(app.manifest)
+ if (timeout !== null) {
+ splashTimeouts.set(
+ appId,
+ setTimeout(() => {
+ const current = miniappRuntimeStore.state.apps.get(appId)
+ if (!current) return
+ if (current.state !== 'splash') return
+ requestDismissSplash(appId)
+ }, timeout)
+ )
+ }
+ }, ANIMATION_TIMING.launchToSplash)
+
+ launchTimeouts.set(appId, [splashTimeout])
+ return
+ }
+
+ launchTimeouts.set(appId, [])
+}
+
+function startPreparing(appId: string, targetDesktop: MiniappTargetDesktop, hasSplash: boolean): void {
+ cancelPreparing(appId)
+
+ const controller = { cancelled: false, rafId: null as number | null }
+ preparingControllers.set(appId, controller)
+
+ const startAt = performance.now()
+
+ const tick = () => {
+ if (controller.cancelled) return
+
+ const app = miniappRuntimeStore.state.apps.get(appId)
+ if (!app || app.state !== 'preparing') {
+ cancelPreparing(appId)
+ return
+ }
+
+ const iconReady = isElementRectReady(getIconRef(appId))
+ const slotReady = !!getDesktopAppSlotRect(targetDesktop, appId)
+ const iframeReady = isIframeReady(app.iframeRef)
+
+ if (iconReady && slotReady && iframeReady) {
+ cancelPreparing(appId)
+ beginLaunchSequence(appId, hasSplash)
+ return
+ }
+
+ if (performance.now() - startAt > PREPARING_TIMEOUT) {
+ if (!slotReady) {
+ failPreparing(appId, '启动失败：请停留在目标桌面页后重试')
+ } else if (!iconReady) {
+ failPreparing(appId, '启动失败：图标未就绪，请返回桌面重试')
+ } else {
+ failPreparing(appId, '启动失败：加载容器未就绪，请重试')
+ }
+ return
+ }
+
+ controller.rafId = requestAnimationFrame(tick)
+ }
+
+ controller.rafId = requestAnimationFrame(tick)
+}
+
+function clearLaunchTimeouts(appId: string): void {
+ const timeouts = launchTimeouts.get(appId)
+ if (!timeouts) return
+ timeouts.forEach((t) => clearTimeout(t))
+ launchTimeouts.delete(appId)
+}
+
+function clearCloseTimeout(appId: string): void {
+ const timeout = closeTimeouts.get(appId)
+ if (!timeout) return
+ clearTimeout(timeout)
+ closeTimeouts.delete(appId)
+}
+
+export function finalizeCloseApp(appId: string): void {
+ clearLaunchTimeouts(appId)
+ clearCloseTimeout(appId)
+ clearSplashTimeout(appId)
+ cancelPreparing(appId)
+
+ miniappRuntimeStore.setState((s) => {
+ const app = s.apps.get(appId)
+ if (!app) return s
+
+ // 移除 iframe（在动画完成后才执行）
+ if (app.iframeRef) {
+ removeIframe(app.iframeRef)
+ }
+
+ const newApps = new Map(s.apps)
+ newApps.delete(appId)
+
+ const newPresentations = new Map(s.presentations)
+ newPresentations.delete(appId)
+
+ return {
+ ...s,
+ apps: newApps,
+ presentations: newPresentations,
+ activeAppId: s.activeAppId === appId ? null : s.activeAppId,
+ focusedAppId: s.focusedAppId === appId ? null : s.focusedAppId,
+ }
+ })
+
+ if (miniappRuntimeStore.state.apps.size === 0) {
+ getBridge().detach()
+ }
+}
+
+/**
+ * 立即结束启动阶段（用于用户跳过 splash）
+ */
+export function dismissSplash(appId: string): void {
+ requestDismissSplash(appId)
+}
+
+/**
+ * 启动小程序
+ */
+export function launchApp(
+ appId: string,
+ manifest: MiniappManifest,
+ contextParams?: Record
+): MiniappInstance {
+ const state = miniappRuntimeStore.state
+ const existingApp = state.apps.get(appId)
+
+ // 如果已存在，直接激活
+ if (existingApp) {
+ attachBioProvider(appId)
+ const targetDesktop = existingApp.manifest.targetDesktop ?? 'stack'
+ upsertPresentation(appId, targetDesktop, {
+ state: 'presented',
+ transitionId: null,
+ transitionKind: null,
+ })
+ requestFocus(appId)
+ activateApp(appId)
+ return existingApp
+ }
+
+ const hasSplash = !!manifest.splashScreen
+
+ // 创建新实例
+ const instance: MiniappInstance = {
+ appId,
+ manifest,
+ state: 'preparing',
+ flow: 'closed',
+ ctx: {
+ capsuleTheme: manifest.capsuleTheme ?? 'auto',
+ },
+ processStatus: 'loading',
+ readiness: 'notReady',
+ launchedAt: Date.now(),
+ lastActiveAt: Date.now(),
+ iframeRef: null,
+ iconRef: getIconRef(appId),
+ }
+
+ // 创建 iframe
+ instance.iframeRef = createIframe(appId, manifest.url, contextParams)
+
+ // 绑定 BioProvider bridge（用于 window.bio.request + 权限弹窗）
+ attachBioProviderToIframe(appId, instance.iframeRef, manifest)
+
+ // iframe load：无 splash 时作为 ready 信号；有 splash 时只记录 loaded
+ instance.iframeRef.addEventListener('load', () => {
+ updateAppProcessStatus(appId, 'loaded')
+ if (!manifest.splashScreen) {
+ readyGateOpened(appId)
+ }
+ })
+
+ // 先挂到可见容器，确保 iframe 一定进入 DOM；MiniappWindow 会再把它移动到自己的容器
+ mountIframeVisible(instance.iframeRef)
+
+ const targetDesktop = manifest.targetDesktop ?? 'stack'
+ const presentTransition = createTransition('present', appId)
+
+ miniappRuntimeStore.setState((s) => {
+ const nextZ = s.zOrderSeed + 1
+
+ const newApps = new Map(s.apps)
+ newApps.set(appId, instance)
+
+ const newPresentations = new Map(s.presentations)
+ newPresentations.set(appId, {
+ appId,
+ desktop: targetDesktop,
+ state: 'presenting',
+ zOrder: nextZ,
+ transitionId: presentTransition.id,
+ transitionKind: 'present',
+ })
+
+ return {
+ ...s,
+ apps: newApps,
+ presentations: newPresentations,
+ activeAppId: appId,
+ focusedAppId: appId,
+ zOrderSeed: nextZ,
+ }
+ })
+
+ emit({ type: 'app:launch', appId, manifest })
+
+ // 内核准备：等待 icon/slot/iframe 就绪后再进入 launching
+ startPreparing(appId, targetDesktop, hasSplash)
+
+ return instance
+}
+
+export function requestPresent(
+ appId: string,
+ manifest: MiniappManifest,
+ contextParams?: Record
+): MiniappInstance {
+ return launchApp(appId, manifest, contextParams)
+}
+
+/**
+ * 激活应用（从后台切换到前台）
+ */
+export function activateApp(appId: string): void {
+ const state = miniappRuntimeStore.state
+ const app = state.apps.get(appId)
+ if (!app) return
+
+ // preparing 阶段只用于资源就绪检查，不允许提前进入 active
+ if (app.state === 'preparing') return
+
+ // 当前激活的应用切换到后台
+ if (state.activeAppId && state.activeAppId !== appId) {
+ deactivateApp(state.activeAppId)
+ }
+
+ // 如果 iframe 在后台，移到前台
+ if (app.iframeRef && app.state === 'background') {
+ moveIframeToForeground(app.iframeRef)
+ }
+
+ // 更新状态
+ updateAppState(appId, 'active')
+
+ attachBioProvider(appId)
+
+ miniappRuntimeStore.setState((s) => {
+ const newApps = new Map(s.apps)
+ const existingApp = newApps.get(appId)
+ if (existingApp) {
+ newApps.set(appId, { ...existingApp, lastActiveAt: Date.now() })
+ }
+ return { ...s, apps: newApps, activeAppId: appId, focusedAppId: appId }
+ })
+
+ emit({ type: 'app:activate', appId })
+}
+
+/**
+ * 将应用切换到后台
+ */
+export function deactivateApp(appId: string): void {
+ const state = miniappRuntimeStore.state
+ const app = state.apps.get(appId)
+ if (!app) return
+
+ if (app.state === 'preparing') return
+
+ // 移动 iframe 到后台
+ if (app.iframeRef) {
+ moveIframeToBackground(app.iframeRef)
+ }
+
+ // 更新状态
+ updateAppState(appId, 'background')
+
+ // 检查后台数量限制
+ enforceBackgroundLimit(
+ miniappRuntimeStore.state.apps,
+ miniappRuntimeStore.state.activeAppId,
+ state.maxBackgroundApps
+ )
+
+ emit({ type: 'app:deactivate', appId })
+}
+
+/**
+ * 关闭应用
+ */
+export function closeApp(appId: string): void {
+ const state = miniappRuntimeStore.state
+ const app = state.apps.get(appId)
+ if (!app) return
+
+ clearLaunchTimeouts(appId)
+ clearCloseTimeout(appId)
+ cancelPreparing(appId)
+
+ // 更新状态为关闭中
+ updateAppState(appId, 'closing')
+
+ clearSplashTimeout(appId)
+
+ const desktop = app.manifest.targetDesktop ?? 'stack'
+ const dismissTransition = createTransition('dismiss', appId)
+ upsertPresentation(appId, desktop, {
+ state: 'dismissing',
+ transitionId: dismissTransition.id,
+ transitionKind: 'dismiss',
+ })
+
+ // 注意：iframe 的移除延迟到 finalizeCloseApp 执行，让关闭动画期间 iframe 仍然可见
+
+ // 兜底：如果 UI 未回调 didDismiss，则超时清理（watchdog）
+ closeTimeouts.set(
+ appId,
+ setTimeout(() => {
+ const current = miniappRuntimeStore.state.presentations.get(appId)
+ if (!current) return
+ if (current.transitionKind !== 'dismiss' || current.transitionId !== dismissTransition.id) return
+ finalizeCloseApp(appId)
+ }, DISMISS_WATCHDOG_DELAY)
+ )
+
+ emit({ type: 'app:close', appId })
+}
+
+export function requestDismiss(appId: string): void {
+ closeApp(appId)
+}
+
+/**
+ * 更新应用运行时上下文
+ * 用于动态修改 capsuleTheme 等配置
+ */
+export function updateAppContext(
+ appId: string,
+ update: Partial
+): void {
+ const state = miniappRuntimeStore.state
+ const app = state.apps.get(appId)
+ if (!app) return
+
+ const newCtx = { ...app.ctx, ...update }
+
+ miniappRuntimeStore.setState((s) => {
+ const newApps = new Map(s.apps)
+ const existingApp = newApps.get(appId)
+ if (existingApp) {
+ newApps.set(appId, { ...existingApp, ctx: newCtx })
+ }
+ return { ...s, apps: newApps }
+ })
+
+ emit({ type: 'app:ctx-change', appId, ctx: newCtx })
+}
+
+/**
+ * 关闭所有应用
+ */
+export function closeAllApps(): void {
+ const state = miniappRuntimeStore.state
+ state.apps.forEach((_, appId) => {
+ closeApp(appId)
+ finalizeCloseApp(appId)
+ })
+ cleanupAllIframes()
+}
+
+/**
+ * 打开层叠视图
+ */
+export function openStackView(): void {
+ miniappRuntimeStore.setState((s) => ({ ...s, isStackViewOpen: true }))
+ emit({ type: 'stack-view:open' })
+}
+
+/**
+ * 关闭层叠视图
+ */
+export function closeStackView(): void {
+ miniappRuntimeStore.setState((s) => ({ ...s, isStackViewOpen: false }))
+ emit({ type: 'stack-view:close' })
+}
+
+/**
+ * 订阅事件
+ */
+export function subscribe(listener: MiniappRuntimeListener): () => void {
+ listeners.add(listener)
+ return () => listeners.delete(listener)
+}
+
+/**
+ * 获取所有运行中的应用
+ */
+export function getRunningApps(): MiniappInstance[] {
+ return Array.from(miniappRuntimeStore.state.apps.values())
+}
+
+/**
+ * 获取当前激活的应用
+ */
+export function getActiveApp(): MiniappInstance | null {
+ const state = miniappRuntimeStore.state
+ if (!state.activeAppId) return null
+ return state.apps.get(state.activeAppId) ?? null
+}
+
+/**
+ * 检查是否有运行中的应用
+ */
+export function hasRunningApps(): boolean {
+ return miniappRuntimeStore.state.apps.size > 0
+}
+
+// ============================================
+// Selectors
+// ============================================
+
+export const miniappRuntimeSelectors = {
+ getApps: (state: MiniappRuntimeState) => Array.from(state.apps.values()),
+ getVisualConfig: (state: MiniappRuntimeState) => state.visualConfig,
+ getActiveApp: (state: MiniappRuntimeState) =>
+ state.activeAppId ? state.apps.get(state.activeAppId) ?? null : null,
+ getFocusedAppId: (state: MiniappRuntimeState) => state.focusedAppId ?? state.activeAppId,
+ getFocusedApp: (state: MiniappRuntimeState) => {
+ const id = state.focusedAppId ?? state.activeAppId
+ return id ? state.apps.get(id) ?? null : null
+ },
+ getPresentations: (state: MiniappRuntimeState) =>
+ Array.from(state.presentations.values()).sort((a, b) => a.zOrder - b.zOrder),
+ getPresentation: (state: MiniappRuntimeState, appId: string) => state.presentations.get(appId) ?? null,
+ hasPresentations: (state: MiniappRuntimeState) => state.presentations.size > 0,
+ hasRunningApps: (state: MiniappRuntimeState) => state.apps.size > 0,
+ hasRunningStackApps: (state: MiniappRuntimeState) =>
+ Array.from(state.apps.values()).some((app) => (app.manifest.targetDesktop ?? 'stack') === 'stack'),
+ isStackViewOpen: (state: MiniappRuntimeState) => state.isStackViewOpen,
+ getBackgroundApps: (state: MiniappRuntimeState) =>
+ Array.from(state.apps.values()).filter((app) => app.state === 'background'),
+ /** 是否显示启动 overlay（launching 或 splash 阶段） */
+ isLaunchOverlayVisible: (state: MiniappRuntimeState) => {
+ const app = (state.focusedAppId ?? state.activeAppId) ? state.apps.get(state.focusedAppId ?? state.activeAppId!) : null
+ return app?.state === 'launching' || app?.state === 'splash'
+ },
+ /** 是否显示 splash 屏幕 */
+ isShowingSplash: (state: MiniappRuntimeState) => {
+ const app = (state.focusedAppId ?? state.activeAppId) ? state.apps.get(state.focusedAppId ?? state.activeAppId!) : null
+ return app?.state === 'splash'
+ },
+ /** 是否正在动画中（非 active/background） */
+ isAnimating: (state: MiniappRuntimeState) => {
+ const app = (state.focusedAppId ?? state.activeAppId) ? state.apps.get(state.focusedAppId ?? state.activeAppId!) : null
+ return app?.state === 'launching' || app?.state === 'splash' || app?.state === 'closing'
+ },
+}
diff --git a/src/services/miniapp-runtime/miniapp-launch-motion.stories.tsx b/src/services/miniapp-runtime/miniapp-launch-motion.stories.tsx
new file mode 100644
index 00000000..cee04a45
--- /dev/null
+++ b/src/services/miniapp-runtime/miniapp-launch-motion.stories.tsx
@@ -0,0 +1,327 @@
+/**
+ * Miniapp Launch Motion (layoutId 版)
+ *
+ * 目标：用 motion/react 的 layoutId 取代 FLIP/WAAPI，演示两条路径：
+ * - 直接：icon -> window
+ * - Splash：icon -> splash(icon) -> window
+ *
+ * 关键要点：
+ * - 同一个 layoutId 贯穿 icon/splash/window（容器 + 图标）
+ * - 背景层单独淡入，不包裹 layoutId，避免干扰测量
+ * - LayoutGroup + AnimatePresence(mode="popLayout")
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+import { motion, AnimatePresence, LayoutGroup } from 'motion/react';
+import { MiniappVisualProvider } from './MiniappVisualProvider';
+import {
+ DEFAULT_MINIAPP_VISUAL_CONFIG,
+ getMiniappMotionPresets,
+ mergeMiniappVisualConfig,
+} from './visual-config';
+
+const meta: Meta = {
+ title: 'Services/MiniappRuntime/LaunchMotion',
+ parameters: { layout: 'fullscreen' },
+};
+
+const MOTION_DEBUG_TIME_SCALE = 1;
+const MOTION_DEBUG_CONFIG = mergeMiniappVisualConfig(DEFAULT_MINIAPP_VISUAL_CONFIG, {
+ motion: { timeScale: MOTION_DEBUG_TIME_SCALE },
+});
+const MOTION_PRESETS = getMiniappMotionPresets(MOTION_DEBUG_CONFIG);
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * 直接路径：icon -> window
+ */
+export const DirectPath: Story = {
+ render: function DirectPathStory() {
+ const [state, setState] = useState<'idle' | 'window'>('idle');
+
+ return (
+
+
+
+
+ );
+ },
+ play: async ({ canvasElement, step }) => {
+ const c = within(canvasElement);
+ await new Promise((r) => setTimeout(r, 200));
+
+ await step('初始 idle', async () => {
+ expect(c.getByTestId('status').textContent).toBe('idle');
+ expect(c.getByTestId('icon')).toBeInTheDocument();
+ });
+
+ await step('点击启动', async () => {
+ await userEvent.click(c.getByTestId('icon'));
+ await new Promise((r) => setTimeout(r, 600));
+ expect(c.getByTestId('status').textContent).toBe('window');
+ expect(c.getByTestId('window')).toBeInTheDocument();
+ });
+
+ await step('点击关闭', async () => {
+ await userEvent.click(c.getByTestId('btn-close'));
+ await new Promise((r) => setTimeout(r, 600));
+ expect(c.getByTestId('status').textContent).toBe('idle');
+ expect(c.getByTestId('icon')).toBeInTheDocument();
+ });
+ },
+};
+
+/**
+ * Splash 路径：icon -> splash(icon+bg) -> window
+ */
+export const SplashPath: Story = {
+ render: function SplashPathStory() {
+ const [state, setState] = useState<'idle' | 'splash' | 'window'>('idle');
+
+ const goSplash = () => {
+ setState('splash');
+ setTimeout(() => setState('window'), 900);
+ };
+
+ return (
+
+
+
+
+ );
+ },
+ play: async ({ canvasElement, step }) => {
+ const c = within(canvasElement);
+ await new Promise((r) => setTimeout(r, 200));
+
+ await step('初始 idle', async () => {
+ expect(c.getByTestId('status').textContent).toBe('idle');
+ expect(c.getByTestId('icon')).toBeInTheDocument();
+ });
+
+ await step('点击进入 splash', async () => {
+ await userEvent.click(c.getByTestId('icon'));
+ await new Promise((r) => setTimeout(r, 500));
+ expect(c.getByTestId('status').textContent).toBe('splash');
+ expect(c.getByTestId('splash-icon')).toBeInTheDocument();
+ });
+
+ await step('自动进入 window', async () => {
+ await new Promise((r) => setTimeout(r, 900));
+ expect(c.getByTestId('status').textContent).toBe('window');
+ expect(c.getByTestId('window')).toBeInTheDocument();
+ });
+
+ await step('关闭返回 idle', async () => {
+ await userEvent.click(c.getByTestId('btn-close'));
+ await new Promise((r) => setTimeout(r, 500));
+ expect(c.getByTestId('status').textContent).toBe('idle');
+ });
+ },
+};
diff --git a/src/services/miniapp-runtime/motion-experiment.stories.tsx b/src/services/miniapp-runtime/motion-experiment.stories.tsx
new file mode 100644
index 00000000..b3381d91
--- /dev/null
+++ b/src/services/miniapp-runtime/motion-experiment.stories.tsx
@@ -0,0 +1,323 @@
+/**
+ * Motion layoutId 实验
+ *
+ * 使用 motion/react 的 layoutId 实现共享元素过渡
+ *
+ * FLIP 思维：
+ * - First: 记录元素初始位置
+ * - Last: 记录元素最终位置
+ * - Invert: 计算反向 transform
+ * - Play: 播放动画
+ *
+ * layoutId 自动处理 FLIP，但需要正确使用 AnimatePresence
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+import { motion, MotionConfig, AnimatePresence, LayoutGroup } from 'motion/react';
+
+const meta: Meta = {
+ title: 'Services/MotionExperiment',
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * 基础 layoutId 测试 - FLIP 正确实现
+ *
+ * 关键：使用 LayoutGroup 包裹，确保 layoutId 跨组件工作
+ * 两个元素都在 AnimatePresence 内，实现正确的交叉淡化
+ */
+export const IconToSplash: Story = {
+ render: function IconToSplashStory() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ // 定义圆角数值，保持一致性
+ const BORDER_RADIUS_CLOSED = 16; // 对应 rounded-2xl
+ const BORDER_RADIUS_OPEN = 24; // 对应 rounded-3xl
+
+ return (
+
+
+
+
+ );
+ },
+ // Play 函数保持不变，因为逻辑和 testId 都保留了
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement);
+ await new Promise((resolve) => setTimeout(resolve, 300));
+
+ await step('初始: closed', async () => {
+ expect(canvas.getByTestId('status').textContent).toBe('closed');
+ expect(canvas.getByTestId('icon')).toBeInTheDocument();
+ });
+
+ await step('点击图标: 动画到中间', async () => {
+ await userEvent.click(canvas.getByTestId('icon'));
+ // 等待动画完成
+ await new Promise((resolve) => setTimeout(resolve, 800));
+
+ expect(canvas.getByTestId('status').textContent).toBe('open');
+ expect(canvas.getByTestId('splash-icon')).toBeInTheDocument();
+ });
+
+ await step('点击关闭: 动画回去', async () => {
+ await userEvent.click(canvas.getByTestId('splash-icon'));
+ await new Promise((resolve) => setTimeout(resolve, 800));
+
+ expect(canvas.getByTestId('status').textContent).toBe('closed');
+ expect(canvas.getByTestId('icon')).toBeInTheDocument();
+ });
+ },
+};
+
+// 模拟“胶囊按钮”组件
+const CapsuleButton = ({ onClose }: { onClose: () => void }) => {
+ return (
+
+ {/* 菜单按钮 (模拟) */}
+
+
+ {/* 分割线 */}
+
+
+ {/* 关闭按钮 (功能性) */}
+
+
+ );
+};
+
+export const IconToMiniProgram: Story = {
+ render: function IOSLaunch() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+
+
+ );
+ },
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement);
+ await new Promise((resolve) => setTimeout(resolve, 500));
+
+ await step('Tap Icon', async () => {
+ await userEvent.click(canvas.getByTestId('app-icon'));
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ expect(canvas.getByTestId('app-window')).toBeInTheDocument();
+ });
+
+ await step('Close App', async () => {
+ await userEvent.click(canvas.getByTestId('capsule-close'));
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ expect(canvas.getByTestId('app-icon')).toBeInTheDocument();
+ });
+ },
+};
diff --git a/src/services/miniapp-runtime/runtime-refs.ts b/src/services/miniapp-runtime/runtime-refs.ts
new file mode 100644
index 00000000..e0d5bf53
--- /dev/null
+++ b/src/services/miniapp-runtime/runtime-refs.ts
@@ -0,0 +1,253 @@
+/**
+ * Miniapp Runtime Refs
+ *
+ * 统一管理运行时所需的 DOM 引用（icon/window/stack/splash）。
+ *
+ * 设计原则：
+ * - SRP：这里只做 ref 的注册/查询/注销
+ * - KISS：不耦合动画实现细节
+ */
+
+import type { MiniappTargetDesktop } from '../ecosystem/types'
+
+/** 图标 container ref（popover-container） */
+const iconRefs = new Map()
+
+/** 图标 inner ref（popover-inner，用于 cover 缩放与淡入淡出） */
+const iconInnerRefs = new Map()
+
+/** Splash 背景 ref（用于启动屏动画） */
+const splashBgRefs = new Map()
+
+/** Splash 图标 ref（用于启动屏动画） */
+const splashIconRefs = new Map()
+
+/** window container ref（Popover） */
+let windowRef: HTMLElement | null = null
+
+/** window inner ref（用于 cover 缩放） */
+let windowInnerRef: HTMLElement | null = null
+
+/** Desktop slide 容器 refs（window 的最终目标区域） */
+const desktopContainerRefs = new Map()
+
+/** Desktop overlay grid host refs（MiniappWindowStack） */
+const desktopGridHostRefs = new Map()
+
+/** Desktop per-app slot refs（grid-area = appId） */
+const desktopAppSlotRefs = new Map>()
+
+// ============================================
+// Icon
+// ============================================
+
+/** 注册图标容器元素引用（popover-container） */
+export function registerIconRef(appId: string, element: HTMLElement): void {
+ iconRefs.set(appId, element)
+}
+
+/** 注册图标内容元素引用（popover-inner） */
+export function registerIconInnerRef(appId: string, element: HTMLElement): void {
+ iconInnerRefs.set(appId, element)
+}
+
+/** 注销图标元素引用（container/inner） */
+export function unregisterIconRef(appId: string): void {
+ iconRefs.delete(appId)
+ iconInnerRefs.delete(appId)
+}
+
+/** 获取图标 container 元素引用 */
+export function getIconRef(appId: string): HTMLElement | null {
+ return iconRefs.get(appId) ?? null
+}
+
+/** 获取图标 inner 元素引用 */
+export function getIconInnerRef(appId: string): HTMLElement | null {
+ return iconInnerRefs.get(appId) ?? null
+}
+
+// ============================================
+// Splash
+// ============================================
+
+/** 注册 Splash 背景元素引用 */
+export function registerSplashBgRef(appId: string, element: HTMLElement): void {
+ splashBgRefs.set(appId, element)
+}
+
+/** 注销 Splash 背景元素引用 */
+export function unregisterSplashBgRef(appId: string): void {
+ splashBgRefs.delete(appId)
+}
+
+/** 获取 Splash 背景元素引用 */
+export function getSplashBgRef(appId: string): HTMLElement | null {
+ return splashBgRefs.get(appId) ?? null
+}
+
+/** 注册 Splash 图标元素引用 */
+export function registerSplashIconRef(appId: string, element: HTMLElement): void {
+ splashIconRefs.set(appId, element)
+}
+
+/** 注销 Splash 图标元素引用 */
+export function unregisterSplashIconRef(appId: string): void {
+ splashIconRefs.delete(appId)
+}
+
+/** 获取 Splash 图标元素引用 */
+export function getSplashIconRef(appId: string): HTMLElement | null {
+ return splashIconRefs.get(appId) ?? null
+}
+
+// ============================================
+// Window
+// ============================================
+
+/** 注册 window container 元素引用 */
+export function registerWindowRef(element: HTMLElement): void {
+ windowRef = element
+}
+
+/** 获取 window container 元素引用 */
+export function getWindowRef(): HTMLElement | null {
+ return windowRef
+}
+
+/** 注册 window inner 元素引用 */
+export function registerWindowInnerRef(element: HTMLElement): void {
+ windowInnerRef = element
+}
+
+/** 获取 window inner 元素引用 */
+export function getWindowInnerRef(): HTMLElement | null {
+ return windowInnerRef
+}
+
+// ============================================
+// Desktop Containers
+// ============================================
+
+/** 注册 Desktop Slide 容器引用（window 最终目标区域） */
+export function registerDesktopContainerRef(targetDesktop: MiniappTargetDesktop, element: HTMLElement): void {
+ desktopContainerRefs.set(targetDesktop, element)
+}
+
+/** 注销 Desktop Slide 容器引用 */
+export function unregisterDesktopContainerRef(targetDesktop: MiniappTargetDesktop): void {
+ desktopContainerRefs.delete(targetDesktop)
+}
+
+/** 获取 Desktop Slide 容器引用 */
+export function getDesktopContainerRef(targetDesktop: MiniappTargetDesktop): HTMLElement | null {
+ return desktopContainerRefs.get(targetDesktop) ?? null
+}
+
+/**
+ * 获取 Desktop Slide 容器的 bounding rect
+ *
+ * 注意：只有当对应 slide 为 active 时，这个 rect 才是最终目标位置
+ */
+export function getDesktopRect(targetDesktop: MiniappTargetDesktop): DOMRect | null {
+ const containerRef = getDesktopContainerRef(targetDesktop)
+ if (!containerRef) return null
+
+ const slideEl = containerRef.closest('.swiper-slide')
+ if (slideEl && !slideEl.classList.contains('swiper-slide-active')) {
+ return null
+ }
+
+ const rect = containerRef.getBoundingClientRect()
+ if (rect.width <= 0 || rect.height <= 0) return null
+
+ return rect
+}
+
+// ============================================
+// Desktop Grid Host (MiniappWindowStack)
+// ============================================
+
+export function registerDesktopGridHostRef(targetDesktop: MiniappTargetDesktop, element: HTMLElement): void {
+ desktopGridHostRefs.set(targetDesktop, element)
+}
+
+export function unregisterDesktopGridHostRef(targetDesktop: MiniappTargetDesktop): void {
+ desktopGridHostRefs.delete(targetDesktop)
+}
+
+export function getDesktopGridHostRef(targetDesktop: MiniappTargetDesktop): HTMLElement | null {
+ return desktopGridHostRefs.get(targetDesktop) ?? null
+}
+
+// ============================================
+// Desktop App Slots
+// ============================================
+
+export function registerDesktopAppSlotRef(targetDesktop: MiniappTargetDesktop, appId: string, element: HTMLElement): void {
+ const byApp = desktopAppSlotRefs.get(targetDesktop) ?? new Map()
+ byApp.set(appId, element)
+ desktopAppSlotRefs.set(targetDesktop, byApp)
+}
+
+export function unregisterDesktopAppSlotRef(targetDesktop: MiniappTargetDesktop, appId: string): void {
+ const byApp = desktopAppSlotRefs.get(targetDesktop)
+ if (!byApp) return
+ byApp.delete(appId)
+ if (byApp.size === 0) {
+ desktopAppSlotRefs.delete(targetDesktop)
+ }
+}
+
+export function getDesktopAppSlotRef(targetDesktop: MiniappTargetDesktop, appId: string): HTMLElement | null {
+ return desktopAppSlotRefs.get(targetDesktop)?.get(appId) ?? null
+}
+
+/**
+ * 获取 app slot 的 rect
+ *
+ * 注意：只有当对应 slide 为 active 时，这个 rect 才是最终目标位置
+ */
+export function getDesktopAppSlotRect(targetDesktop: MiniappTargetDesktop, appId: string): DOMRect | null {
+ const slotRef = getDesktopAppSlotRef(targetDesktop, appId)
+ if (!slotRef) return null
+
+ const slideEl = slotRef.closest('.swiper-slide')
+ if (slideEl && !slideEl.classList.contains('swiper-slide-active')) {
+ return null
+ }
+
+ const rect = slotRef.getBoundingClientRect()
+ if (rect.width <= 0 || rect.height <= 0) return null
+
+ return rect
+}
+
+// ============================================
+// Stack (compat)
+// ============================================
+
+/** 注册 Stack Slide 容器引用（window 最终目标区域） */
+export function registerStackContainerRef(element: HTMLElement): void {
+ registerDesktopContainerRef('stack', element)
+}
+
+/** 注销 Stack Slide 容器引用 */
+export function unregisterStackContainerRef(): void {
+ unregisterDesktopContainerRef('stack')
+}
+
+/** 获取 Stack Slide 容器引用 */
+export function getStackContainerRef(): HTMLElement | null {
+ return getDesktopContainerRef('stack')
+}
+
+/**
+ * 获取 Stack Slide 容器的 bounding rect
+ *
+ * 注意：只有当 stack slide 为 active 时，这个 rect 才是最终目标位置
+ */
+export function getStackRect(): DOMRect | null {
+ return getDesktopRect('stack')
+}
+
diff --git a/src/services/miniapp-runtime/types.ts b/src/services/miniapp-runtime/types.ts
new file mode 100644
index 00000000..81a3a421
--- /dev/null
+++ b/src/services/miniapp-runtime/types.ts
@@ -0,0 +1,195 @@
+/**
+ * Miniapp Runtime Service Types
+ *
+ * 小程序运行时服务的类型定义
+ */
+
+import type { MiniappManifest } from '../ecosystem/types'
+import type { MiniappTargetDesktop } from '../ecosystem/types'
+import type { MiniappVisualConfig } from './visual-config'
+
+/** 小程序实例状态 */
+export type MiniappState = 'preparing' | 'launching' | 'splash' | 'active' | 'background' | 'closing'
+
+/** 窗口呈现状态（系统级，可见性） */
+export type MiniappPresentationState = 'hidden' | 'presenting' | 'presented' | 'dismissing'
+
+/** 进程/内容载体状态（iframe） */
+export type MiniappProcessStatus = 'loading' | 'loaded'
+
+/** 应用就绪状态（可交互门闩） */
+export type MiniappReadinessState = 'notReady' | 'ready'
+
+export type MiniappTransitionKind = 'present' | 'dismiss'
+
+export type MiniappTransitionStatus = 'requested' | 'inProgress' | 'completed' | 'cancelled'
+
+export interface MiniappTransition {
+ id: string
+ kind: MiniappTransitionKind
+ status: MiniappTransitionStatus
+ startedAt: number
+}
+
+export interface MiniappPresentation {
+ appId: string
+ desktop: MiniappTargetDesktop
+ state: MiniappPresentationState
+ zOrder: number
+ transitionId: string | null
+ transitionKind: MiniappTransitionKind | null
+}
+
+/** 小程序动画流（包含方向性） */
+export type MiniappFlow =
+ | 'closed'
+ | 'opening'
+ | 'splash'
+ | 'opened'
+ | 'backgrounding'
+ | 'backgrounded'
+ | 'foregrounding'
+ | 'closing'
+
+/** 胶囊主题 */
+export type CapsuleTheme = 'auto' | 'dark' | 'light'
+
+/**
+ * 小程序可控设置（miniapp → KeyApp）
+ *
+ * 通过 bio.updateContext() API 动态修改
+ * 修改后会触发 app:ctx-change 事件
+ *
+ * 注意：这与 KeyApp → miniapp 的 contextState 不同
+ * contextState 通过 postMessage 传递 theme/locale/env/a11y 给 miniapp
+ */
+export interface MiniappContext {
+ /**
+ * 胶囊按钮主题
+ * - 'auto': 跟随 KeyApp 主题（默认）
+ * - 'dark': 强制深色胶囊（适合浅色背景 app）
+ * - 'light': 强制浅色胶囊（适合深色背景 app）
+ */
+ capsuleTheme: CapsuleTheme
+}
+
+/** 小程序实例 */
+export interface MiniappInstance {
+ /** 应用 ID */
+ appId: string
+ /** 应用清单 */
+ manifest: MiniappManifest
+ /** 当前状态 */
+ state: MiniappState
+ /** 动画流状态（包含方向性） */
+ flow: MiniappFlow
+ /** 运行时上下文（可动态修改） */
+ ctx: MiniappContext
+ /** iframe 加载状态 */
+ processStatus: MiniappProcessStatus
+ /** 是否已就绪（由 iframe load 或 splash 关闭触发） */
+ readiness: MiniappReadinessState
+ /** 启动时间 */
+ launchedAt: number
+ /** 最后激活时间 */
+ lastActiveAt: number
+ /** iframe 元素引用 */
+ iframeRef: HTMLIFrameElement | null
+ /** 图标元素引用（用于 FLIP 动画） */
+ iconRef: HTMLElement | null
+}
+
+/** FLIP 动画帧数据 */
+export interface FlipFrame {
+ /** 元素位置和尺寸 */
+ rect: DOMRect
+ /** 不透明度 */
+ opacity: number
+ /** 圆角 */
+ borderRadius: number
+}
+
+/** FLIP 动画帧组 */
+export interface FlipFrames {
+ /** 起始帧 */
+ first: FlipFrame
+ /** 结束帧 */
+ last: FlipFrame
+ /** 动画持续时间 (ms) */
+ duration: number
+ /** 动画曲线 */
+ easing: string
+}
+
+/** 运行时状态 */
+export interface MiniappRuntimeState {
+ /** 所有运行中的应用 */
+ apps: Map
+ /** miniapp 视觉配置（motion + css token） */
+ visualConfig: MiniappVisualConfig
+ /** 当前交互焦点的应用 ID（兼容字段，旧逻辑仍使用） */
+ activeAppId: string | null
+ /** 当前交互焦点（多窗口架构下的正式字段） */
+ focusedAppId: string | null
+ /** 当前呈现中的窗口集合（多窗口） */
+ presentations: Map
+ /** z-index 递增种子 */
+ zOrderSeed: number
+ /** 是否处于层叠视图 */
+ isStackViewOpen: boolean
+ /** 最大后台应用数 */
+ maxBackgroundApps: number
+}
+
+/** 运行时事件 */
+export type MiniappRuntimeEvent =
+ | { type: 'app:launch'; appId: string; manifest: MiniappManifest }
+ | { type: 'app:activate'; appId: string }
+ | { type: 'app:deactivate'; appId: string }
+ | { type: 'app:close'; appId: string }
+ | { type: 'app:state-change'; appId: string; state: MiniappState }
+ | { type: 'app:ctx-change'; appId: string; ctx: MiniappContext }
+ | { type: 'stack-view:open' }
+ | { type: 'stack-view:close' }
+
+/** 运行时事件监听器 */
+export type MiniappRuntimeListener = (event: MiniappRuntimeEvent) => void
+
+/** 动画配置 */
+export interface AnimationConfig {
+ /** 启动动画持续时间 */
+ launchDuration: number
+ /** 关闭动画持续时间 */
+ closeDuration: number
+ /** iOS 动画曲线 */
+ iosEasing: string
+}
+
+/** 默认动画配置 */
+export const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
+ launchDuration: 400,
+ closeDuration: 400,
+ iosEasing: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
+}
+
+/** 窗口位置配置 */
+export interface WindowConfig {
+ /** 窗口到屏幕边缘的边距 */
+ margin: number
+ /** 窗口圆角 */
+ borderRadius: number
+ /** 安全区域 */
+ safeAreaInsets: {
+ top: number
+ bottom: number
+ left: number
+ right: number
+ }
+}
+
+/** 默认窗口配置 */
+export const DEFAULT_WINDOW_CONFIG: WindowConfig = {
+ margin: 0,
+ borderRadius: 0,
+ safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
+}
diff --git a/src/services/miniapp-runtime/visual-config.ts b/src/services/miniapp-runtime/visual-config.ts
new file mode 100644
index 00000000..50cefc9b
--- /dev/null
+++ b/src/services/miniapp-runtime/visual-config.ts
@@ -0,0 +1,143 @@
+import type { CSSProperties } from 'react'
+import type { Transition } from 'motion/react'
+
+export type MiniappCubicBezier = [number, number, number, number]
+
+export interface MiniappMotionTokens {
+ /** >1 更快，<1 更慢 */
+ timeScale: number
+ layoutDuration: number
+ uiFastDuration: number
+ layoutEase: MiniappCubicBezier
+ spring: {
+ stiffness: number
+ damping: number
+ mass: number
+ }
+}
+
+export interface MiniappCssTokens {
+ /** 预留：后续将 module.css 中的时间/缓动等 token 化 */
+}
+
+export interface MiniappVisualConfig {
+ motion: MiniappMotionTokens
+ css: MiniappCssTokens
+}
+
+export const DEFAULT_MINIAPP_VISUAL_CONFIG: MiniappVisualConfig = {
+ motion: {
+ timeScale: 1,
+ layoutDuration: 0.45,
+ uiFastDuration: 0.15,
+ layoutEase: [0.4, 0, 0.1, 1],
+ spring: {
+ stiffness: 220,
+ damping: 28,
+ mass: 0.85,
+ },
+ },
+ css: {},
+} as const
+
+export type MiniappVisualConfigUpdate = Partial<{
+ motion: Partial
+ css: Partial
+}>
+
+export interface MiniappMotionPresets {
+ /** 用于 MotionConfig（非 layout 动画的默认 transition） */
+ motionConfig: Transition
+ /** 用于所有 layoutId 节点：`transition={presets.sharedLayout}` */
+ sharedLayout: Transition
+ /** UI 快速过渡 */
+ uiFast: Transition
+}
+
+function clampTimeScale(value: number): number {
+ if (!Number.isFinite(value) || value <= 0) return 1
+ return value
+}
+
+function scaleDurationSeconds(duration: number, timeScale: number): number {
+ const scale = clampTimeScale(timeScale)
+ return duration / scale
+}
+
+function scaleSpring(value: number, timeScale: number, power: 1 | 2): number {
+ const scale = clampTimeScale(timeScale)
+ return value * Math.pow(scale, power)
+}
+
+export function mergeMiniappVisualConfig(
+ base: MiniappVisualConfig,
+ update: MiniappVisualConfigUpdate | undefined
+): MiniappVisualConfig {
+ if (!update) return base
+
+ return {
+ motion: {
+ ...base.motion,
+ ...(update.motion ?? {}),
+ spring: {
+ ...base.motion.spring,
+ ...(update.motion?.spring ?? {}),
+ },
+ },
+ css: {
+ ...base.css,
+ ...(update.css ?? {}),
+ },
+ }
+}
+
+const motionPresetsCache = new WeakMap()
+const cssVarsCache = new WeakMap()
+
+export function getMiniappMotionPresets(config: MiniappVisualConfig): MiniappMotionPresets {
+ const cached = motionPresetsCache.get(config)
+ if (cached) return cached
+
+ const { motion } = config
+
+ const motionConfig: Transition = {
+ type: 'spring',
+ stiffness: scaleSpring(motion.spring.stiffness, motion.timeScale, 2),
+ damping: scaleSpring(motion.spring.damping, motion.timeScale, 1),
+ mass: motion.spring.mass,
+ } as const
+
+ const layoutTransition = {
+ duration: scaleDurationSeconds(motion.layoutDuration, motion.timeScale),
+ ease: motion.layoutEase,
+ } as const
+
+ const sharedLayout: Transition = {
+ layout: layoutTransition,
+ } as const
+
+ const uiFast: Transition = {
+ duration: scaleDurationSeconds(motion.uiFastDuration, motion.timeScale),
+ ease: 'easeOut',
+ } as const
+
+ const presets: MiniappMotionPresets = { motionConfig, sharedLayout, uiFast }
+ motionPresetsCache.set(config, presets)
+ return presets
+}
+
+export function getMiniappCssVars(config: MiniappVisualConfig): CSSProperties {
+ const cached = cssVarsCache.get(config)
+ if (cached) return cached
+
+ const { motion } = config
+ const vars: CSSProperties = {
+ ['--miniapp-motion-time-scale' as any]: String(clampTimeScale(motion.timeScale)),
+ ['--miniapp-motion-layout-duration' as any]: `${scaleDurationSeconds(motion.layoutDuration, motion.timeScale)}s`,
+ ['--miniapp-motion-ui-fast-duration' as any]: `${scaleDurationSeconds(motion.uiFastDuration, motion.timeScale)}s`,
+ ['--miniapp-motion-layout-ease' as any]: `cubic-bezier(${motion.layoutEase.join(',')})`,
+ }
+
+ cssVarsCache.set(config, vars)
+ return vars
+}
diff --git a/src/stackflow/activities/MainTabsActivity.tsx b/src/stackflow/activities/MainTabsActivity.tsx
index 34718b90..4e66383c 100644
--- a/src/stackflow/activities/MainTabsActivity.tsx
+++ b/src/stackflow/activities/MainTabsActivity.tsx
@@ -1,35 +1,216 @@
-import { useState, Activity } from "react";
+import { useEffect, useState, Activity } from "react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
+import { SwiperSyncProvider } from "@/components/common/swiper-sync-context";
import { TabBar, type TabId } from "../components/TabBar";
import { WalletTab } from "./tabs/WalletTab";
import { EcosystemTab } from "./tabs/EcosystemTab";
import { SettingsTab } from "./tabs/SettingsTab";
+import { useFlow } from "../stackflow";
+import type { BioAccount, BioSignedTransaction, TransferParams } from "@/services/ecosystem";
+import {
+ getBridge,
+ initBioProvider,
+ setGetAccounts,
+ setSigningDialog,
+ setSignTransactionDialog,
+ setTransferDialog,
+ setWalletPicker,
+} from "@/services/ecosystem";
+import { walletSelectors, walletStore, type ChainAddress } from "@/stores";
+import { miniappRuntimeStore } from "@/services/miniapp-runtime";
type MainTabsParams = {
tab?: TabId;
};
export const MainTabsActivity: ActivityComponentType = ({ params }) => {
+ const { push } = useFlow();
const [activeTab, setActiveTab] = useState(params.tab || "wallet");
+ useEffect(() => {
+ initBioProvider();
+
+ getBridge().setPermissionRequestCallback(async (appId, appName, permissions) => {
+ const appIcon = miniappRuntimeStore.state.apps.get(appId)?.manifest.icon;
+
+ return new Promise((resolve) => {
+ const timeout = window.setTimeout(() => resolve(false), 30_000);
+
+ const handleResult = (e: Event) => {
+ window.clearTimeout(timeout);
+ const detail = (e as CustomEvent).detail as { approved?: boolean } | undefined;
+ resolve(detail?.approved === true);
+ };
+
+ window.addEventListener("permission-request", handleResult, { once: true });
+
+ push("PermissionRequestJob", {
+ appName,
+ appIcon,
+ permissions: JSON.stringify(permissions),
+ });
+ });
+ });
+
+ setWalletPicker(async (opts?: { chain?: string; exclude?: string; app?: { name: string; icon?: string } }) => {
+ const appName = opts?.app?.name;
+ const appIcon = opts?.app?.icon;
+
+ return new Promise((resolve) => {
+ const timeout = window.setTimeout(() => resolve(null), 30_000);
+
+ const cleanup = () => {
+ window.clearTimeout(timeout);
+ window.removeEventListener("wallet-picker-select", handleSelect);
+ window.removeEventListener("wallet-picker-cancel", handleCancel);
+ };
+
+ const handleSelect = (e: Event) => {
+ cleanup();
+ const detail = (e as CustomEvent).detail as { address: string; chain: string; name?: string };
+ resolve({ address: detail.address, chain: detail.chain, name: detail.name });
+ };
+
+ const handleCancel = () => {
+ cleanup();
+ resolve(null);
+ };
+
+ window.addEventListener("wallet-picker-select", handleSelect);
+ window.addEventListener("wallet-picker-cancel", handleCancel);
+
+ push("WalletPickerJob", {
+ chain: opts?.chain,
+ exclude: opts?.exclude,
+ ...(appName ? { appName } : {}),
+ ...(appIcon ? { appIcon } : {}),
+ });
+ });
+ });
+
+ setGetAccounts((): BioAccount[] => {
+ const state = walletStore.state;
+ const wallet = walletSelectors.getCurrentWallet(state);
+ if (!wallet) return [];
+
+ return wallet.chainAddresses.map((ca: ChainAddress) => ({
+ address: ca.address,
+ chain: ca.chain,
+ name: wallet.name,
+ }));
+ });
+
+ setSigningDialog(async (params) => {
+ return new Promise<{ signature: string; publicKey: string } | null>((resolve) => {
+ const timeout = window.setTimeout(() => resolve(null), 60_000);
+
+ const handleResult = (e: Event) => {
+ window.clearTimeout(timeout);
+ const detail = (e as CustomEvent).detail as
+ | { confirmed?: boolean; signature?: string; publicKey?: string }
+ | undefined;
+ if (detail?.confirmed && detail.signature && detail.publicKey) {
+ resolve({ signature: detail.signature, publicKey: detail.publicKey });
+ return;
+ }
+ resolve(null);
+ };
+
+ window.addEventListener("signing-confirm", handleResult, { once: true });
+ push("SigningConfirmJob", {
+ message: params.message,
+ address: params.address,
+ appName: params.app.name,
+ appIcon: params.app.icon ?? "",
+ chainName: "bioforest",
+ });
+ });
+ });
+
+ setTransferDialog(async (params: TransferParams & { app: { name: string; icon?: string } }) => {
+ return new Promise<{ txHash: string } | null>((resolve) => {
+ const timeout = window.setTimeout(() => resolve(null), 60_000);
+
+ const handleResult = (e: Event) => {
+ window.clearTimeout(timeout);
+ const detail = (e as CustomEvent).detail as { confirmed?: boolean; txHash?: string } | undefined;
+ if (detail?.confirmed && detail.txHash) {
+ resolve({ txHash: detail.txHash });
+ return;
+ }
+ resolve(null);
+ };
+
+ window.addEventListener("miniapp-transfer-confirm", handleResult, { once: true });
+ push("MiniappTransferConfirmJob", {
+ appName: params.app.name,
+ appIcon: params.app.icon ?? "",
+ from: params.from,
+ to: params.to,
+ amount: params.amount,
+ chain: params.chain,
+ ...(params.asset ? { asset: params.asset } : {}),
+ });
+ });
+ });
+
+ setSignTransactionDialog(async (params) => {
+ return new Promise((resolve) => {
+ const timeout = window.setTimeout(() => resolve(null), 60_000);
+
+ const handleResult = (e: Event) => {
+ window.clearTimeout(timeout);
+ const detail = (e as CustomEvent).detail as
+ | { confirmed?: boolean; signedTx?: BioSignedTransaction }
+ | undefined;
+ if (detail?.confirmed && detail.signedTx) {
+ resolve(detail.signedTx);
+ return;
+ }
+ resolve(null);
+ };
+
+ window.addEventListener("miniapp-sign-transaction-confirm", handleResult, { once: true });
+ push("MiniappSignTransactionJob", {
+ appName: params.app.name,
+ appIcon: params.app.icon ?? "",
+ from: params.from,
+ chain: params.chain,
+ unsignedTx: JSON.stringify(params.unsignedTx),
+ });
+ });
+ });
+
+ return () => {
+ getBridge().setPermissionRequestCallback(null);
+ setWalletPicker(null);
+ setGetAccounts(null);
+ setSigningDialog(null);
+ setTransferDialog(null);
+ setSignTransactionDialog(null);
+ };
+ }, [push]);
+
return (
-
+
);
};
diff --git a/src/stackflow/activities/MiniappActivity.tsx b/src/stackflow/activities/MiniappActivity.tsx
deleted file mode 100644
index 210f4958..00000000
--- a/src/stackflow/activities/MiniappActivity.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { ActivityComponentType } from '@stackflow/react'
-import { AppScreen } from '@stackflow/plugin-basic-ui'
-import { useFlow } from '../stackflow'
-import { MiniappPage } from '@/pages/ecosystem/miniapp'
-
-type MiniappParams = {
- appId: string
-}
-
-export const MiniappActivity: ActivityComponentType = ({ params }) => {
- const { pop } = useFlow()
-
- return (
-
- pop()} />
-
- )
-}
diff --git a/src/stackflow/activities/MiniappDetailActivity.tsx b/src/stackflow/activities/MiniappDetailActivity.tsx
index 61765c90..9c806c2c 100644
--- a/src/stackflow/activities/MiniappDetailActivity.tsx
+++ b/src/stackflow/activities/MiniappDetailActivity.tsx
@@ -31,6 +31,8 @@ import {
IconLink,
} from '@tabler/icons-react'
import { cn } from '@/lib/utils'
+import { launchApp } from '@/services/miniapp-runtime'
+import { ecosystemActions } from '@/stores/ecosystem'
type MiniappDetailActivityParams = {
appId: string
@@ -112,7 +114,7 @@ function InfoRow({
export const MiniappDetailActivity: ActivityComponentType = ({ params }) => {
const { t } = useTranslation('common')
- const { pop, push } = useFlow()
+ const { pop } = useFlow()
const [app, setApp] = useState(null)
const [loading, setLoading] = useState(true)
const [descExpanded, setDescExpanded] = useState(false)
@@ -155,8 +157,10 @@ export const MiniappDetailActivity: ActivityComponentType {
if (!app) return
updateLastUsed(app.id)
- push('MiniappActivity', { appId: app.id })
- }, [app, push])
+ ecosystemActions.setActiveSubPage('mine')
+ launchApp(app.id, { ...app, targetDesktop: 'mine' })
+ pop()
+ }, [app, pop])
if (loading) {
return (
diff --git a/src/stackflow/activities/tabs/EcosystemTab.tsx b/src/stackflow/activities/tabs/EcosystemTab.tsx
index dd74fcdf..e7ef92ac 100644
--- a/src/stackflow/activities/tabs/EcosystemTab.tsx
+++ b/src/stackflow/activities/tabs/EcosystemTab.tsx
@@ -1,7 +1,4 @@
import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import type { Swiper as SwiperType } from 'swiper';
-import 'swiper/css';
import { useFlow } from '../../stackflow';
import { LoadingSpinner } from '@/components/common/loading-spinner';
import {
@@ -15,43 +12,18 @@ import {
type MyAppRecord,
} from '@/services/ecosystem';
import type { MiniappManifest } from '@/services/ecosystem';
-import { DiscoverPage, MyAppsPage, type DiscoverPageRef } from '@/components/ecosystem';
+import { EcosystemDesktop, type EcosystemDesktopHandle } from '@/components/ecosystem';
import { computeFeaturedScore } from '@/services/ecosystem/scoring';
+import { launchApp } from '@/services/miniapp-runtime';
import { ecosystemActions } from '@/stores/ecosystem';
-type TabType = 'discover' | 'mine';
-
export function EcosystemTab() {
const { push } = useFlow();
+ const desktopRef = useRef(null);
const [apps, setApps] = useState([]);
const [myAppRecords, setMyAppRecords] = useState([]);
const [loading, setLoading] = useState(true);
- // 从 localStorage 读取上次的 tab
- const [activeTab, setActiveTab] = useState(() => {
- try {
- const saved = localStorage.getItem('ecosystem_active_tab');
- const tab = saved === 'mine' ? 'mine' : 'discover';
- // 同步到 store
- ecosystemActions.setActiveSubPage(tab);
- return tab;
- } catch {
- return 'discover';
- }
- });
-
- // 保存 tab 到 localStorage
- useEffect(() => {
- try {
- localStorage.setItem('ecosystem_active_tab', activeTab);
- } catch {
- // ignore
- }
- }, [activeTab]);
-
- const swiperRef = useRef(null);
- const discoverPageRef = useRef(null);
-
// 初始化数据
useEffect(() => {
const unsubscribe = subscribeApps((nextApps) => setApps(nextApps));
@@ -65,23 +37,6 @@ export function EcosystemTab() {
return () => unsubscribe();
}, []);
- // Swiper 事件
- const handleSlideChange = useCallback((swiper: SwiperType) => {
- const newTab = swiper.activeIndex === 0 ? 'discover' : 'mine';
- setActiveTab(newTab);
- // 同步到 store（用于 TabBar 图标切换）
- ecosystemActions.setActiveSubPage(newTab);
- }, []);
-
- // 搜索胶囊点击：滑到发现页 + 聚焦搜索框
- const handleSearchClick = useCallback(() => {
- swiperRef.current?.slideTo(0);
- // 延迟聚焦，等待滑动完成
- setTimeout(() => {
- discoverPageRef.current?.focusSearch();
- }, 300);
- }, []);
-
// App 操作
const handleAppDetail = useCallback(
(app: MiniappManifest) => {
@@ -95,9 +50,15 @@ export function EcosystemTab() {
addToMyApps(app.id);
updateLastUsed(app.id);
setMyAppRecords(loadMyApps());
- push('MiniappActivity', { appId: app.id });
+
+ // 为了保证 shared layout 捕获到 icon 的起点位置，先固定到 mine
+ ecosystemActions.setActiveSubPage('mine');
+ desktopRef.current?.slideTo('mine');
+ requestAnimationFrame(() => {
+ launchApp(app.id, { ...app, targetDesktop: 'mine' });
+ });
},
- [push],
+ [],
);
const handleAppRemove = useCallback((appId: string) => {
@@ -112,7 +73,8 @@ export function EcosystemTab() {
...record,
app: apps.find((a) => a.id === record.appId),
}))
- .filter((item): item is MyAppRecord & { app: MiniappManifest } => !!item.app);
+ .filter((item): item is MyAppRecord & { app: MiniappManifest } => !!item.app)
+ .map(({ app, lastUsedAt }) => ({ app, lastUsed: lastUsedAt }));
}, [myAppRecords, apps]);
const featuredApps = useMemo(() => {
@@ -120,8 +82,6 @@ export function EcosystemTab() {
return [...apps].sort((a, b) => computeFeaturedScore(b) - computeFeaturedScore(a)).slice(0, 2);
}, [apps]);
- const featuredApp = featuredApps[0];
-
const recommendedApps = useMemo(() => {
const featuredIds = new Set(featuredApps.map((a) => a.id));
return [...apps]
@@ -143,39 +103,18 @@ export function EcosystemTab() {
}
return (
- = {
+ discover: IconApps,
+ mine: IconBrandMiniprogram,
+ stack: IconAppWindowFilled,
+};
+
+/** 生态页面指示器（真实项目使用） - 使用 Controller 模块实现双向绑定 */
+function useEcosystemIndicator(availablePages: EcosystemSubPage[], isActive: boolean) {
+ const pageCount = availablePages.length
+ const maxIndex = pageCount - 1
+
+ const { onSwiper, controlledSwiper } = useSwiperMember('ecosystem-indicator', 'ecosystem-main')
+
+ const swiperRef = useRef(null)
+
+ useEffect(() => {
+ if (swiperRef.current) {
+ swiperRef.current.allowTouchMove = isActive
+ }
+ }, [isActive])
+
+ const [progress, setProgress] = useState(0)
+ const indexProgress = maxIndex > 0 ? progress * maxIndex : 0
+
+ const getIconOpacity = (index: number) => {
+ const distance = Math.abs(indexProgress - index)
+ return Math.max(0, 1 - distance)
+ }
+
+ return {
+ icon: (
+ {
+ swiperRef.current = swiper
+ onSwiper(swiper)
+ }}
+ onProgress={(_, p) => setProgress(p)}
+ slidesPerView="auto"
+ centeredSlides={true}
+ spaceBetween={8}
+ allowTouchMove={isActive}
+ resistance={true}
+ resistanceRatio={0.5}
+ >
+ {availablePages.map((page, index) => {
+ const PageIcon = PAGE_ICONS[page]
+ const opacity = getIconOpacity(index)
+ return (
+
+
+ )
+ })}
+
+ ),
+ label: (
+
+
)}
+
+ {/* label：永远处于静态布局（不进入 popover top-layer），避免启动动画把文字一起“拎走” */}
+
+ {app.name}
+
);
}
@@ -237,24 +421,46 @@ function EmptyState() {
// ============================================
export interface MyAppsPageProps {
apps: Array<{ app: MiniappManifest; lastUsed: number }>;
+ /** 是否显示搜索框（默认 true，关闭发现页时应设为 false） */
+ showSearch?: boolean;
onSearchClick: () => void;
onAppOpen: (app: MiniappManifest) => void;
onAppDetail: (app: MiniappManifest) => void;
onAppRemove: (appId: string) => void;
}
-export function MyAppsPage({ apps, onSearchClick, onAppOpen, onAppDetail, onAppRemove }: MyAppsPageProps) {
+export function MyAppsPage({
+ apps,
+ showSearch = true,
+ onSearchClick,
+ onAppOpen,
+ onAppDetail,
+ onAppRemove,
+}: MyAppsPageProps) {
const columns = 4;
const pageSize = columns * 6;
const pages = Math.ceil(apps.length / pageSize);
+ const mineContainerRef = useRef{app.name}
{app.description}
@@ -213,6 +392,11 @@ function IOSDesktopIcon({ app, onTap, onOpen, onDetail, onRemove }: IOSDesktopIc
- {/* 顶部区域 - 搜索胶囊 */}
-
-
+
-
+ {/* 顶部区域 - 搜索胶囊（仅在有发现页时显示） */}
+ {showSearch ? (
+
+
+ ) : (
+
+ )}
{/* 内容区 */}
{apps.length === 0 ? (
@@ -298,6 +504,6 @@ export function MyAppsPage({ apps, onSearchClick, onAppOpen, onAppDetail, onAppR
{/* TabBar spacer */}
-
-
- )
- }
+export const SourceIcon = forwardRef
-
- )
+ );
}
-)
+
+ // 默认 HTTPS 锁图标
+ return (
+
+
+ );
+});
diff --git a/src/components/ecosystem/swiper-sync-demo.stories.tsx b/src/components/ecosystem/swiper-sync-demo.stories.tsx
new file mode 100644
index 00000000..5e40fb67
--- /dev/null
+++ b/src/components/ecosystem/swiper-sync-demo.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SwiperSyncDemo, SwiperSyncDemoContext } from './swiper-sync-demo';
+
+const meta: Meta
+
+ );
+}
+
+/**
+ * 方案三：Context 封装模式（使用 Controller 模块）
+ */
+import {
+ SwiperSyncProvider,
+ useSwiperMember,
+} from '@/components/common/swiper-sync-context';
+
+/** 主 Swiper 组件 */
+function MainSwiperWithContext() {
+ // 自己是 'main'，要控制 'indicator'
+ const { onSwiper, controlledSwiper } = useSwiperMember('main', 'indicator');
+ const [progress, setProgress] = useState(0);
+
+ return (
+ 方案一：Controller 模块（官方推荐）
+ + {/* 调试信息 */} +
+
+
+ {/* 主 Swiper */}
+ Progress: {displayProgress.toFixed(3)}
+ Active Index: {Math.round(displayProgress * (PAGES.length - 1))}
+
+ setDisplayProgress(p)}
+ >
+ {PAGES.map((page) => (
+
+ {page}
+
+ ))}
+
+
+
+ {/* 指示器 Swiper */}
+ 主 Swiper
+
+
+
+ {/* 手动控制 */}
+ 指示器 Swiper
+
+
+ {PAGES.map((page, index) => (
+
+
+ ))}
+
+
+
+ {index + 1}
+
+
+ {PAGES.map((_, index) => (
+
+ ))}
+
+
+ setProgress(p)}
+ >
+ {PAGES.map((page) => (
+
+ {page}
+
+ ))}
+
+
+ {/* 调试信息 */}
+
+ );
+}
+
+/** 指示器 Swiper 组件 */
+function IndicatorSwiperWithContext() {
+ // 自己是 'indicator'，要控制 'main'
+ const { onSwiper, controlledSwiper } = useSwiperMember('indicator', 'main');
+ const [progress, setProgress] = useState(0);
+ const maxIndex = PAGES.length - 1;
+
+ // 计算图标透明度
+ const getOpacity = (index: number) => {
+ const currentIndex = progress * maxIndex;
+ const distance = Math.abs(currentIndex - index);
+ return Math.max(0.3, 1 - distance);
+ };
+
+ return (
+
+ 主 Swiper（独立组件）
+
+
+ Progress: {progress.toFixed(3)} | Index: {Math.round(progress * (PAGES.length - 1))}
+
+
+
+ );
+}
+
+/** 方案三：Context 封装 Demo */
+export function SwiperSyncDemoContext() {
+ return (
+
+ 指示器 Swiper（独立组件）
+
+
+ setProgress(p)}
+ slidesPerView={1}
+ resistance={true}
+ resistanceRatio={0.5}
+ >
+ {PAGES.map((page, index) => (
+
+
+ ))}
+
+
+ {/* 分页点 */}
+
+
+ {index + 1}
+
+
+ {PAGES.map((_, index) => {
+ const isActive = Math.round(progress * maxIndex) === index;
+ return (
+
+ );
+ })}
+
+
+
+ 方案三：Context 封装模式
++ 使用 SwiperSyncProvider + useSwiperMember + Controller 模块实现跨组件同步 +
+ +Content: {tab}
}
-
- )
- }
-
- return (
- {error}
- -
- {/* Header */}
-
- )
-}
-
-export default MiniappPage
diff --git a/src/services/authorize/__tests__/signature-auth.test.ts b/src/services/authorize/__tests__/signature-auth.test.ts
index 5c3237a7..e9fecb6b 100644
--- a/src/services/authorize/__tests__/signature-auth.test.ts
+++ b/src/services/authorize/__tests__/signature-auth.test.ts
@@ -119,8 +119,9 @@ describe('SignatureAuthService', () => {
const sig1 = await service.handleMessageSign(payload, encryptedSecret, 'pwd')
const sig2 = await service.handleMessageSign(payload, encryptedSecret, 'pwd')
- expect(sig1).toMatch(/^0x[0-9a-f]{128}$/)
- expect(sig1).toBe(sig2)
+ expect(sig1.signature).toMatch(/^0x[0-9a-f]{128}$/)
+ expect(sig1.publicKey).toMatch(/^[0-9a-f]{64}$/)
+ expect(sig1).toEqual(sig2)
expect(crypto.decrypt).not.toHaveBeenCalled()
})
@@ -151,8 +152,9 @@ describe('SignatureAuthService', () => {
const sig1 = await service.handleMessageSign(payload, encryptedSecret, 'pwd')
const sig2 = await service.handleMessageSign(payload, encryptedSecret, 'pwd')
- expect(sig1).toMatch(/^0x[0-9a-f]{128}$/)
- expect(sig1).toBe(sig2)
+ expect(sig1.signature).toMatch(/^0x[0-9a-f]{128}$/)
+ expect(sig1.publicKey).toMatch(/^[0-9a-f]{64}$/)
+ expect(sig1).toEqual(sig2)
expect(crypto.decrypt).toHaveBeenCalledWith(encryptedSecret, 'pwd')
expect(crypto.verifyPassword).not.toHaveBeenCalled()
})
diff --git a/src/services/ecosystem/bridge.ts b/src/services/ecosystem/bridge.ts
index dcdecbcb..000a9932 100644
--- a/src/services/ecosystem/bridge.ts
+++ b/src/services/ecosystem/bridge.ts
@@ -136,10 +136,18 @@ export class PostMessageBridge {
}
// Check permissions
- const skipPermissionCheck = ['bio_connect'].includes(method)
+ const skipPermissionCheck = ['bio_connect', 'bio_closeSplashScreen'].includes(method)
if (!skipPermissionCheck) {
+ const accountRelatedMethods = ['bio_accounts', 'bio_selectAccount', 'bio_pickWallet']
+ const shouldMapToRequestAccounts =
+ accountRelatedMethods.includes(method) && this.manifestPermissions.includes('bio_requestAccounts')
+ const permissionKey = shouldMapToRequestAccounts ? 'bio_requestAccounts' : method
+
// 1. 检查 manifest 是否声明了该权限
- if (!this.manifestPermissions.includes(method) && method !== 'bio_requestAccounts') {
+ const isDeclaredInManifest =
+ this.manifestPermissions.includes(method) || method === 'bio_requestAccounts' || shouldMapToRequestAccounts
+
+ if (!isDeclaredInManifest) {
this.sendResponse(createErrorResponse(
id,
BioErrorCodes.UNAUTHORIZED,
@@ -149,11 +157,11 @@ export class PostMessageBridge {
}
// 2. 对于敏感方法，检查用户是否已授权
- if (isSensitiveMethod(method)) {
- const granted = hasPermission(this.appId, method)
+ if (isSensitiveMethod(permissionKey)) {
+ const granted = hasPermission(this.appId, permissionKey)
if (!granted) {
// 请求权限
- const approved = await this.requestPermission([method])
+ const approved = await this.requestPermission([permissionKey])
if (!approved) {
this.sendResponse(createErrorResponse(
id,
diff --git a/src/services/ecosystem/handlers/index.ts b/src/services/ecosystem/handlers/index.ts
index c136076c..ebefa2e3 100644
--- a/src/services/ecosystem/handlers/index.ts
+++ b/src/services/ecosystem/handlers/index.ts
@@ -4,6 +4,8 @@
export { HandlerContext, getCallbacksOrThrow, type HandlerCallbacks, type SigningParams, type SignTransactionParams } from './context'
+export { handleCloseSplashScreen } from './system'
+
export {
handleConnect,
handleRequestAccounts,
diff --git a/src/services/ecosystem/handlers/system.ts b/src/services/ecosystem/handlers/system.ts
new file mode 100644
index 00000000..fe02c87d
--- /dev/null
+++ b/src/services/ecosystem/handlers/system.ts
@@ -0,0 +1,12 @@
+/**
+ * System-level method handlers
+ */
+
+import type { MethodHandler } from '../types'
+import { dismissSplash } from '@/services/miniapp-runtime'
+
+/** bio_closeSplashScreen - Mark app ready and close splash overlay */
+export const handleCloseSplashScreen: MethodHandler = async (_params, context) => {
+ dismissSplash(context.appId)
+ return undefined
+}
diff --git a/src/services/ecosystem/permissions.ts b/src/services/ecosystem/permissions.ts
index 344694b5..4d06318c 100644
--- a/src/services/ecosystem/permissions.ts
+++ b/src/services/ecosystem/permissions.ts
@@ -7,6 +7,7 @@ import { ecosystemStore, ecosystemSelectors, ecosystemActions } from '@/stores/e
/** 敏感方法列表（需要用户确认） */
export const SENSITIVE_METHODS = [
+ 'bio_requestAccounts',
'bio_signMessage',
'bio_signTypedData',
'bio_signTransaction',
diff --git a/src/services/ecosystem/provider.ts b/src/services/ecosystem/provider.ts
index f9dc80af..481b99bc 100644
--- a/src/services/ecosystem/provider.ts
+++ b/src/services/ecosystem/provider.ts
@@ -7,6 +7,7 @@
import { bridge } from './bridge'
import {
handleConnect,
+ handleCloseSplashScreen,
handleRequestAccounts,
handleAccounts,
handleSelectAccount,
@@ -24,6 +25,7 @@ import {
export function initBioProvider(): void {
// Wallet methods
bridge.registerHandler('bio_connect', handleConnect)
+ bridge.registerHandler('bio_closeSplashScreen', handleCloseSplashScreen)
bridge.registerHandler('bio_requestAccounts', handleRequestAccounts)
bridge.registerHandler('bio_accounts', handleAccounts)
bridge.registerHandler('bio_selectAccount', handleSelectAccount)
@@ -44,6 +46,7 @@ export function initBioProvider(): void {
console.log('[BioProvider] Initialized with handlers:', [
'bio_connect',
+ 'bio_closeSplashScreen',
'bio_requestAccounts',
'bio_accounts',
'bio_selectAccount',
diff --git a/src/services/ecosystem/schema.ts b/src/services/ecosystem/schema.ts
index 444a1cd8..9411a06a 100644
--- a/src/services/ecosystem/schema.ts
+++ b/src/services/ecosystem/schema.ts
@@ -17,6 +17,10 @@ const SplashScreenSchema = z.union([
}).passthrough(),
])
+const CapsuleThemeSchema = z.enum(['auto', 'dark', 'light'])
+
+const TargetDesktopSchema = z.enum(['stack', 'mine'])
+
export const MiniappManifestSchema = z
.object({
id: z.string(),
@@ -40,6 +44,8 @@ export const MiniappManifestSchema = z
officialScore: z.number().min(0).max(100).optional(),
communityScore: z.number().min(0).max(100).optional(),
splashScreen: SplashScreenSchema.optional(),
+ capsuleTheme: CapsuleThemeSchema.optional(),
+ targetDesktop: TargetDesktopSchema.optional(),
themeColor: z.string().optional(),
themeColorFrom: z.string().optional(),
themeColorTo: z.string().optional(),
diff --git a/src/services/ecosystem/types.ts b/src/services/ecosystem/types.ts
index 1c43df52..3f6db33b 100644
--- a/src/services/ecosystem/types.ts
+++ b/src/services/ecosystem/types.ts
@@ -65,6 +65,9 @@ export type MiniappCategory =
| 'exchange' // 交易所
| 'other' // 其他
+/** Miniapp target desktop page */
+export type MiniappTargetDesktop = 'stack' | 'mine'
+
/** Permission definition */
export interface PermissionDefinition {
id: string
@@ -186,6 +189,20 @@ export interface MiniappManifest {
/** 最大等待时间 (ms)，超时后自动关闭启动屏，默认 5000 */
timeout?: number
}
+ /**
+ * 胶囊主题（可选）
+ * - 'auto': 跟随 KeyApp 主题（默认）
+ * - 'dark': 强制深色胶囊
+ * - 'light': 强制浅色胶囊
+ */
+ capsuleTheme?: 'auto' | 'dark' | 'light'
+
+ /**
+ * 目标桌面页（可选，默认 'stack'）
+ * - 'stack': 渲染到应用堆栈页（stack slide）
+ * - 'mine': 渲染到我的页（mine slide）
+ */
+ targetDesktop?: MiniappTargetDesktop
/**
* 主题色 - 用于卡片背景等
* 格式: CSS 渐变类名 (Tailwind) 或 HEX 颜色
diff --git a/src/services/miniapp-runtime/MiniappVisualProvider.tsx b/src/services/miniapp-runtime/MiniappVisualProvider.tsx
new file mode 100644
index 00000000..f5588597
--- /dev/null
+++ b/src/services/miniapp-runtime/MiniappVisualProvider.tsx
@@ -0,0 +1,28 @@
+import type { PropsWithChildren } from 'react'
+import { MotionConfig } from 'motion/react'
+import { useStore } from '@tanstack/react-store'
+import { miniappRuntimeSelectors, miniappRuntimeStore } from './index'
+import {
+ getMiniappCssVars,
+ getMiniappMotionPresets,
+ mergeMiniappVisualConfig,
+ type MiniappVisualConfigUpdate,
+} from './visual-config'
+
+export function MiniappVisualProvider({
+ children,
+ override,
+}: PropsWithChildren<{ override?: MiniappVisualConfigUpdate }>) {
+ const baseConfig = useStore(miniappRuntimeStore, miniappRuntimeSelectors.getVisualConfig)
+ const config = mergeMiniappVisualConfig(baseConfig, override)
+ const presets = getMiniappMotionPresets(config)
+ const cssVars = getMiniappCssVars(config)
+
+ return (
+
-
-
-
-
- {/* Loading overlay */}
- {loading && (
-
-
-
-
- {app?.name ?? '加载中...'}
- {app?.author && ( -{app.author}
- )} -
-
- )}
-
- {/* Splash screen overlay */}
- {splashVisible && app?.splashScreen && (
-
-
-
- {t('loading', '加载中...')}
-
-
- )}
-
- {/* Iframe container */}
- {app && iframeUrl && (
-
- )}
-
- {/* 启动屏图标 - 使用 app.icon */}
-
-
- {
- e.currentTarget.style.display = 'none'
- }}
- />
-
- {/* 加载指示器 */}
-
-
+
+ {children}
+
+
+ )
+}
diff --git a/src/services/miniapp-runtime/iframe-manager.ts b/src/services/miniapp-runtime/iframe-manager.ts
new file mode 100644
index 00000000..b4aac79d
--- /dev/null
+++ b/src/services/miniapp-runtime/iframe-manager.ts
@@ -0,0 +1,172 @@
+/**
+ * Iframe Manager
+ *
+ * 管理小程序 iframe 的生命周期
+ * - 前台应用：正常渲染
+ * - 后台应用：最多 4 个，visibility: hidden
+ * - 超出限制：从 DOM 移除
+ */
+
+import type { MiniappInstance } from './types'
+
+/** 最大后台 iframe 数量 */
+const MAX_BACKGROUND_IFRAMES = 4
+
+/** iframe 容器 ID */
+const IFRAME_CONTAINER_ID = 'miniapp-iframe-container'
+const HIDDEN_CONTAINER_ID = 'miniapp-hidden-container'
+
+/**
+ * 获取或创建 iframe 容器
+ */
+function getOrCreateContainer(id: string, hidden: boolean): HTMLElement {
+ let container = document.getElementById(id)
+ if (!container) {
+ container = document.createElement('div')
+ container.id = id
+ if (hidden) {
+ container.style.cssText = `
+ position: fixed;
+ top: -9999px;
+ left: -9999px;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ visibility: hidden;
+ pointer-events: none;
+ `
+ }
+ document.body.appendChild(container)
+ }
+ return container
+}
+
+/**
+ * 创建小程序 iframe
+ */
+export function createIframe(
+ appId: string,
+ url: string,
+ contextParams?: Record
+ {/* idle icon */}
+
+ {state === 'idle' && (
+ setState('window')}
+ data-testid="icon"
+ >
+
+
+ 🚀
+
+
+
+ )}
+
+
+ {/* window */}
+
+ {state === 'window' && (
+
+
+ )}
+
+
+
+
+
+
+ 🚀
+
+
+ My Miniapp
+
+
+ Miniapp 内容区域
+
+ 状态: {state}
+
+
+ {/* idle icon */}
+
+ {state === 'idle' && (
+
+
+
+ 🎯
+
+
+
+ )}
+
+
+ {/* splash 背景 */}
+
+ {state === 'splash' && (
+
+
+ {/* splash icon 居中 */}
+
+ {state === 'splash' && (
+
+
+
+ 🎯
+
+
+
+ )}
+
+
+ {/* window */}
+
+ {state === 'window' && (
+
+
+ )}
+
+
+
+
+
+
+ 🎯
+
+
+ Splash Miniapp
+
+
+
+
+ App 内容区域
+
+ 状态: {state}
+
+
+
+ {!isOpen ? (
+ /* ================= CLOSED (Icon) ================= */
+ setIsOpen(true)}
+ data-testid="icon"
+ >
+
+
+ 🚀
+
+
+
+ ) : (
+ /* ================= OPEN (Window) ================= */
+
+ {
+ e.stopPropagation();
+ setIsOpen(false);
+ }}
+ data-testid="splash-icon"
+ >
+
+ 🚀
+
+
+
+
+ 点击图标关闭
+
+
+ )}
+
+
+
+
+ 状态: {isOpen ? 'open' : 'closed'}
+
+
+
+ {!isOpen ? (
+ /* ================= ICON 状态 ================= */
+ setIsOpen(true)}
+ data-testid="app-icon"
+ >
+ {/* 2. Logo 变形：居中，尺寸较小 */}
+
+
+
+
+ ) : (
+ /* ================= WINDOW 状态 ================= */
+
+ {/*
+ 核心技巧：
+ 在 Window 打开时，Logo 依然存在且居中，但是变大了。
+ Motion 会自动计算小 Logo 到大 Logo 的插值。
+ 这给人的感觉就是“图标放大了”。
+ */}
+
+ )}
+
+
+ iOS 风格启动：图标内容随窗口同步放大
+
+
+
+ {/* 这里 Logo 变大了，并且透明度逐渐变淡，因为内容要浮现了 */}
+
+
+
+
+
+
+ {/* ================= 实际 APP 内容 ================= */}
+ {/* 使用 absolute 覆盖在 Splash Logo 上，并延迟显示 */}
+
+ setIsOpen(false)} />
+
+
+
+
+ My App
+Designed by Apple in California
+ +
+ {[1, 2, 3, 4].map((i) => (
+
+
+
+
+
+ ))}
+
- {/* Content area - 各 Tab 内部自己管理滚动和 pb */}
-
-
-
-
-
-
-
- {/* TabBar - 固定在底部 */}
-
+
+ {/* Content area - 各 Tab 内部自己管理滚动和 pb */}
+
+
+
+
+
+
+
+ {/* TabBar - 固定在底部 */}
+
+
- { swiperRef.current = swiper; }}
- onSlideChange={handleSlideChange}
- resistanceRatio={0.5}
- >
- {/* 发现页 - 负一屏 */}
-
-
-
- {/* 我的页 - iOS 桌面 */}
-
- ({ app, lastUsed }))}
- onSearchClick={handleSearchClick}
- onAppOpen={handleAppOpen}
- onAppDetail={handleAppDetail}
- onAppRemove={handleAppRemove}
- />
-
-
-
+
+ {availablePages.map((page, index) => {
+ const isActiveDot = Math.round(indexProgress) === index
+ return (
+
+ )
+ })}
+
+ ),
+ }
+}
// 3个tab：钱包、生态、设置
export type TabId = "wallet" | "ecosystem" | "settings";
@@ -29,9 +127,34 @@ interface TabBarProps {
export function TabBar({ activeTab, onTabChange, className }: TabBarProps) {
const { t } = useTranslation('common');
const ecosystemSubPage = useStore(ecosystemStore, (s) => s.activeSubPage);
+ const storeAvailablePages = useStore(ecosystemStore, (s) => s.availableSubPages);
+ const hasRunningApps = useStore(miniappRuntimeStore, (s) => miniappRuntimeSelectors.getApps(s).length > 0);
+ const hasRunningStackApps = useStore(miniappRuntimeStore, miniappRuntimeSelectors.hasRunningStackApps);
+
+ // 生态 Tab 是否激活
+ const isEcosystemActive = activeTab === 'ecosystem';
+
+ // 生态指示器（图标slider + 分页点）
+ const availablePages = useMemo(() => {
+ if (storeAvailablePages?.length) return storeAvailablePages;
+ return hasRunningStackApps ? ECOSYSTEM_PAGE_ORDER : ECOSYSTEM_PAGE_ORDER.filter(p => p !== 'stack');
+ }, [storeAvailablePages, hasRunningStackApps]);
+
+ const ecosystemIndicator = useEcosystemIndicator(availablePages, isEcosystemActive);
- // 生态 tab 图标：发现用 IconApps，我的用 IconBrandMiniprogram
- const ecosystemIcon = ecosystemSubPage === 'mine' ? IconBrandMiniprogram : IconApps;
+ // 生态 tab 图标：
+ // - 在"应用堆栈"页或有运行中应用时：IconAppWindowFilled
+ // - 在"我的"页：IconBrandMiniprogram
+ // - 在"发现"页：IconApps
+ const ecosystemIcon = useMemo(() => {
+ if (ecosystemSubPage === 'stack' || hasRunningApps) {
+ return IconAppWindowFilled;
+ }
+ if (ecosystemSubPage === 'mine') {
+ return IconBrandMiniprogram;
+ }
+ return IconApps;
+ }, [ecosystemSubPage, hasRunningApps]);
const tabConfigs: Tab[] = useMemo(() => [
{ id: "wallet", label: t('a11y.tabWallet'), icon: IconWallet },
@@ -39,6 +162,33 @@ export function TabBar({ activeTab, onTabChange, className }: TabBarProps) {
{ id: "settings", label: t('a11y.tabSettings'), icon: IconSettings },
], [t, ecosystemIcon]);
+ // 生态按钮上滑手势检测
+ const touchState = useRef({ startY: 0, startTime: 0 });
+ const SWIPE_THRESHOLD = 30;
+ const SWIPE_VELOCITY = 0.3;
+
+ const handleEcosystemTouchStart = useCallback((e: React.TouchEvent) => {
+ const touch = e.touches[0];
+ if (touch) {
+ touchState.current = { startY: touch.clientY, startTime: Date.now() };
+ }
+ }, []);
+
+ const handleEcosystemTouchEnd = useCallback((e: React.TouchEvent) => {
+ const touch = e.changedTouches[0];
+ if (!touch) return;
+
+ const deltaY = touchState.current.startY - touch.clientY;
+ const deltaTime = Date.now() - touchState.current.startTime;
+ const velocity = deltaY / deltaTime;
+
+ // 检测上滑手势：需要有运行中的应用才能打开层叠视图
+ if (hasRunningApps && (deltaY > SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY)) {
+ e.preventDefault();
+ openStackView();
+ }
+ }, [hasRunningApps]);
+
return (
onTabChange(tab.id)}
+ onTouchStart={isEcosystem ? handleEcosystemTouchStart : undefined}
+ onTouchEnd={isEcosystem ? handleEcosystemTouchEnd : undefined}
data-testid={`tab-${tab.id}`}
className={cn(
"flex flex-1 flex-col items-center justify-center gap-1 transition-colors",
- isActive ? "text-primary" : "text-muted-foreground"
+ isActive ? "text-primary" : "text-muted-foreground",
)}
aria-label={label}
aria-current={isActive ? "page" : undefined}
>
- = {
+ discover: 0,
+ mine: 1,
+ stack: 2,
+}
+
+/** 索引到子页面映射 */
+export const ECOSYSTEM_INDEX_SUBPAGE: EcosystemSubPage[] = ['discover', 'mine', 'stack']
+
+/** 同步控制源 */
+export type SyncSource = 'swiper' | 'indicator' | null
/** Ecosystem 状态 */
export interface EcosystemState {
permissions: PermissionRecord[]
sources: SourceRecord[]
+ /** 当前可用子页面（由 EcosystemDesktop 根据配置/运行态写入） */
+ availableSubPages: EcosystemSubPage[]
/** 当前子页面（发现/我的） */
activeSubPage: EcosystemSubPage
+ /** Swiper 滑动进度 (0-2 for 3 pages) */
+ swiperProgress: number
+ /** 当前同步控制源（用于双向绑定） */
+ syncSource: SyncSource
}
const STORAGE_KEY = 'ecosystem_store'
@@ -39,6 +61,16 @@ function loadState(): EcosystemState {
const stored = localStorage.getItem(STORAGE_KEY)
if (stored) {
const parsed = JSON.parse(stored) as Partial
+
+ const availableSubPages = Array.isArray(parsed.availableSubPages) && parsed.availableSubPages.length > 0
+ ? (parsed.availableSubPages as EcosystemSubPage[])
+ : DEFAULT_AVAILABLE_SUBPAGES
+
+ const activeSubPage = (parsed.activeSubPage ?? 'discover') as EcosystemSubPage
+ const fixedAvailableSubPages = availableSubPages.includes(activeSubPage)
+ ? availableSubPages
+ : [...availableSubPages, activeSubPage]
+
return {
permissions: parsed.permissions ?? [],
sources: parsed.sources ?? [
@@ -49,7 +81,10 @@ function loadState(): EcosystemState {
enabled: true,
},
],
- activeSubPage: parsed.activeSubPage ?? 'discover',
+ availableSubPages: fixedAvailableSubPages,
+ activeSubPage,
+ swiperProgress: 0,
+ syncSource: null,
}
}
} catch {
@@ -65,7 +100,10 @@ function loadState(): EcosystemState {
enabled: true,
},
],
+ availableSubPages: DEFAULT_AVAILABLE_SUBPAGES,
activeSubPage: 'discover',
+ swiperProgress: 0,
+ syncSource: null,
}
}
@@ -206,4 +244,33 @@ export const ecosystemActions = {
activeSubPage: subPage,
}))
},
+
+ /** 设置当前可用子页面（由桌面配置驱动） */
+ setAvailableSubPages: (subPages: EcosystemSubPage[]): void => {
+ ecosystemStore.setState((state) => {
+ const next = subPages.length > 0 ? subPages : DEFAULT_AVAILABLE_SUBPAGES
+ const activeSubPage = next.includes(state.activeSubPage) ? state.activeSubPage : next[0] ?? 'mine'
+ return {
+ ...state,
+ availableSubPages: next,
+ activeSubPage,
+ }
+ })
+ },
+
+ /** 更新 Swiper 进度 */
+ setSwiperProgress: (progress: number): void => {
+ ecosystemStore.setState((state) => ({
+ ...state,
+ swiperProgress: progress,
+ }))
+ },
+
+ /** 设置同步控制源 */
+ setSyncSource: (source: SyncSource): void => {
+ ecosystemStore.setState((state) => ({
+ ...state,
+ syncSource: source,
+ }))
+ },
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2034226f..c363f7d2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,6 @@
/**
* KeyApp 主程序全局样式
- *
+ *
* 导入共享主题 + 主程序专属样式
*/
@@ -74,10 +74,18 @@
[dir='ltr'] {
--direction-multiplier: 1;
}
+
+ .scrollbar-none {
+ scrollbar-width: none;
+ }
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ }
}
/* 禁用长按和右键菜单（移动端 App 体验） */
-html, body {
+html,
+body {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
@@ -85,7 +93,9 @@ html, body {
}
/* 允许输入框选择文本 */
-input, textarea, [contenteditable="true"] {
+input,
+textarea,
+[contenteditable='true'] {
-webkit-user-select: text;
user-select: text;
}
@@ -108,33 +118,14 @@ input, textarea, [contenteditable="true"] {
}
@keyframes fade-in-title {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-/* 发现页滚动驱动动画（渐进增强） */
-.discover-page {
- --header-height: 120px;
-}
-
-@keyframes discover-header-shrink {
- 0% {
- padding-top: 3rem;
- padding-bottom: 1rem;
+ from {
+ opacity: 0;
}
- 100% {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
+ to {
+ opacity: 1;
}
}
-.discover-header {
- animation: discover-header-shrink ease-out forwards;
- animation-timeline: scroll();
- animation-duration: 1s;
- animation-range: entry 0 exit calc(2 * var(--header-height));
-}
-
/* 详情页滚动驱动 */
.detail-scroll-container {
timeline-scope: --detail-scroll;
@@ -169,97 +160,6 @@ input, textarea, [contenteditable="true"] {
animation-range: entry 0% entry 100%;
}
-/* iOS Desktop Icon 占位容器 */
-.ios-icon-wrapper {
- position: relative;
-}
-
-/* iOS Desktop Icon (popover=manual 强制可见) */
-.ios-desktop-icon {
- /* 重置浏览器 popover 默认样式（未打开状态） */
- display: block !important;
- position: static !important;
- inset: auto !important;
- margin: 0 !important;
- background: transparent;
- border: none;
- padding: 0;
- overflow: visible;
-}
-
-/* popover 打开时固定定位到原位 */
-.ios-desktop-icon:popover-open {
- position: fixed !important;
- inset: auto !important;
- top: var(--popover-top) !important;
- left: var(--popover-left) !important;
- margin: 0 !important;
- z-index: 50;
-}
-
-/* ::backdrop 伪元素样式 */
-.ios-desktop-icon::backdrop {
- background: rgba(0, 0, 0, 0.4);
- backdrop-filter: blur(40px) saturate(180%);
- -webkit-backdrop-filter: blur(40px) saturate(180%);
-
- /* 用 CSS 变量控制退出动画 */
- opacity: var(--backdrop-opacity, 1);
- transition:
- opacity 0.2s ease-out,
- backdrop-filter 0.2s ease-out,
- -webkit-backdrop-filter 0.2s ease-out,
- display 0.2s ease-out allow-discrete,
- overlay 0.2s ease-out allow-discrete;
-}
-
-@starting-style {
- .ios-desktop-icon::backdrop {
- opacity: 0;
- backdrop-filter: blur(0) saturate(100%);
- -webkit-backdrop-filter: blur(0) saturate(100%);
- }
-}
-
-/* popover 打开时图标效果 */
-.ios-desktop-icon:popover-open > button {
- transform: scale(1.08) translateY(-4px);
- filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
-}
-
-/* 点击拦截层（透明，只拦截事件） */
-.ios-backdrop-clickarea {
- background: transparent;
-}
-
-/* 上下文菜单 - 支持进入和退出动画 */
-.ios-context-menu {
- z-index: 51;
- transform-origin: center bottom;
-
- /* 动画属性 */
- opacity: 1;
- transform: scale(1) translateY(0);
- transition:
- opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
- transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
- display 0.25s allow-discrete;
-}
-
-/* 菜单进入动画 */
-@starting-style {
- .ios-context-menu {
- opacity: 0;
- transform: scale(0.85) translateY(8px);
- }
-}
-
-/* 菜单退出状态（通过 JS 添加 class） */
-.ios-context-menu.closing {
- opacity: 0;
- transform: scale(0.9) translateY(4px);
-}
-
/* ============================================
* iOS Wallpaper 壁纸组件
* ============================================ */
@@ -276,7 +176,7 @@ input, textarea, [contenteditable="true"] {
content: '';
position: absolute;
inset: -20%;
- background:
+ background:
radial-gradient(ellipse 40% 40% at 30% 30%, rgba(99, 102, 241, 0.4), transparent),
radial-gradient(ellipse 30% 30% at 70% 60%, rgba(236, 72, 153, 0.3), transparent);
mix-blend-mode: color-dodge;
@@ -287,7 +187,7 @@ input, textarea, [contenteditable="true"] {
content: '';
position: absolute;
inset: -20%;
- background:
+ background:
radial-gradient(ellipse 35% 35% at 60% 20%, rgba(168, 85, 247, 0.35), transparent),
radial-gradient(ellipse 25% 25% at 20% 70%, rgba(59, 130, 246, 0.3), transparent);
mix-blend-mode: screen;
@@ -309,21 +209,21 @@ input, textarea, [contenteditable="true"] {
.ios-wallpaper--hard-light .ios-wallpaper__stars {
position: absolute;
inset: 0;
- background-image:
- radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.5), transparent),
- radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.3), transparent),
- radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent),
- radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
- radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.5), transparent),
- radial-gradient(2px 2px at 200px 150px, rgba(255,255,255,0.4), transparent),
- radial-gradient(1px 1px at 250px 90px, rgba(255,255,255,0.5), transparent);
+ background-image:
+ radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.5), transparent),
+ radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.3), transparent),
+ radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent),
+ radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
+ radial-gradient(1px 1px at 160px 120px, rgba(255, 255, 255, 0.5), transparent),
+ radial-gradient(2px 2px at 200px 150px, rgba(255, 255, 255, 0.4), transparent),
+ radial-gradient(1px 1px at 250px 90px, rgba(255, 255, 255, 0.5), transparent);
background-size: 300px 200px;
pointer-events: none;
}
.ios-wallpaper--hard-light .ios-wallpaper__glow {
position: absolute;
inset: 0;
- background:
+ background:
radial-gradient(ellipse 60% 50% at 25% 25%, rgba(139, 92, 246, 0.6), transparent),
radial-gradient(ellipse 50% 40% at 75% 70%, rgba(59, 130, 246, 0.5), transparent);
mix-blend-mode: hard-light;
@@ -333,8 +233,7 @@ input, textarea, [contenteditable="true"] {
.ios-wallpaper--hard-light .ios-wallpaper__highlight {
position: absolute;
inset: 0;
- background:
- radial-gradient(ellipse 30% 30% at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
+ background: radial-gradient(ellipse 30% 30% at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
mix-blend-mode: overlay;
pointer-events: none;
}
@@ -347,7 +246,7 @@ input, textarea, [contenteditable="true"] {
content: '';
position: absolute;
inset: -30%;
- background:
+ background:
radial-gradient(ellipse 50% 50% at 15% 25%, rgba(99, 102, 241, 0.35), transparent),
radial-gradient(ellipse 45% 45% at 85% 15%, rgba(236, 72, 153, 0.3), transparent),
radial-gradient(ellipse 40% 40% at 70% 85%, rgba(34, 197, 94, 0.25), transparent);
@@ -359,7 +258,7 @@ input, textarea, [contenteditable="true"] {
content: '';
position: absolute;
inset: -30%;
- background:
+ background:
radial-gradient(ellipse 45% 45% at 30% 75%, rgba(251, 191, 36, 0.3), transparent),
radial-gradient(ellipse 50% 50% at 60% 40%, rgba(59, 130, 246, 0.25), transparent);
mix-blend-mode: multiply;
@@ -382,7 +281,7 @@ input, textarea, [contenteditable="true"] {
content: '';
position: absolute;
inset: -20%;
- background:
+ background:
radial-gradient(ellipse 60% 50% at 10% 20%, rgba(99, 102, 241, 0.45), transparent 70%),
radial-gradient(ellipse 50% 50% at 90% 80%, rgba(236, 72, 153, 0.4), transparent 70%);
mix-blend-mode: multiply;
@@ -393,7 +292,7 @@ input, textarea, [contenteditable="true"] {
content: '';
position: absolute;
inset: -20%;
- background:
+ background:
radial-gradient(ellipse 55% 45% at 80% 20%, rgba(168, 85, 247, 0.35), transparent 70%),
radial-gradient(ellipse 45% 55% at 20% 80%, rgba(14, 165, 233, 0.3), transparent 70%);
mix-blend-mode: multiply;
@@ -409,8 +308,17 @@ input, textarea, [contenteditable="true"] {
}
@keyframes ios-wallpaper-float {
- 0%, 100% { transform: translate(0, 0) scale(1); }
- 25% { transform: translate(5%, 5%) scale(1.05); }
- 50% { transform: translate(-3%, 8%) scale(0.98); }
- 75% { transform: translate(-5%, -3%) scale(1.02); }
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 25% {
+ transform: translate(5%, 5%) scale(1.05);
+ }
+ 50% {
+ transform: translate(-3%, 8%) scale(0.98);
+ }
+ 75% {
+ transform: translate(-5%, -3%) scale(1.02);
+ }
}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index e3372eda..ab8b9800 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -20,9 +20,9 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
- "noUncheckedIndexedAccess": true,
+ "noUncheckedIndexedAccess": false,
"noImplicitOverride": true,
- "exactOptionalPropertyTypes": true,
+ "exactOptionalPropertyTypes": false,
/* Path aliases */
"baseUrl": ".",
+ {isEcosystem ? (
+ // 生态 Tab 始终使用 Swiper 渲染，减少 DOM 抖动
+ ecosystemIndicator.icon
+ ) : (
+
+ {/* 标签区域 */}
+ {isEcosystem && isActive ? (
+ ecosystemIndicator.label
+ ) : (
+ {label}
+ )}
);
})}
diff --git a/src/stackflow/stackflow.ts b/src/stackflow/stackflow.ts
index 565b055b..cd42dd29 100644
--- a/src/stackflow/stackflow.ts
+++ b/src/stackflow/stackflow.ts
@@ -30,7 +30,6 @@ import { WelcomeActivity } from './activities/WelcomeActivity';
import { SettingsWalletChainsActivity } from './activities/SettingsWalletChainsActivity';
import { SettingsStorageActivity } from './activities/SettingsStorageActivity';
import { SettingsSourcesActivity } from './activities/SettingsSourcesActivity';
-import { MiniappActivity } from './activities/MiniappActivity';
import { MiniappDetailActivity } from './activities/MiniappDetailActivity';
import {
ChainSelectorJob,
@@ -94,7 +93,6 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
StakingActivity: '/staking',
WelcomeActivity: '/welcome',
SettingsSourcesActivity: '/settings/sources',
- MiniappActivity: '/miniapp/:appId',
MiniappDetailActivity: '/miniapp/:appId/detail',
ChainSelectorJob: '/job/chain-selector',
WalletRenameJob: '/job/wallet-rename/:walletId',
@@ -156,7 +154,6 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
StakingActivity,
WelcomeActivity,
SettingsSourcesActivity,
- MiniappActivity,
MiniappDetailActivity,
ChainSelectorJob,
WalletRenameJob,
diff --git a/src/stores/ecosystem.ts b/src/stores/ecosystem.ts
index 40dae7b0..8554f9da 100644
--- a/src/stores/ecosystem.ts
+++ b/src/stores/ecosystem.ts
@@ -21,14 +21,36 @@ export interface SourceRecord {
}
/** Ecosystem 子页面类型 */
-export type EcosystemSubPage = 'discover' | 'mine'
+export type EcosystemSubPage = 'discover' | 'mine' | 'stack'
+
+/** 默认可用子页面（不包含 stack，由桌面根据运行态启用） */
+const DEFAULT_AVAILABLE_SUBPAGES: EcosystemSubPage[] = ['discover', 'mine']
+
+/** 子页面索引映射 */
+export const ECOSYSTEM_SUBPAGE_INDEX: Record