+
+ )
+ }) as DecoratorFunction
+
+
+
+ ),
+ ],
+}
diff --git a/miniapps/forge/vitest.config.ts b/miniapps/forge/vitest.config.ts
index 40d3f57d..724bad21 100644
--- a/miniapps/forge/vitest.config.ts
+++ b/miniapps/forge/vitest.config.ts
@@ -1,13 +1,46 @@
import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
export default defineConfig({
- plugins: [react(), tsconfigPaths()],
test: {
- globals: true,
- environment: 'jsdom',
- include: ['src/**/*.test.{ts,tsx}'],
- setupFiles: ['./src/test-setup.ts'],
+ projects: [
+ // 单元测试项目 (jsdom)
+ {
+ extends: './vite.config.ts',
+ test: {
+ name: 'unit',
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: ['./src/test-setup.ts'],
+ include: ['src/**/*.test.{ts,tsx}'],
+ exclude: ['src/**/*.stories.test.{ts,tsx}'],
+ },
+ },
+ // Storybook 组件测试项目 (真实浏览器)
+ {
+ extends: './vite.config.ts',
+ plugins: [
+ storybookTest({
+ configDir: path.join(dirname, '.storybook'),
+ storybookScript: 'pnpm storybook --ci',
+ }),
+ ],
+ test: {
+ name: 'storybook',
+ browser: {
+ enabled: true,
+ provider: playwright(),
+ headless: true,
+ instances: [{ browser: 'chromium' }],
+ },
+ setupFiles: ['./.storybook/vitest.setup.ts'],
+ },
+ },
+ ],
},
})
diff --git a/miniapps/teleport/.storybook/main.ts b/miniapps/teleport/.storybook/main.ts
new file mode 100644
index 00000000..38735a63
--- /dev/null
+++ b/miniapps/teleport/.storybook/main.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ addons: ['@storybook/addon-vitest', '@storybook/addon-docs'],
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
+ },
+}
+
+export default config
diff --git a/miniapps/teleport/.storybook/preview.tsx b/miniapps/teleport/.storybook/preview.tsx
new file mode 100644
index 00000000..3f94abad
--- /dev/null
+++ b/miniapps/teleport/.storybook/preview.tsx
@@ -0,0 +1,123 @@
+import type { Preview, ReactRenderer } from '@storybook/react-vite'
+import type { DecoratorFunction } from 'storybook/internal/types'
+import { useEffect } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import i18n, { languages, defaultLanguage, getLanguageDirection, type LanguageCode } from '../src/i18n'
+import '../src/index.css'
+
+const mobileViewports = {
+ iPhoneSE: {
+ name: 'iPhone SE',
+ styles: { width: '375px', height: '667px' },
+ type: 'mobile' as const,
+ },
+ iPhone13: {
+ name: 'iPhone 13',
+ styles: { width: '390px', height: '844px' },
+ type: 'mobile' as const,
+ },
+ iPhone13ProMax: {
+ name: 'iPhone 13 Pro Max',
+ styles: { width: '428px', height: '926px' },
+ type: 'mobile' as const,
+ },
+}
+
+const preview: Preview = {
+ parameters: {
+ viewport: {
+ viewports: mobileViewports,
+ defaultViewport: 'iPhone13',
+ },
+ backgrounds: {
+ disable: true,
+ },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ },
+ globalTypes: {
+ locale: {
+ name: 'Locale',
+ description: 'Language',
+ defaultValue: defaultLanguage,
+ toolbar: {
+ icon: 'globe',
+ items: Object.entries(languages).map(([code, config]) => ({
+ value: code,
+ title: `${config.name} (${config.dir.toUpperCase()})`,
+ right: config.dir === 'rtl' ? '←' : '→',
+ })),
+ dynamicTitle: true,
+ },
+ },
+ theme: {
+ name: 'Theme',
+ description: 'Color theme',
+ defaultValue: 'light',
+ toolbar: {
+ icon: 'paintbrush',
+ items: [
+ { value: 'light', title: 'Light', icon: 'sun' },
+ { value: 'dark', title: 'Dark', icon: 'moon' },
+ ],
+ dynamicTitle: true,
+ },
+ },
+ },
+ decorators: [
+ // i18n + Theme decorator
+ ((Story, context) => {
+ const locale = (context.globals['locale'] || defaultLanguage) as LanguageCode
+ const theme = context.globals['theme'] || 'light'
+ const direction = getLanguageDirection(locale)
+
+ useEffect(() => {
+ if (i18n.language !== locale) {
+ i18n.changeLanguage(locale)
+ }
+ document.documentElement.lang = locale
+ document.documentElement.dir = direction
+
+ if (theme === 'dark') {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+ }, [locale, theme, direction])
+
+ return (
+
+
+ )
+ }) as DecoratorFunction
+
+
+
+ )
+ }) as DecoratorFunction
+
+
- {/* 启动屏图标 */}
+ {/* 启动屏图标 - 使用 app.icon */}
{
diff --git a/src/services/ecosystem/registry.ts b/src/services/ecosystem/registry.ts
index 5404118e..76fcf5b2 100644
--- a/src/services/ecosystem/registry.ts
+++ b/src/services/ecosystem/registry.ts
@@ -57,12 +57,8 @@ function normalizeAppFromSource(app: MiniappManifest, source: SourceRecord, payl
icon: resolve(app.icon),
url: resolve(app.url),
screenshots: app.screenshots?.map(resolve),
- splashScreen: app.splashScreen
- ? {
- ...app.splashScreen,
- icon: app.splashScreen.icon ? resolve(app.splashScreen.icon) : undefined,
- }
- : undefined,
+ // splashScreen 现在是 true | { timeout?: number }，不再需要解析 icon
+ splashScreen: app.splashScreen,
// 来源元数据
sourceUrl: source.url,
sourceName: source.name,
diff --git a/src/services/ecosystem/schema.ts b/src/services/ecosystem/schema.ts
index 2caf6b7e..444a1cd8 100644
--- a/src/services/ecosystem/schema.ts
+++ b/src/services/ecosystem/schema.ts
@@ -10,13 +10,12 @@ const MiniappCategorySchema = z.enum([
'other',
])
-const SplashScreenSchema = z
- .object({
- backgroundColor: z.string().optional(),
- icon: z.string().optional(),
+const SplashScreenSchema = z.union([
+ z.literal(true),
+ z.object({
timeout: z.number().int().positive().optional(),
- })
- .passthrough()
+ }).passthrough(),
+])
export const MiniappManifestSchema = z
.object({
diff --git a/src/services/ecosystem/types.ts b/src/services/ecosystem/types.ts
index 6b639e9a..1c43df52 100644
--- a/src/services/ecosystem/types.ts
+++ b/src/services/ecosystem/types.ts
@@ -171,12 +171,18 @@ export interface MiniappManifest {
* 启动屏配置
* 如果配置了启动屏，小程序需要调用 bio.closeSplashScreen() 来关闭
* 如果未配置，则使用 iframe load 事件自动关闭加载状态
+ *
+ * - 图标自动使用 manifest.icon
+ * - 背景色自动使用 manifest.themeColor
+ *
+ * @example
+ * // 简写形式
+ * "splashScreen": true
+ *
+ * // 自定义超时
+ * "splashScreen": { "timeout": 3000 }
*/
- splashScreen?: {
- /** 启动屏背景色 (CSS 颜色值) */
- backgroundColor?: string
- /** 启动屏图标 URL (默认使用 app.icon) */
- icon?: string
+ splashScreen?: true | {
/** 最大等待时间 (ms)，超时后自动关闭启动屏，默认 5000 */
timeout?: number
}