diff --git a/scripts/mobile-ui-design-system.mjs b/scripts/mobile-ui-design-system.mjs index 701c29234d..36afa9a26b 100644 --- a/scripts/mobile-ui-design-system.mjs +++ b/scripts/mobile-ui-design-system.mjs @@ -255,6 +255,7 @@ function swiftWeight(weight) { function swiftTextStyle(name) { const styles = { + brand_wordmark: 'largeTitle', display_large: 'largeTitle', display_medium: 'title1', display_small: 'title2', diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/MainActivity.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/MainActivity.kt index 1347846aa5..bb9f0298a8 100644 --- a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/MainActivity.kt +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/MainActivity.kt @@ -1,6 +1,10 @@ package com.openbitfun.mobile.app import android.os.Bundle +import androidx.compose.foundation.layout.Box +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import com.openbitfun.mobile.app.ui.shell.StartupBrandReveal import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge @@ -17,9 +21,11 @@ import com.openbitfun.mobile.app.viewmodel.AppSettingsViewModel import com.openbitfun.mobile.app.viewmodel.AppThemeMode class MainActivity : ComponentActivity() { + private var showStartupBrand by mutableStateOf(true) override fun onCreate(savedInstanceState: Bundle?) { AppLocaleController.applySaved(this) super.onCreate(savedInstanceState) + showStartupBrand = savedInstanceState == null enableEdgeToEdge() setContent { if (intent.getBooleanExtra(DESIGN_PREVIEW_EXTRA, false)) { @@ -35,8 +41,11 @@ class MainActivity : ComponentActivity() { AppThemeMode.DARK -> true } OpenBitFunTheme(dark = dark) { - MobileScreen() - com.openbitfun.mobile.app.ui.shell.NotificationOnboarding() + Box { + MobileScreen() + if (showStartupBrand) StartupBrandReveal { showStartupBrand = false } + } + if (!showStartupBrand) com.openbitfun.mobile.app.ui.shell.NotificationOnboarding() } } } @@ -47,6 +56,7 @@ class MainActivity : ComponentActivity() { } override fun onStop() { + showStartupBrand = false if (!intent.getBooleanExtra(DESIGN_PREVIEW_EXTRA, false)) accountModel().setBackground(true) super.onStop() } diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/remote/PairingScreen.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/remote/PairingScreen.kt index f83a43a2dd..e3d2e92dcc 100644 --- a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/remote/PairingScreen.kt +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/remote/PairingScreen.kt @@ -1,6 +1,13 @@ package com.openbitfun.mobile.app.ui.remote -import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.clickable +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.foundation.layout.widthIn +import androidx.compose.material3.HorizontalDivider +import com.openbitfun.mobile.app.ui.shell.WelcomeBrandFlow +import com.openbitfun.mobile.app.ui.theme.generated.MobileDesignGeometry +import com.openbitfun.mobile.core.feature.session.SessionTimePresentation import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -13,8 +20,6 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Button -import androidx.compose.material3.Icon -import androidx.compose.material3.Surface import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField @@ -28,15 +33,11 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.Alignment import androidx.compose.ui.platform.testTag -import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import androidx.lifecycle.compose.LifecycleResumeEffect -import androidx.lifecycle.compose.collectAsStateWithLifecycle -import androidx.lifecycle.viewmodel.compose.viewModel import com.openbitfun.mobile.app.R import com.openbitfun.mobile.app.ui.chat.ConversationView import com.openbitfun.mobile.app.ui.common.CircleControl @@ -48,44 +49,6 @@ import com.openbitfun.mobile.core.feature.session.RemoteSessionUiState import com.openbitfun.mobile.core.feature.workspace.RemoteWorkspaceIntent import com.openbitfun.mobile.core.feature.workspace.RemoteWorkspaceUiState -/** - * The remote surface: pair, then either the session list or one open session. - * - * Everything below the seam is a [PairingUiState]; this file decides layout and - * wording and nothing else. The list and the conversation replace each other - * rather than stacking, matching `pages/RemoteSurfaceHost.ets` — a transcript - * needs the whole height and its own scroll. - */ -@Composable -internal fun PairingScreen( - modifier: Modifier, - settingsPlacement: SettingsPlacement, - sessionDetailsPlacement: SettingsPlacement, - viewSettingsPlacement: SettingsPlacement, - onOpenRemoteSettings: () -> Unit, - onOpenSidebar: (() -> Unit)? = null, - onBack: () -> Unit = {}, - onOpenAccount: () -> Unit = {}, - onDeviceLink: (String) -> Unit = {}, - compact: Boolean = true, - requestedSessionId: String? = null, - creatingSession: Boolean = false, - onOpenSession: (String) -> Unit = {}, - onCreateSession: () -> Unit = {}, - onRemoteHome: () -> Unit = {}, - startScanning: Boolean = false, - onScanStarted: () -> Unit = {}, -) { - ConnectView( - onSubmit = onDeviceLink, - onBack = onBack, - onOpenAccount = onOpenAccount, - startScanning = startScanning, - onScanStarted = onScanStarted, - modifier = modifier, - ) -} - /** The account-device route, which bypasses the QR pairing form entirely. */ @Composable internal fun AccountRemoteScreen( @@ -221,135 +184,74 @@ private fun RemoteConnectedScreen( onIntent = onSessionIntent, modifier = modifier, ) - } else if (compact) { + } else { RemoteCompactHome( remoteState = remoteState, desktopName = desktopName, onOpenSidebar = onOpenSidebar, - onCreate = onCreateSession, + onBrowse = onOpenSidebar, + onOpen = { id -> + onSessionIntent(com.openbitfun.mobile.core.feature.session.RemoteSessionIntent.Open(id)) + onOpenSession(id) + }, onOpenRemoteSettings = onOpenRemoteSettings, modifier = modifier, ) - } else { - Column(modifier = modifier.fillMaxSize()) { - RemoteShellHeader(onOpenSidebar, onOpenRemoteSettings = onOpenRemoteSettings) - RemoteSessionListView( - state = remoteState, - workspaceState = workspaceState, - compact = compact, - sessionDetailsPlacement = sessionDetailsPlacement, - viewSettingsPlacement = viewSettingsPlacement, - connectionDetails = connectionDetails, - onIntent = onSessionIntent, - onWorkspaceIntent = onWorkspaceIntent, - onOpen = onOpenSession, - onCreate = onCreateSession, - modifier = Modifier.weight(1f), - ) - } } } @Composable -private fun RemoteCompactHome( +internal fun RemoteCompactHome( remoteState: RemoteSessionUiState, desktopName: String, onOpenSidebar: (() -> Unit)?, - onCreate: () -> Unit, + onBrowse: (() -> Unit)?, + onOpen: (String) -> Unit, onOpenRemoteSettings: () -> Unit, - modifier: Modifier, + modifier: Modifier = Modifier, ) { val ready = remoteState as? RemoteSessionUiState.Ready - val hasSessions = ready?.sessions?.isNotEmpty() == true - val loading = remoteState is RemoteSessionUiState.Loading - val title = when { - loading -> stringResource(R.string.sessions_loading) - remoteState is RemoteSessionUiState.Failed -> stringResource(R.string.sessions_failed) - hasSessions -> stringResource(R.string.remote_pick_session) - else -> stringResource(R.string.remote_empty_title) - } - val body = if (hasSessions) { - stringResource(R.string.remote_pick_session_text) - } else { - stringResource(R.string.remote_empty_text) - } - - Column(modifier = modifier.fillMaxSize()) { + val recent = ready?.sessions.orEmpty().filter { it.status != "archived" }.sortedByDescending { + SessionTimePresentation.timestampMs(it.updatedAt)?.takeIf { t -> t > 0 } + ?: SessionTimePresentation.timestampMs(it.createdAt) ?: 0 + }.take(3) + Column(modifier.fillMaxSize()) { RemoteShellHeader(onOpenSidebar, desktopName, onOpenRemoteSettings) Column( - modifier = Modifier - .weight(1f) - .fillMaxWidth() - .padding(start = 24.dp, end = 24.dp, bottom = 56.dp), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, + Modifier.weight(1f).align(Alignment.CenterHorizontally) + .widthIn(max = MobileDesignGeometry.RecentHomeMaxWidth).fillMaxWidth() + .verticalScroll(rememberScrollState()) + .padding(horizontal = MobileDesignGeometry.RecentHomeGutter, vertical = 24.dp), ) { - if (loading) { - CircularProgressIndicator( - modifier = Modifier.padding(bottom = 18.dp).size(28.dp), - color = MaterialTheme.colorScheme.onSurfaceVariant, - ) + WelcomeBrandFlow(Modifier.align(Alignment.CenterHorizontally).size(MobileDesignGeometry.RecentHomeMarkSize), sweep = true) + Text(stringResource(R.string.home_recent_title), fontSize = 25.sp, + fontWeight = FontWeight.Medium, textAlign = androidx.compose.ui.text.style.TextAlign.Center, + modifier = Modifier.fillMaxWidth().padding(top = 10.dp, bottom = 32.dp)) + if (remoteState is RemoteSessionUiState.Loading) CircularProgressIndicator(Modifier.size(24.dp)) + if (remoteState is RemoteSessionUiState.Failed) { + Text(stringResource(R.string.sessions_failed), color = MaterialTheme.colorScheme.onSurfaceVariant) } - Text( - title, - fontSize = 20.sp, - fontWeight = FontWeight.Bold, - color = MaterialTheme.colorScheme.onSurface, - textAlign = TextAlign.Center, - ) - Text( - body, - fontSize = 14.sp, - lineHeight = 21.sp, - color = MaterialTheme.colorScheme.onSurfaceVariant, - textAlign = TextAlign.Center, - modifier = Modifier.width(280.dp).padding(top = 10.dp), - ) - if (!loading) { - Button( - onClick = onCreate, - shape = RoundedCornerShape(23.dp), - modifier = Modifier.padding(top = 12.dp).width(148.dp).height(46.dp), - ) { - Text(stringResource(R.string.remote_start_session), fontSize = 15.sp) - } + Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) { + Text(stringResource(R.string.home_recent_recent), fontSize = 12.sp, + color = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier.weight(1f)) + if (onBrowse != null) TextButton(onClick = onBrowse) { Text(stringResource(R.string.home_recent_all), fontSize = 12.sp) } } - } - } -} - -/** The remote landing page precedes the connection chooser, as on HarmonyOS. */ -@Composable -internal fun DisconnectedRemoteHome( - onOpenSidebar: (() -> Unit)?, - onConnect: () -> Unit, -) { - Column(Modifier.fillMaxSize().testTag("remote-disconnected-home")) { - RemoteShellHeader(onOpenSidebar = onOpenSidebar, onOpenRemoteSettings = null) - Column( - modifier = Modifier.weight(1f).fillMaxWidth() - .padding(start = 20.dp, end = 20.dp, bottom = 48.dp), - verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically), - horizontalAlignment = Alignment.CenterHorizontally, - ) { - Surface( - shape = RoundedCornerShape(24.dp), - border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant), - modifier = Modifier.size(74.dp), - ) { - Box(contentAlignment = Alignment.Center) { - Icon(painterResource(R.drawable.ic_symbol_desktop), contentDescription = null, - modifier = Modifier.size(42.dp)) + recent.forEach { session -> + Column(Modifier.fillMaxWidth().clickable(enabled = !ready!!.busy) { onOpen(session.id) } + .padding(vertical = MobileDesignGeometry.RecentHomeRowPadding)) { + Text(session.title, fontSize = 15.sp, maxLines = 2) + val workspace = session.workspaceName?.takeIf { it.isNotBlank() } + ?: session.workspacePath.orEmpty().trimEnd('/').substringAfterLast('/') + Text(listOf(desktopName, workspace).filter { it.isNotBlank() }.joinToString(" · "), + fontSize = 11.sp, color = MaterialTheme.colorScheme.onSurfaceVariant, + modifier = Modifier.padding(top = 6.dp), maxLines = 1) } + HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant) } - Text(stringResource(R.string.sidebar_connect_desktop), - style = MaterialTheme.typography.headlineSmall, textAlign = TextAlign.Center) - Text(stringResource(R.string.remote_connect_description), - style = MaterialTheme.typography.bodySmall, - color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.Center) - Button(onClick = onConnect, shape = RoundedCornerShape(22.dp), - modifier = Modifier.width(136.dp).height(44.dp)) { - Text(stringResource(R.string.pairing_connect), style = MaterialTheme.typography.titleSmall) + if (recent.isEmpty() && remoteState !is RemoteSessionUiState.Loading) { + Text(stringResource(if (desktopName.isBlank()) R.string.home_recent_connect else R.string.home_recent_empty), + fontSize = 13.sp, color = MaterialTheme.colorScheme.onSurfaceVariant, + modifier = Modifier.padding(vertical = 18.dp)) } } } diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/MobileScreen.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/MobileScreen.kt index a563501d93..ac0859c7f1 100644 --- a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/MobileScreen.kt +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/MobileScreen.kt @@ -50,8 +50,7 @@ import com.openbitfun.mobile.app.ui.common.AdaptiveModalSurface import com.openbitfun.mobile.app.ui.remote.AccountRemoteScreen import com.openbitfun.mobile.app.ui.remote.ConnectAccountDeviceScreen import com.openbitfun.mobile.app.ui.remote.FilePreviewSurface -import com.openbitfun.mobile.app.ui.remote.DisconnectedRemoteHome -import com.openbitfun.mobile.app.ui.remote.PairingScreen +import com.openbitfun.mobile.app.ui.remote.ConnectView import com.openbitfun.mobile.app.ui.settings.GeneralSettingsScreen import com.openbitfun.mobile.app.ui.settings.SettingsScreen import com.openbitfun.mobile.app.ui.shell.sidebar.AppSidebar @@ -408,23 +407,22 @@ internal fun MobileScreen() { ) RemoteControlSource.NONE -> if (readyAccount != null) { - ConnectAccountDeviceScreen( - state = readyAccount, - onBack = { shell.openRemoteConnect() }, - onRefresh = { accountViewModel.dispatch(AccountIntent.RefreshDevices) }, - onSelect = accountViewModel::selectDevice, - onOpenScanner = { - shell.openRemoteScanner() - }, - modifier = Modifier, - ) - } else { - DisconnectedRemoteHome( - onOpenSidebar = if (showMenu) { { compactDrawerOpen = true } } else null, - onConnect = shell::openRemoteConnect, + com.openbitfun.mobile.app.ui.remote.RemoteCompactHome( + remoteState = RemoteSessionUiState.Idle, + desktopName = "", + onOpenSidebar = { compactDrawerOpen = true }, + onBrowse = { shell.openRemoteConnect() }, + onOpen = {}, + onOpenRemoteSettings = { shell.openRemoteConnect() }, ) - - } + } else WelcomeHome( + signedIn = readyAccount != null, + onLogin = { + if (readyAccount != null) shell.openRemoteConnect() else shell.openAccount() + }, + onScan = shell::openRemoteScanner, + modifier = Modifier.fillMaxSize(), + ) } } } @@ -586,17 +584,12 @@ internal fun MobileScreen() { onOpenScanner = shell::openRemoteScanner, modifier = sheetModifier, ) - } else PairingScreen( - onDeviceLink = connectDeviceLink, + } else ConnectView( + onSubmit = connectDeviceLink, modifier = sheetModifier, - settingsPlacement = settingsPlacement, - sessionDetailsPlacement = sessionDetailsPlacement, - viewSettingsPlacement = remoteViewSettingsPlacement, - onOpenRemoteSettings = { shell.openSettings(SettingsMode.REMOTE) }, onBack = shell::closeRemoteConnect, onOpenAccount = { shell.closeRemoteConnect(); shell.openAccount() }, startScanning = shell.remoteScanRequested, - ) } AdaptiveModalSurface( diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/StartupBrandReveal.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/StartupBrandReveal.kt new file mode 100644 index 0000000000..1f67fc16de --- /dev/null +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/StartupBrandReveal.kt @@ -0,0 +1,118 @@ +package com.openbitfun.mobile.app.ui.shell + +import android.graphics.Paint +import android.graphics.Typeface +import androidx.compose.animation.core.Animatable +import androidx.compose.animation.core.LinearEasing +import androidx.compose.animation.core.tween +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.drawscope.drawIntoCanvas +import androidx.compose.ui.graphics.nativeCanvas +import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.graphics.toArgb +import androidx.compose.ui.input.pointer.pointerInput +import androidx.compose.ui.semantics.clearAndSetSemantics +import androidx.compose.ui.unit.dp +import androidx.lifecycle.Lifecycle +import androidx.lifecycle.LifecycleEventObserver +import androidx.lifecycle.compose.LocalLifecycleOwner +import com.openbitfun.mobile.app.ui.theme.generated.MobileDesignColors +import com.openbitfun.mobile.app.ui.theme.generated.MobileDesignTypography +import com.openbitfun.mobile.app.ui.theme.generated.MobileDesignMotion +import kotlin.math.* + +/** Presentation-only cold-start timeline; Compose honors the system animator scale. */ +@Composable +internal fun StartupBrandReveal(onFinished: () -> Unit) { + val progress = remember { Animatable(0f) } + val finish by rememberUpdatedState(onFinished) + val lifecycle = LocalLifecycleOwner.current.lifecycle + DisposableEffect(lifecycle) { + val observer = LifecycleEventObserver { _, event -> + if (event == Lifecycle.Event.ON_STOP) finish() + } + lifecycle.addObserver(observer) + onDispose { lifecycle.removeObserver(observer) } + } + LaunchedEffect(Unit) { + progress.animateTo(1f, tween(MobileDesignMotion.StartupBrand, easing = LinearEasing)) + finish() + } + val p = progress.value + val t = min(p / .65f * .9f, .9f) + val settle = smooth((p - .66f) / .19f) + val ink = MaterialTheme.colorScheme.onBackground + val dotColor = MobileDesignColors.Light.BrandDot + val paint = remember { Paint(Paint.ANTI_ALIAS_FLAG).apply { + typeface = Typeface.create("sans-serif-medium", Typeface.NORMAL) + textAlign = Paint.Align.CENTER + textSize = MobileDesignTypography.BrandWordmark.fontSize.value + } } + val widths = remember { listOf(30f,25f,24f,25f,28f,10f,16f,24f,25f,25f) } + val positions = remember { widths.runningFold(24f) { x, w -> x + w } } + BoxWithConstraints(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background) + .graphicsLayer { alpha = 1 - smooth((p - .97f) / .03f) } + .clearAndSetSemantics { } + .pointerInput(Unit) { awaitPointerEventScope { while (true) awaitPointerEvent().changes.forEach { it.consume() } } }, + contentAlignment = Alignment.Center) { + val stageScale = min(1f, ((maxWidth.value - 32f) / 280f).coerceAtLeast(.1f)) + Box(Modifier.size(280.dp, 240.dp).graphicsLayer { scaleX = stageScale; scaleY = stageScale }) { + val markProgress = ((p - .66f) / .19f).coerceIn(0f, 1f) + val q = markProgress - 1 + val markScale = .65f + .35f * (1 + 2.2f*q*q*q + 1.2f*q*q) + WelcomeBrandFlow( + Modifier.offset(94.dp, 14.dp).size(92.dp).graphicsLayer { + alpha = ease(markProgress); scaleX = markScale; scaleY = markScale + }) + Canvas(Modifier.fillMaxSize()) { + drawIntoCanvas { canvas -> + val native = canvas.nativeCanvas + native.save(); native.scale(size.width / 280f, size.height / 240f) + "OpenBıtFun".forEachIndexed { i, ch -> + val reveal = ease((t - (.19f + i * .048f)) / .05f) + val phase = ((t - (.19f + i * .048f)) / .085f).coerceIn(0f,1f) + val bounce = sin(phase * PI).toFloat() * (1-phase).pow(.65f) + val x = positions[i] + widths[i]/2 + val y = 110 + 42*settle + 7*(1-reveal)-8*bounce + paint.color = ink.toArgb(); paint.alpha = (255*reveal).toInt() + native.save(); native.rotate((if(i%2==0) -1 else 1)*bounce*6, x, y) + native.drawText(ch.toString(), x, y-(paint.fontMetrics.ascent+paint.fontMetrics.descent)/2, paint) + native.restore() + } + var x = 9f; var y = 110f; var sx=1f; var sy=1f + for (i in 0..9) { + val end=.19f+i*.048f; val begin=if(i==0) end-.065f else end-.048f + val from=if(i==0) 9f else positions[i]+10; val to=positions[i+1]+10 + if(t>=end){x=to;continue} + if(t>=begin){ + val step=((t-begin)/(end-begin)).coerceIn(0f,1f) + val hop=((step-.16f)/.84f).coerceIn(0f,1f) + val squash=sin((step/.16f).coerceIn(0f,1f)*PI).toFloat() + x=from+(to-from)*smooth(hop); y-=4*hop*(1-hop)*(if(i==0)20 else 15) + sx=1+.2f*squash;sy=1-.18f*squash + }; break + } + if(t>=.70f){ + val flight=((t-.70f)/.16f).coerceIn(0f,1f);val travel=smooth(flight) + x+=(positions[5]+5-x)*travel;y=110-15*travel-sin(PI*flight).toFloat()*44 + sx=1+(7.35f/9-1)*travel;sy=sx + if(t>.86f&&t<.9f)y-=sin((t-.86f)/.04f*PI).toFloat()*2 + } + y+=42*settle;paint.color=dotColor.toArgb() + val halo=sin(((t-.86f)/.04f).coerceIn(0f,1f)*PI).toFloat() + paint.alpha=(255*.16f*halo).toInt().coerceIn(0,255);native.drawCircle(x,y,11f,paint) + paint.alpha=(255*ease(t/.12f)).toInt();native.save();native.scale(sx,sy,x,y) + native.drawCircle(x,y,4.5f,paint);native.restore();native.restore() + } + } + } + } +} +private fun smooth(x: Float): Float { val p=x.coerceIn(0f,1f);return p*p*(3-2*p) } +private fun ease(x: Float): Float = 1-(1-x.coerceIn(0f,1f)).pow(3) diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/WelcomeBrandFlow.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/WelcomeBrandFlow.kt new file mode 100644 index 0000000000..7d40297d9a --- /dev/null +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/WelcomeBrandFlow.kt @@ -0,0 +1,74 @@ +package com.openbitfun.mobile.app.ui.shell + +import android.graphics.Paint +import android.graphics.DashPathEffect +import androidx.core.graphics.PathParser +import androidx.compose.foundation.Canvas +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.* +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.drawscope.drawIntoCanvas +import androidx.compose.ui.graphics.nativeCanvas +import androidx.compose.ui.graphics.toArgb +import androidx.lifecycle.Lifecycle +import androidx.lifecycle.compose.LocalLifecycleOwner +import androidx.lifecycle.repeatOnLifecycle +import kotlinx.coroutines.delay +import kotlinx.coroutines.isActive +import kotlin.coroutines.coroutineContext + +private val contourData = listOf( + "M154.860 59.584 Q167.500 59.584 173.820 70.531 L200.680 117.053 Q207.000 128.000 200.680 138.947 L173.820 185.469 Q167.500 196.416 154.860 196.416 L101.140 196.416 Q88.500 196.416 82.180 185.469 L55.320 138.947 Q49.000 128.000 55.320 117.053 L82.180 70.531 Q88.500 59.584 101.140 59.584 Z", + "M152.788 57.185 Q165.682 56.702 172.547 67.628 L201.722 114.060 Q208.586 124.985 202.557 136.392 L176.934 184.875 Q170.905 196.282 158.011 196.765 L103.212 198.815 Q90.318 199.298 83.453 188.372 L54.278 141.940 Q47.414 131.015 53.443 119.608 L79.066 71.125 Q85.095 59.718 97.989 59.235 Z", + "M150.574 54.847 Q163.702 53.863 171.119 64.741 L202.639 110.973 Q210.056 121.851 204.343 133.713 L180.066 184.126 Q174.353 195.988 161.224 196.972 L105.426 201.153 Q92.298 202.137 84.881 191.259 L53.361 145.027 Q45.944 134.149 51.657 122.287 L75.934 71.874 Q81.647 60.012 94.776 59.028 Z", + "M148.218 52.578 Q161.562 51.074 169.537 61.879 L203.427 107.798 Q211.401 118.603 206.031 130.911 L183.208 183.221 Q177.838 195.529 164.494 197.032 L107.782 203.422 Q94.438 204.926 86.463 194.121 L52.573 148.202 Q44.599 137.397 49.969 125.089 L72.792 72.779 Q78.162 60.471 91.506 58.968 Z", + "M145.724 50.384 Q159.263 48.344 167.799 59.048 L204.079 104.542 Q212.616 115.246 207.614 127.991 L186.355 182.157 Q181.353 194.902 167.814 196.943 L110.276 205.616 Q96.737 207.656 88.201 196.952 L51.921 151.458 Q43.384 140.754 48.386 128.009 L69.645 73.843 Q74.647 61.098 88.186 59.057 Z", + "M143.094 48.274 Q156.805 45.680 165.907 56.257 L204.592 101.209 Q213.694 111.786 209.085 124.957 L189.498 180.935 Q184.889 194.106 171.178 196.700 L112.906 207.726 Q99.195 210.320 90.093 199.743 L51.408 154.791 Q42.306 144.214 46.915 131.043 L66.502 75.065 Q71.111 61.894 84.822 59.300 Z", + "M140.330 46.254 Q154.191 43.091 163.861 53.512 L204.959 97.806 Q214.629 108.227 210.439 121.813 L192.629 179.551 Q188.438 193.137 174.578 196.301 L115.670 209.746 Q101.809 212.909 92.139 202.488 L51.041 158.194 Q41.371 147.773 45.561 134.187 L63.371 76.449 Q67.562 62.863 81.422 59.699 Z", + "M137.437 44.331 Q151.423 40.584 161.662 50.823 L205.177 94.338 Q215.416 104.577 211.669 118.563 L195.741 178.007 Q191.993 191.993 178.007 195.741 L118.563 211.669 Q104.577 215.416 94.338 205.177 L50.823 161.662 Q40.584 151.423 44.331 137.437 L60.259 77.993 Q64.007 64.007 77.993 60.259 Z", + "M134.416 42.513 Q148.504 38.167 159.311 48.195 L205.242 90.813 Q216.049 100.840 212.769 115.214 L198.826 176.300 Q195.545 190.673 181.458 195.019 L121.584 213.487 Q107.496 217.833 96.689 207.805 L50.758 165.187 Q39.951 155.160 43.231 140.786 L57.174 79.700 Q60.455 65.327 74.542 60.981 Z", + "M131.272 40.805 Q145.436 35.849 156.810 45.637 L205.149 87.237 Q216.523 97.025 213.733 111.769 L201.877 174.431 Q199.087 189.175 184.923 194.131 L124.728 215.195 Q110.564 220.151 99.190 210.363 L50.851 168.763 Q39.477 158.975 42.267 144.231 L54.123 81.569 Q56.913 66.825 71.077 61.869 Z", + "M128.010 39.216 Q142.223 33.637 154.160 43.157 L204.895 83.616 Q216.832 93.136 214.556 108.234 L204.885 172.401 Q202.609 187.499 188.396 193.077 L127.990 216.784 Q113.777 222.363 101.840 212.843 L51.105 172.384 Q39.168 162.864 41.444 147.766 L51.115 83.599 Q53.391 68.501 67.604 62.923 Z", + "M124.633 37.750 Q138.869 31.539 151.365 40.762 L204.475 79.959 Q216.972 89.182 215.233 104.616 L207.842 170.209 Q206.103 185.643 191.868 191.854 L131.367 218.250 Q117.131 224.461 104.635 215.238 L51.525 176.041 Q39.028 166.818 40.767 151.384 L48.158 85.791 Q49.897 70.357 64.132 64.146 Z", + "M121.147 36.415 Q135.377 29.562 148.427 38.459 L203.889 76.272 Q216.938 85.169 215.758 100.920 L210.742 167.858 Q209.562 183.608 195.331 190.461 L134.853 219.585 Q120.623 226.438 107.573 217.541 L52.111 179.728 Q39.062 170.831 40.242 155.080 L45.258 88.142 Q46.438 72.392 60.669 65.539 Z", + "M117.556 35.216 Q131.752 27.713 145.348 36.256 L203.131 72.563 Q216.727 81.106 216.127 97.152 L213.575 165.347 Q212.975 181.393 198.778 188.896 L138.444 220.784 Q124.248 228.287 110.652 219.744 L52.869 183.437 Q39.273 174.894 39.873 158.848 L42.425 90.653 Q43.025 74.607 57.222 67.104 Z", + "M113.866 34.160 Q128.000 26.000 142.134 34.160 L202.201 68.840 Q216.335 77.000 216.335 93.320 L216.335 162.680 Q216.335 179.000 202.201 187.160 L142.134 221.840 Q128.000 230.000 113.866 221.840 L53.799 187.160 Q39.665 179.000 39.665 162.680 L39.665 93.320 Q39.665 77.000 53.799 68.840 Z" +) +private val contourLengths = listOf(460.633f,470.212f,479.792f,489.371f,498.950f,508.529f,518.108f,527.687f,537.267f,546.846f,556.425f,566.004f,575.583f,585.163f,594.742f) +@Composable +internal fun WelcomeBrandFlow(modifier: Modifier, sweep: Boolean = false) { + val paths=remember { contourData.map { PathParser.createPathFromPathData(it)!! } } + val paint=remember { Paint(Paint.ANTI_ALIAS_FLAG).apply { style=Paint.Style.STROKE;strokeWidth=1f } } + var phase by remember { mutableFloatStateOf(0f) } + var moving by remember { mutableStateOf(false) } + val lifecycle=LocalLifecycleOwner.current.lifecycle + LaunchedEffect(lifecycle) { + lifecycle.repeatOnLifecycle(Lifecycle.State.RESUMED) { + moving=coroutineContext[androidx.compose.ui.MotionDurationScale]?.scaleFactor!=0f + if(moving) while(isActive) { phase=(System.currentTimeMillis() % (if(sweep) 5000 else 18000)).toFloat() / (if(sweep) 5000f else 18000f);delay(33) } + } + } + val ink=MaterialTheme.colorScheme.onBackground + Canvas(modifier) { + drawIntoCanvas { canvas -> + val c=canvas.nativeCanvas;c.save();c.scale(size.width/256,size.height/256);paint.color=ink.toArgb() + if(sweep) { + val shift=(minOf(1f,phase/.75f)*2-1)*256 + val colors=floatArrayOf(.16f,.25f,1f,.25f,.16f).map { alpha -> + ink.copy(alpha = if(moving) alpha else .5f).toArgb() + }.toIntArray() + paint.pathEffect=null;paint.alpha=255;paint.strokeWidth=1.45f + paint.shader=android.graphics.LinearGradient(shift,shift,256+shift,256+shift,colors, + floatArrayOf(0f,.46f,.55f,.65f,1f),android.graphics.Shader.TileMode.CLAMP) + paths.forEach { c.drawPath(it,paint) };paint.shader=null + } else paths.forEachIndexed { index,path -> + paint.pathEffect=null;paint.alpha=64;c.drawPath(path,paint) + if(moving) listOf(.34f,.26f,.18f).forEachIndexed { layer,length -> + val total=contourLengths[index] + paint.pathEffect=DashPathEffect(floatArrayOf(total*length/2,total*(1-length),total*length/2,0f),-total*(phase+index*.03f)) + paint.alpha=(255*listOf(.12f,.14f,.36f)[layer]).toInt();c.drawPath(path,paint) + } + };c.restore() + } + } +} diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/WelcomeHome.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/WelcomeHome.kt new file mode 100644 index 0000000000..b0d7dd89cf --- /dev/null +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/shell/WelcomeHome.kt @@ -0,0 +1,108 @@ +package com.openbitfun.mobile.app.ui.shell + +import androidx.compose.animation.core.* +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.draw.drawWithContent +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.clearAndSetSemantics +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import androidx.lifecycle.Lifecycle +import androidx.lifecycle.compose.LocalLifecycleOwner +import androidx.lifecycle.repeatOnLifecycle +import com.openbitfun.mobile.app.R +import com.openbitfun.mobile.app.ui.theme.generated.MobileDesignColors +import com.openbitfun.mobile.app.ui.theme.generated.MobileDesignGeometry as G +import kotlinx.coroutines.currentCoroutineContext +import kotlinx.coroutines.isActive +import kotlin.math.* + +/** A welcome layout, C text motion. Only presentation state is kept here. */ +@Composable +internal fun WelcomeHome(onLogin: () -> Unit, onScan: () -> Unit, signedIn: Boolean = false, modifier: Modifier = Modifier) { + val phrases = listOf("OpenBitFun", stringResource(R.string.welcome_work), stringResource(R.string.welcome_play), stringResource(R.string.welcome_yours)) + val elapsed = remember { Animatable(0f) } + val lifecycle = LocalLifecycleOwner.current.lifecycle + LaunchedEffect(lifecycle, phrases) { + lifecycle.repeatOnLifecycle(Lifecycle.State.RESUMED) { + val reduced = currentCoroutineContext()[androidx.compose.ui.MotionDurationScale]?.scaleFactor == 0f + if (reduced) { elapsed.snapTo(2700f); return@repeatOnLifecycle } + while (currentCoroutineContext().isActive) { + elapsed.snapTo(0f) + elapsed.animateTo(phrases.sumOf { welcomeDuration(it) }.toFloat(), tween(phrases.sumOf { welcomeDuration(it) }, easing = LinearEasing)) + } + } + } + var time = elapsed.value + var phrase = phrases.first() + for (item in phrases) { phrase = item; if (time < welcomeDuration(item)) break; time -= welcomeDuration(item) } + val ink = MaterialTheme.colorScheme.onBackground + BoxWithConstraints(modifier.fillMaxSize().background(MaterialTheme.colorScheme.background), contentAlignment = Alignment.TopCenter) { + val pageHeight = maxHeight.coerceAtLeast(540.dp) + Column(Modifier.widthIn(max = G.WelcomeMaxWidth).fillMaxWidth().verticalScroll(rememberScrollState()).heightIn(min = pageHeight)) { + Row(Modifier.fillMaxWidth().height(G.WelcomeHeaderHeight).padding(horizontal = G.WelcomeGutter), verticalAlignment = Alignment.CenterVertically) { + Row { "OpenBitFun".forEach { c -> WelcomeGlyph(c, G.WelcomeHeaderWordSize.value, Modifier) } } + } + Box(Modifier.fillMaxWidth().height((pageHeight - G.WelcomeHeaderHeight - 228.dp).coerceAtLeast(270.dp)), contentAlignment = Alignment.Center) { + Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.offset(y = (-28).dp)) { + WelcomeBrandFlow(Modifier.size(G.WelcomeMarkSize)) + Spacer(Modifier.height(29.dp)) + Row(Modifier.height(48.dp).clearAndSetSemantics { contentDescription = "OpenBitFun" }, verticalAlignment = Alignment.CenterVertically) { + phrase.forEachIndexed { index, c -> + val p = ((time - 180 - index * 55) / 800).coerceIn(0f, 1f) + val ease = 1 - (1-p).pow(3) + val bump = sin(p * PI).toFloat() * (1-p) + val out = ((time-welcomeDuration(phrase)+650)/650).coerceIn(0f,1f) + WelcomeGlyph(c, if(phrase.length>12) 27f else G.WelcomeWordSize.value, Modifier.graphicsLayer { + alpha = (p*3).coerceIn(0f,1f)*(1-out) + translationX = ((1-ease)*38-bump*5-out*out*30).dp.toPx() + scaleX = 1+bump*.045f; scaleY = scaleX + }) + } + } + } + } + Column(Modifier.fillMaxWidth().background(MobileDesignColors.Light.WelcomeDock, RoundedCornerShape(topStart = G.WelcomeDockRadius, topEnd = G.WelcomeDockRadius)) + .padding(start = G.WelcomeGutter, end = G.WelcomeGutter, top = G.WelcomeGutter, bottom = G.WelcomeDockBottom), verticalArrangement = Arrangement.spacedBy(G.WelcomeButtonGap)) { + WelcomeAction(stringResource(if (signedIn) R.string.sidebar_connect_desktop else R.string.welcome_login), onLogin) + WelcomeAction(stringResource(R.string.welcome_scan), onScan, scan = true) + // Reserve the optional MiniApp row; this host does not ship a MiniApp runtime yet. + Spacer(Modifier.height(44.dp)) + } + } + } +} + +@Composable +private fun WelcomeAction(label: String, onClick: () -> Unit, scan: Boolean = false) { + Button(onClick, Modifier.fillMaxWidth().height(G.WelcomeButtonHeight), shape = RoundedCornerShape(28.dp), + colors = ButtonDefaults.buttonColors(containerColor = MobileDesignColors.Light.WelcomeButton, contentColor = MobileDesignColors.Light.WelcomeButtonLabel)) { + if(scan) { Icon(painterResource(R.drawable.ic_symbol_qrcode_viewfinder), null, Modifier.size(20.dp)); Spacer(Modifier.width(10.dp)) } + Text(label, fontSize = 14.sp, fontWeight = FontWeight.SemiBold) + } +} +private fun welcomeDuration(word: String) = 250+word.length*185+(if(word=="OpenBitFun")600 else 0)+1800+650 + +@Composable +private fun WelcomeGlyph(letter: Char, fontSize: Float, modifier: Modifier) { + Text(if(letter=='i') "ı" else letter.toString(), fontSize = fontSize.sp, + fontWeight = FontWeight.SemiBold, color = MaterialTheme.colorScheme.onBackground, + modifier = modifier.drawWithContent { + drawContent() + if(letter=='i') drawCircle(MobileDesignColors.Light.BrandDot, radius = fontSize.sp.toPx()*.07f, + center = Offset(size.width/2, fontSize.sp.toPx()*.25f)) + }) +} diff --git a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/theme/generated/MobileDesignTokens.kt b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/theme/generated/MobileDesignTokens.kt index d169a23b39..a35d5f5002 100644 --- a/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/theme/generated/MobileDesignTokens.kt +++ b/src/apps/mobile/android/app/src/main/kotlin/com/openbitfun/mobile/app/ui/theme/generated/MobileDesignTokens.kt @@ -52,6 +52,11 @@ internal object MobileDesignColors { val CodeConstant = Color(0xFFA04444) val CodeProperty = Color(0xFF466D78) val CodeTargetBg = Color(0xFFFFF1BE) + val BrandDot = Color(0xFF16B9CE) + val WelcomeDock = Color(0xFF171917) + val WelcomeButton = Color(0xFFFFFFFF) + val WelcomeButtonLabel = Color(0xFF171917) + val WelcomeSecondary = Color(0xFFB9BCB9) } object Dark { @@ -98,6 +103,11 @@ internal object MobileDesignColors { val CodeConstant = Color(0xFFE79A9A) val CodeProperty = Color(0xFF9CC8D0) val CodeTargetBg = Color(0xFF5A4E24) + val BrandDot = Color(0xFF16B9CE) + val WelcomeDock = Color(0xFF171917) + val WelcomeButton = Color(0xFFFFFFFF) + val WelcomeButtonLabel = Color(0xFF171917) + val WelcomeSecondary = Color(0xFFB9BCB9) } } @@ -118,6 +128,7 @@ internal object MobileDesignTypography { val LabelLarge = TextStyle(fontSize = 15.sp, lineHeight = 20.sp, fontWeight = FontWeight.Medium) val LabelMedium = TextStyle(fontSize = 14.sp, lineHeight = 18.sp, fontWeight = FontWeight.Medium) val LabelSmall = TextStyle(fontSize = 12.sp, lineHeight = 16.sp, fontWeight = FontWeight.Normal) + val BrandWordmark = TextStyle(fontSize = 42.sp, lineHeight = 56.sp, fontWeight = FontWeight.Medium) } internal object MobileDesignGeometry { @@ -180,6 +191,22 @@ internal object MobileDesignGeometry { val ModelListBottomPadding = 16.dp val ModelEmptyAccountHeight = 80.dp val ModelEditorHeight = 560.dp + val WelcomeMaxWidth = 520.dp + val WelcomeGutter = 25.dp + val WelcomeHeaderHeight = 58.dp + val WelcomeButtonHeight = 49.dp + val WelcomeButtonGap = 11.dp + val WelcomeDockRadius = 30.dp + val WelcomeDockBottom = 39.dp + val WelcomeMarkSize = 92.dp + val WelcomeWordSize = 34.dp + val WelcomeStageHeight = 220.dp + val WelcomeHeaderWordSize = 17.dp + val RecentHomeGutter = 24.dp + val RecentHomeMarkSize = 132.dp + val RecentHomeTitleSize = 25.dp + val RecentHomeMaxWidth = 560.dp + val RecentHomeRowPadding = 18.dp } internal object MobileDesignBreakpoints { @@ -191,4 +218,5 @@ internal object MobileDesignBreakpoints { internal object MobileDesignMotion { const val Quick: Int = 180 const val Structure: Int = 220 + const val StartupBrand: Int = 6800 } diff --git a/src/apps/mobile/android/app/src/main/res/drawable/ic_symbol_qrcode_viewfinder.xml b/src/apps/mobile/android/app/src/main/res/drawable/ic_symbol_qrcode_viewfinder.xml new file mode 100644 index 0000000000..be6a89e45b --- /dev/null +++ b/src/apps/mobile/android/app/src/main/res/drawable/ic_symbol_qrcode_viewfinder.xml @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/apps/mobile/android/app/src/main/res/values-zh/strings.xml b/src/apps/mobile/android/app/src/main/res/values-zh/strings.xml index fa4766330f..ac27e8d545 100644 --- a/src/apps/mobile/android/app/src/main/res/values-zh/strings.xml +++ b/src/apps/mobile/android/app/src/main/res/values-zh/strings.xml @@ -58,11 +58,11 @@ 请输入有效的用户名和密码。 用户名或密码被拒绝。 登录尝试过多，请稍后再试。 - 账号中继暂时不可用。 - 无法连接账号中继。 + 登录服务暂时不可用，请稍后重试。 + 暂时无法连接，请检查网络后重试。 中继返回了无效的账号响应。 无法恢复安全账号会话。 - 账号中继没有及时响应。 + 连接超时，请检查网络后重试。 通用聊天 更多 复制 Markdown @@ -444,9 +444,19 @@ 稍后 开启通知 允许 OpenBitFun 在任务完成时发送通知。你可以稍后在系统设置中更改。 - 扫描桌面端显示的二维码，开始远程处理任务。 在 OpenBitFun 桌面端点击「连接移动端」\n扫描二维码完成连接 需要相机权限才能扫码，请在系统设置中允许 OpenBitFun 访问相机，或改为手动配对。 无法打开相机，请检查权限后重试，或改为手动配对。 扫描二维码或粘贴远程连接链接后会显示桌面端连接状态。 + 登录账号 + 扫码连接电脑 + 干点活儿 + 玩点花样 + 随你发挥 + 今天，想做点什么？ + 最近会话 + 浏览工作区 + 全部会话 + 还没有可继续的对话 + 连接电脑后，继续你的对话。 diff --git a/src/apps/mobile/android/app/src/main/res/values/strings.xml b/src/apps/mobile/android/app/src/main/res/values/strings.xml index 28dfec51a8..0cb669d76f 100644 --- a/src/apps/mobile/android/app/src/main/res/values/strings.xml +++ b/src/apps/mobile/android/app/src/main/res/values/strings.xml @@ -60,10 +60,10 @@ Enter a valid username and password. The username or password was rejected. Too many sign-in attempts. Try again later. - The account relay is unavailable. - Could not reach the account relay. + Sign-in is temporarily unavailable. Try again later. + Unable to connect. Check your connection and try again. The relay returned an invalid account response. - The account relay did not answer in time. + Connection timed out. Check your connection and try again. The secure account session could not be restored. General Chat More @@ -459,9 +459,19 @@ Later Enable notifications Allow OpenBitFun to notify you when tasks finish. You can change this later in system settings. - Scan the QR code shown on your desktop to start working remotely. On OpenBitFun Desktop, tap Connect mobile\nthen scan the QR code Camera access is required to scan. Allow OpenBitFun to use the camera in system settings, or pair manually. The camera could not be opened. Check permissions and retry, or pair manually. Scanning a QR code or pasting a remote connection link will show the desktop connection status. + Sign in + Scan to connect + Get things done + Try something fun + Make it yours + What would you like to do today? + Recent conversations + Browse workspaces + All conversations + No conversations to continue yet + Connect a computer to continue your conversations. diff --git a/src/apps/mobile/design-system/README.md b/src/apps/mobile/design-system/README.md index a86c546c63..9d4d9baad9 100644 --- a/src/apps/mobile/design-system/README.md +++ b/src/apps/mobile/design-system/README.md @@ -84,3 +84,79 @@ Valid scenario ids come from `scenarios/mobile-preview-scenarios.json`. Save captures using the convention documented in `preview/snapshots/README.md`, then open the desktop comparison surface to inspect them beside the HarmonyOS baseline. + +## Cold-start brand motion + +HarmonyOS, Android and iOS render `startup_brand_reveal` natively. The 6.8-second +sequence uses the `brand_wordmark` artwork typography and the dedicated +`brand_dot` cyan, distinct from action and status colors. Platform soft sans +fonts are used; the HTML prototype's macOS fonts are not redistributed. This +decorative wordmark scales with its 280-unit stage, rather than Dynamic Type; +normal app text continues to respect accessibility sizing. + +The cyan dot hops with the letter reveals, returns to the dotless i, then the +shared contour mark expands above the word. Cold-launch presentation is +independent of account and network readiness. Backgrounding removes it without +replay, and system reduced-motion skips it. Notification onboarding waits until +the overlay finishes. Design-preview launches bypass the startup overlay. + +Validate on a compact and wide native window, including a live resize where +available, and check a background/foreground cycle during the reveal. + +## Signed-out welcome home + +The disconnected, signed-out home uses the A welcome composition with the C +staggered-slide phrase animation: a fixed brand mark, desktop-derived localized +short phrases, and equally weighted sign-in and scan actions in a dark dock. +This is the signed-out home itself, not an onboarding layer before another +landing page. Compact and wide hosts use the same entry on all three platforms: +without a control target, show the welcome composition; account identity only +changes its primary action from sign-in to connect. Connect opens the existing +device chooser and scan opens the existing scanner. With a retained target, +disconnect/reconnect preserves session context and retry controls instead of +returning to welcome. An account reset can leave HarmonyOS disconnected rather +than idle; either state leads to welcome once the control target is cleared. +`welcome_*` geometry tokens own the compact dimensions and a 520-unit wide +content cap. The four dedicated welcome colors keep the dark dock and white +buttons stable in both appearance modes; normal page/action tokens invert or +change surfaces and cannot express this fixed brand treatment. + +Each phrase enters with 55 ms per-glyph staggering and an 800 ms cubic ease-out, +then leaves over 650 ms. Reduced motion renders a static wordmark. Background +or invisible hosts suspend presentation work. Native safe-area and accessibility +behavior remain platform-owned; these are logical layout units, not a promise +of identical font rasterization on different systems. + +HarmonyOS exposes the bundled MiniApp destination. Android and iOS preserve the +reserved footer area until they own that capability, rather than presenting an +inert MiniApp action. QR actions still use the existing account-device protocol; +this UI change does not add guest credentials or bypass server authorization. +HarmonyOS can render the isolated surface with the existing design-preview +launch parameter `openbitfunDesignPreview=welcome-home`, without logging out an +active account or loading its connection state. + +The welcome and startup marks share the desktop AboutBrandMark contour geometry: +15 rounded hexagonal paths with three low-opacity highlights traveling around +each contour over 18 seconds. `assets/welcome-brand-contours.json` records the +256-unit paths and lengths; native renderers own their drawing and lifecycle. +The startup keeps its existing entrance choreography; the welcome mark stays +in place while the highlights and short phrases loop. Reduced motion keeps the +contours static. No microphone or voice-service dependency is introduced. + +### Recent-conversation home + +Signed-in home shows up to three non-archived sessions from the current remote +device, ordered by valid update timestamp (creation time is the fallback). It +labels the device and workspace without treating a loaded catalog as an active +workspace selection. All conversations opens the existing sidebar; creation +stays in the workspace-owned sidebar action. Signed-in users without a remote +target see the same home with a connection entry, while signed-out users retain +the welcome page. Loading and offline states never erase retained sessions. +The mark uses a five-second diagonal highlight sweep; reduced motion uses a +static contour. Native hosts retain their own lifecycle and adaptive layout. + +The recent-home brand and headline are centered above the leading-aligned session list. The mark retains its original silhouette and uses the same diagonal sweep across native surfaces. HarmonyOS uses a 156vp mark and 21fp headline for its optical balance; other hosts use the shared geometry. + +HarmonyOS welcome occupies the full window when signed out without an active remote target. It suppresses the workspace sidebar without changing retained selection. At 600vp and above, the brand, phrase and constrained action group are centered without the compact dock; smaller windows retain the stacked dock. The welcome mark is 156vp compact and 184vp wide, using the diagonal sweep. Size changes update this layout in place. + +For HarmonyOS welcome windows at least 840vp wide with width/height at least 1.2, a centered composition capped at 1000vp places the brand and actions side by side. This follows available window geometry rather than a device model or fold count. diff --git a/src/apps/mobile/design-system/assets/welcome-brand-contours.json b/src/apps/mobile/design-system/assets/welcome-brand-contours.json new file mode 100644 index 0000000000..6e5727b483 --- /dev/null +++ b/src/apps/mobile/design-system/assets/welcome-brand-contours.json @@ -0,0 +1,67 @@ +{ + "viewBox": 256, + "cycleMs": 18000, + "source": "Desktop AboutBrandMark rounded six-corner ribbon, 15 fixed contours.", + "contours": [ + { + "path": "M154.860 59.584 Q167.500 59.584 173.820 70.531 L200.680 117.053 Q207.000 128.000 200.680 138.947 L173.820 185.469 Q167.500 196.416 154.860 196.416 L101.140 196.416 Q88.500 196.416 82.180 185.469 L55.320 138.947 Q49.000 128.000 55.320 117.053 L82.180 70.531 Q88.500 59.584 101.140 59.584 Z", + "length": 460.63326438618736 + }, + { + "path": "M152.788 57.185 Q165.682 56.702 172.547 67.628 L201.722 114.060 Q208.586 124.985 202.557 136.392 L176.934 184.875 Q170.905 196.282 158.011 196.765 L103.212 198.815 Q90.318 199.298 83.453 188.372 L54.278 141.940 Q47.414 131.015 53.443 119.608 L79.066 71.125 Q85.095 59.718 97.989 59.235 Z", + "length": 470.2124371537121 + }, + { + "path": "M150.574 54.847 Q163.702 53.863 171.119 64.741 L202.639 110.973 Q210.056 121.851 204.343 133.713 L180.066 184.126 Q174.353 195.988 161.224 196.972 L105.426 201.153 Q92.298 202.137 84.881 191.259 L53.361 145.027 Q45.944 134.149 51.657 122.287 L75.934 71.874 Q81.647 60.012 94.776 59.028 Z", + "length": 479.79160992123684 + }, + { + "path": "M148.218 52.578 Q161.562 51.074 169.537 61.879 L203.427 107.798 Q211.401 118.603 206.031 130.911 L183.208 183.221 Q177.838 195.529 164.494 197.032 L107.782 203.422 Q94.438 204.926 86.463 194.121 L52.573 148.202 Q44.599 137.397 49.969 125.089 L72.792 72.779 Q78.162 60.471 91.506 58.968 Z", + "length": 489.3707826887615 + }, + { + "path": "M145.724 50.384 Q159.263 48.344 167.799 59.048 L204.079 104.542 Q212.616 115.246 207.614 127.991 L186.355 182.157 Q181.353 194.902 167.814 196.943 L110.276 205.616 Q96.737 207.656 88.201 196.952 L51.921 151.458 Q43.384 140.754 48.386 128.009 L69.645 73.843 Q74.647 61.098 88.186 59.057 Z", + "length": 498.94995545628615 + }, + { + "path": "M143.094 48.274 Q156.805 45.680 165.907 56.257 L204.592 101.209 Q213.694 111.786 209.085 124.957 L189.498 180.935 Q184.889 194.106 171.178 196.700 L112.906 207.726 Q99.195 210.320 90.093 199.743 L51.408 154.791 Q42.306 144.214 46.915 131.043 L66.502 75.065 Q71.111 61.894 84.822 59.300 Z", + "length": 508.5291282238109 + }, + { + "path": "M140.330 46.254 Q154.191 43.091 163.861 53.512 L204.959 97.806 Q214.629 108.227 210.439 121.813 L192.629 179.551 Q188.438 193.137 174.578 196.301 L115.670 209.746 Q101.809 212.909 92.139 202.488 L51.041 158.194 Q41.371 147.773 45.561 134.187 L63.371 76.449 Q67.562 62.863 81.422 59.699 Z", + "length": 518.1083009913356 + }, + { + "path": "M137.437 44.331 Q151.423 40.584 161.662 50.823 L205.177 94.338 Q215.416 104.577 211.669 118.563 L195.741 178.007 Q191.993 191.993 178.007 195.741 L118.563 211.669 Q104.577 215.416 94.338 205.177 L50.823 161.662 Q40.584 151.423 44.331 137.437 L60.259 77.993 Q64.007 64.007 77.993 60.259 Z", + "length": 527.6874737588603 + }, + { + "path": "M134.416 42.513 Q148.504 38.167 159.311 48.195 L205.242 90.813 Q216.049 100.840 212.769 115.214 L198.826 176.300 Q195.545 190.673 181.458 195.019 L121.584 213.487 Q107.496 217.833 96.689 207.805 L50.758 165.187 Q39.951 155.160 43.231 140.786 L57.174 79.700 Q60.455 65.327 74.542 60.981 Z", + "length": 537.2666465263849 + }, + { + "path": "M131.272 40.805 Q145.436 35.849 156.810 45.637 L205.149 87.237 Q216.523 97.025 213.733 111.769 L201.877 174.431 Q199.087 189.175 184.923 194.131 L124.728 215.195 Q110.564 220.151 99.190 210.363 L50.851 168.763 Q39.477 158.975 42.267 144.231 L54.123 81.569 Q56.913 66.825 71.077 61.869 Z", + "length": 546.8458192939097 + }, + { + "path": "M128.010 39.216 Q142.223 33.637 154.160 43.157 L204.895 83.616 Q216.832 93.136 214.556 108.234 L204.885 172.401 Q202.609 187.499 188.396 193.077 L127.990 216.784 Q113.777 222.363 101.840 212.843 L51.105 172.384 Q39.168 162.864 41.444 147.766 L51.115 83.599 Q53.391 68.501 67.604 62.923 Z", + "length": 556.4249920614343 + }, + { + "path": "M124.633 37.750 Q138.869 31.539 151.365 40.762 L204.475 79.959 Q216.972 89.182 215.233 104.616 L207.842 170.209 Q206.103 185.643 191.868 191.854 L131.367 218.250 Q117.131 224.461 104.635 215.238 L51.525 176.041 Q39.028 166.818 40.767 151.384 L48.158 85.791 Q49.897 70.357 64.132 64.146 Z", + "length": 566.004164828959 + }, + { + "path": "M121.147 36.415 Q135.377 29.562 148.427 38.459 L203.889 76.272 Q216.938 85.169 215.758 100.920 L210.742 167.858 Q209.562 183.608 195.331 190.461 L134.853 219.585 Q120.623 226.438 107.573 217.541 L52.111 179.728 Q39.062 170.831 40.242 155.080 L45.258 88.142 Q46.438 72.392 60.669 65.539 Z", + "length": 575.5833375964837 + }, + { + "path": "M117.556 35.216 Q131.752 27.713 145.348 36.256 L203.131 72.563 Q216.727 81.106 216.127 97.152 L213.575 165.347 Q212.975 181.393 198.778 188.896 L138.444 220.784 Q124.248 228.287 110.652 219.744 L52.869 183.437 Q39.273 174.894 39.873 158.848 L42.425 90.653 Q43.025 74.607 57.222 67.104 Z", + "length": 585.1625103640084 + }, + { + "path": "M113.866 34.160 Q128.000 26.000 142.134 34.160 L202.201 68.840 Q216.335 77.000 216.335 93.320 L216.335 162.680 Q216.335 179.000 202.201 187.160 L142.134 221.840 Q128.000 230.000 113.866 221.840 L53.799 187.160 Q39.665 179.000 39.665 162.680 L39.665 93.320 Q39.665 77.000 53.799 68.840 Z", + "length": 594.7416831315331 + } + ] +} diff --git a/src/apps/mobile/design-system/components/mobile-components.json b/src/apps/mobile/design-system/components/mobile-components.json index 66594e047d..fb854431bf 100644 --- a/src/apps/mobile/design-system/components/mobile-components.json +++ b/src/apps/mobile/design-system/components/mobile-components.json @@ -133,6 +133,34 @@ "states": ["loading", "text", "markdown", "image", "unsupported", "failed", "truncated"], "tokens": ["sheet_header_height", "file_link", "card", "line", "soft"], "platformNotes": "Placement is shared policy; rendering, file export, and platform-safe dismissal remain native adapters." + }, + "miniapp_navigation": { + "purpose": "Opens locally bundled tools from primary sidebar navigation, without requiring account or device access.", + "anatomy": ["outlined_apps_glyph", "leading_aligned_label", "full_row_touch_target"], + "states": ["idle", "pressed", "focused", "signed_out", "connected"], + "tokens": ["ink", "body_large", "control_touch_size"], + "platformNotes": "Use a quiet 48vp icon-and-label row in compact and wide sidebars, with 16vp medium-weight navigation text, a 24vp icon slot and a 14vp gap. HarmonyOS uses the native outlined sys.symbol.square_grid_2x2 at 24vp, centered in its slot and tinted with the semantic ink color. Render the catalog inside the shell content pane so selecting it slides the right pane left as the drawer closes, using the existing 250ms ease-out shell motion. Sidebar session selection uses the same shell motion without a second route-push animation. Do not promote this navigation destination to a primary action on remote home." + }, + "miniapp_catalog": { + "purpose": "Presents bundled apps with large visual previews that open each app directly.", + "anatomy": ["back_control", "centered_page_title", "offline_caption", "square_preview", "app_title"], + "states": ["catalog", "loading", "error", "app_open", "light", "dark"], + "tokens": ["page_bg", "ink", "muted", "soft", "body_large", "title_small", "body_medium", "label_small"], + "platformNotes": "Use a two-column library of square previews on compact screens and three columns when the gallery reaches 600vp. Clip previews to 24vp corners with 14vp column and 20vp row gaps; keep app names below images. The centered gallery caps at 1000vp, while open apps use full width. Reuse established showcase assets. Resize the grid without reloading an open app." + }, + "welcome_home": { + "purpose": "Signed-out disconnected home: fixed brand mark, looping desktop phrases, equal login and QR actions.", + "anatomy": ["wordmark_header", "fixed_brand_mark", "sliding_phrase", "dark_action_dock", "login", "scan", "optional_bundled_miniapps"], + "states": ["signed_out", "reduce_motion", "compact", "wide"], + "tokens": ["welcome_max_width", "welcome_gutter", "welcome_header_height", "welcome_button_height", "welcome_button_gap", "welcome_dock_radius", "welcome_dock_bottom", "welcome_mark_size", "welcome_word_size", "welcome_stage_height", "welcome_header_word_size", "welcome_dock", "welcome_button", "welcome_button_label", "welcome_secondary", "brand_dot"], + "platformNotes": "A layout with C staggered slide motion. Mark never animates. Per-glyph entry: 180ms + index*55ms, 800ms cubic ease-out, 38px slide with 5px settling overshoot. Exit is 650ms, 30px left. Respect reduced motion and stop work offscreen. Retain real account/scan routing; only show MiniApps on hosts that implement them. Safe-area insets remain native." + }, + "startup_brand_reveal": { + "purpose": "Provides a short desktop-inspired identity transition on cold launch without waiting for network or account loading.", + "anatomy": ["theme_background", "bouncing_brand_dot", "staggered_wordmark", "desktop_contour_brand_mark"], + "states": ["cold_start", "reduced_motion", "backgrounded"], + "tokens": ["page_bg", "ink", "brand_dot", "startup_brand"], + "platformNotes": "Native cold-start overlay on HarmonyOS, Android and iOS; 6800ms timeline independent of network readiness. A cyan dot hops ahead of ten 42-unit letters with subtle letter bounce. At normalized text time 0.70–0.86 it arcs back to the dotless i, settling at 7.35 units diameter with one fading halo. Text time is min(progress / 0.65 * 0.9, 0.9). Logo expands from 0.65 to 1 with a small overshoot during progress 0.66–0.85 as the word moves down 42 units. Use a centered 280×240 stage, scaled down for narrow windows, 92-unit contour mark on Android/iOS and a 156vp mark on HarmonyOS, with platform-native soft sans typography. HarmonyOS positions the mark at (62, -34) to preserve separation from the settled wordmark. Fade the overlay over the last 3%. Reserve full glyph slots; no layout changes during reveal. Remove on completion or background and do not replay on activity recreation/foreground. Skip for reduced motion. Notification onboarding follows completion. The dedicated brand_dot token preserves identity independently of action/status colors." } } } diff --git a/src/apps/mobile/design-system/preview/generated/mobile-design-data.js b/src/apps/mobile/design-system/preview/generated/mobile-design-data.js index b4a0e3cd11..f4334ad465 100644 --- a/src/apps/mobile/design-system/preview/generated/mobile-design-data.js +++ b/src/apps/mobile/design-system/preview/generated/mobile-design-data.js @@ -177,6 +177,26 @@ export const mobileTokens = { "code_target_bg": { "light": "#FFF1BE", "dark": "#5A4E24" + }, + "brand_dot": { + "light": "#16B9CE", + "dark": "#16B9CE" + }, + "welcome_dock": { + "light": "#171917", + "dark": "#171917" + }, + "welcome_button": { + "light": "#FFFFFF", + "dark": "#FFFFFF" + }, + "welcome_button_label": { + "light": "#171917", + "dark": "#171917" + }, + "welcome_secondary": { + "light": "#B9BCB9", + "dark": "#B9BCB9" } }, "typography": { @@ -259,6 +279,11 @@ export const mobileTokens = { "size": 12, "lineHeight": 16, "weight": 400 + }, + "brand_wordmark": { + "size": 42, + "lineHeight": 56, + "weight": 500 } }, "geometry": { @@ -320,7 +345,23 @@ export const mobileTokens = { "model_list_top_padding": 10, "model_list_bottom_padding": 16, "model_empty_account_height": 80, - "model_editor_height": 560 + "model_editor_height": 560, + "welcome_max_width": 520, + "welcome_gutter": 25, + "welcome_header_height": 58, + "welcome_button_height": 49, + "welcome_button_gap": 11, + "welcome_dock_radius": 30, + "welcome_dock_bottom": 39, + "welcome_mark_size": 92, + "welcome_word_size": 34, + "welcome_stage_height": 220, + "welcome_header_word_size": 17, + "recent_home_gutter": 24, + "recent_home_mark_size": 132, + "recent_home_title_size": 25, + "recent_home_max_width": 560, + "recent_home_row_padding": 18 }, "breakpoints": { "wide": 600, @@ -329,7 +370,8 @@ export const mobileTokens = { }, "motion": { "quick": 180, - "structure": 220 + "structure": 220, + "startup_brand": 6800 } }; export const mobileComponents = { @@ -853,6 +895,114 @@ export const mobileComponents = { "soft" ], "platformNotes": "Placement is shared policy; rendering, file export, and platform-safe dismissal remain native adapters." + }, + "miniapp_navigation": { + "purpose": "Opens locally bundled tools from primary sidebar navigation, without requiring account or device access.", + "anatomy": [ + "outlined_apps_glyph", + "leading_aligned_label", + "full_row_touch_target" + ], + "states": [ + "idle", + "pressed", + "focused", + "signed_out", + "connected" + ], + "tokens": [ + "ink", + "body_large", + "control_touch_size" + ], + "platformNotes": "Use a quiet 48vp icon-and-label row in compact and wide sidebars, with 16vp medium-weight navigation text, a 24vp icon slot and a 14vp gap. HarmonyOS uses the native outlined sys.symbol.square_grid_2x2 at 24vp, centered in its slot and tinted with the semantic ink color. Render the catalog inside the shell content pane so selecting it slides the right pane left as the drawer closes, using the existing 250ms ease-out shell motion. Sidebar session selection uses the same shell motion without a second route-push animation. Do not promote this navigation destination to a primary action on remote home." + }, + "miniapp_catalog": { + "purpose": "Presents bundled apps with large visual previews that open each app directly.", + "anatomy": [ + "back_control", + "centered_page_title", + "offline_caption", + "square_preview", + "app_title" + ], + "states": [ + "catalog", + "loading", + "error", + "app_open", + "light", + "dark" + ], + "tokens": [ + "page_bg", + "ink", + "muted", + "soft", + "body_large", + "title_small", + "body_medium", + "label_small" + ], + "platformNotes": "Use a two-column library of square previews on compact screens and three columns when the gallery reaches 600vp. Clip previews to 24vp corners with 14vp column and 20vp row gaps; keep app names below images. The centered gallery caps at 1000vp, while open apps use full width. Reuse established showcase assets. Resize the grid without reloading an open app." + }, + "welcome_home": { + "purpose": "Signed-out disconnected home: fixed brand mark, looping desktop phrases, equal login and QR actions.", + "anatomy": [ + "wordmark_header", + "fixed_brand_mark", + "sliding_phrase", + "dark_action_dock", + "login", + "scan", + "optional_bundled_miniapps" + ], + "states": [ + "signed_out", + "reduce_motion", + "compact", + "wide" + ], + "tokens": [ + "welcome_max_width", + "welcome_gutter", + "welcome_header_height", + "welcome_button_height", + "welcome_button_gap", + "welcome_dock_radius", + "welcome_dock_bottom", + "welcome_mark_size", + "welcome_word_size", + "welcome_stage_height", + "welcome_header_word_size", + "welcome_dock", + "welcome_button", + "welcome_button_label", + "welcome_secondary", + "brand_dot" + ], + "platformNotes": "A layout with C staggered slide motion. Mark never animates. Per-glyph entry: 180ms + index*55ms, 800ms cubic ease-out, 38px slide with 5px settling overshoot. Exit is 650ms, 30px left. Respect reduced motion and stop work offscreen. Retain real account/scan routing; only show MiniApps on hosts that implement them. Safe-area insets remain native." + }, + "startup_brand_reveal": { + "purpose": "Provides a short desktop-inspired identity transition on cold launch without waiting for network or account loading.", + "anatomy": [ + "theme_background", + "bouncing_brand_dot", + "staggered_wordmark", + "desktop_contour_brand_mark" + ], + "states": [ + "cold_start", + "reduced_motion", + "backgrounded" + ], + "tokens": [ + "page_bg", + "ink", + "brand_dot", + "startup_brand" + ], + "platformNotes": "Native cold-start overlay on HarmonyOS, Android and iOS; 6800ms timeline independent of network readiness. A cyan dot hops ahead of ten 42-unit letters with subtle letter bounce. At normalized text time 0.70–0.86 it arcs back to the dotless i, settling at 7.35 units diameter with one fading halo. Text time is min(progress / 0.65 * 0.9, 0.9). Logo expands from 0.65 to 1 with a small overshoot during progress 0.66–0.85 as the word moves down 42 units. Use a centered 280×240 stage, scaled down for narrow windows, 92-unit contour mark on Android/iOS and a 156vp mark on HarmonyOS, with platform-native soft sans typography. HarmonyOS positions the mark at (62, -34) to preserve separation from the settled wordmark. Fade the overlay over the last 3%. Reserve full glyph slots; no layout changes during reveal. Remove on completion or background and do not replay on activity recreation/foreground. Skip for reduced motion. Notification onboarding follows completion. The dedicated brand_dot token preserves identity independently of action/status colors." } } }; diff --git a/src/apps/mobile/design-system/tokens/mobile-tokens.json b/src/apps/mobile/design-system/tokens/mobile-tokens.json index 5b5e46b10d..a298153346 100644 --- a/src/apps/mobile/design-system/tokens/mobile-tokens.json +++ b/src/apps/mobile/design-system/tokens/mobile-tokens.json @@ -5,67 +5,285 @@ "signature": "Paper-and-ink conversation chrome with a single blue information accent" }, "colors": { - "start_window_background": { "light": "#FFFFFF", "dark": "#000000" }, - "transparent": { "light": "#00000000", "dark": "#00000000" }, - "page_bg": { "light": "#FFFFFF", "dark": "#151514" }, - "page_bg_fade": { "light": "#00FFFFFF", "dark": "#00151514" }, - "ink": { "light": "#171717", "dark": "#F4F3EF" }, - "muted": { "light": "#706F6A", "dark": "#AAA8A0" }, - "subtle": { "light": "#A5A39B", "dark": "#77756E" }, - "line": { "light": "#E9E7E2", "dark": "#363531" }, - "card": { "light": "#FFFFFF", "dark": "#252522" }, - "accent": { "light": "#111111", "dark": "#5B5954" }, - "file_link": { "light": "#2563EB", "dark": "#60A5FA" }, - "primary_action": { "light": "#111111", "dark": "#454540" }, - "content_on_action": { "light": "#FFFFFF", "dark": "#FFFFFF" }, - "connect_hero_bg": { "light": "#E6EDFF", "dark": "#2B2B29" }, - "connect_hero_accent": { "light": "#9DB4FF", "dark": "#4A4944" }, - "connect_hero_secondary": { "light": "#C9C5FF", "dark": "#3C3B38" }, - "connect_hero_surface": { "light": "#F8FAFF", "dark": "#252522" }, - "connect_scan_accent": { "light": "#FFD021", "dark": "#FFD021" }, - "scrim": { "light": "#44000000", "dark": "#44000000" }, - "shell_scrim": { "light": "#24000000", "dark": "#24000000" }, - "media_background": { "light": "#FF000000", "dark": "#FF000000" }, - "media_scrim": { "light": "#B8000000", "dark": "#B8000000" }, - "media_control_background": { "light": "#8C000000", "dark": "#8C000000" }, - "toast_background": { "light": "#D1171717", "dark": "#D1171717" }, - "shadow_faint": { "light": "#08000000", "dark": "#08000000" }, - "shadow_subtle": { "light": "#12000000", "dark": "#12000000" }, - "shadow_medium": { "light": "#18000000", "dark": "#18000000" }, - "shadow_strong": { "light": "#24000000", "dark": "#24000000" }, - "floating_border": { "light": "#18000000", "dark": "#18000000" }, - "soft": { "light": "#F4F3F0", "dark": "#2D2C28" }, - "floating_panel_bg": { "light": "#F7F7F5", "dark": "#1E1E1C" }, - "status_success": { "light": "#27C46A", "dark": "#3BD47B" }, - "status_danger": { "light": "#E04F4F", "dark": "#FF6B6B" }, - "code_line_number": { "light": "#AAA69D", "dark": "#77756E" }, - "code_keyword": { "light": "#8F3F71", "dark": "#D99AC4" }, - "code_string": { "light": "#477A4A", "dark": "#9BCB9D" }, - "code_number": { "light": "#9A5B13", "dark": "#E3B36D" }, - "code_comment": { "light": "#7A8078", "dark": "#96958D" }, - "code_function": { "light": "#2C6693", "dark": "#8CBCE0" }, - "code_type": { "light": "#865A20", "dark": "#D5B27F" }, - "code_constant": { "light": "#A04444", "dark": "#E79A9A" }, - "code_property": { "light": "#466D78", "dark": "#9CC8D0" }, - "code_target_bg": { "light": "#FFF1BE", "dark": "#5A4E24" } + "start_window_background": { + "light": "#FFFFFF", + "dark": "#000000" + }, + "transparent": { + "light": "#00000000", + "dark": "#00000000" + }, + "page_bg": { + "light": "#FFFFFF", + "dark": "#151514" + }, + "page_bg_fade": { + "light": "#00FFFFFF", + "dark": "#00151514" + }, + "ink": { + "light": "#171717", + "dark": "#F4F3EF" + }, + "muted": { + "light": "#706F6A", + "dark": "#AAA8A0" + }, + "subtle": { + "light": "#A5A39B", + "dark": "#77756E" + }, + "line": { + "light": "#E9E7E2", + "dark": "#363531" + }, + "card": { + "light": "#FFFFFF", + "dark": "#252522" + }, + "accent": { + "light": "#111111", + "dark": "#5B5954" + }, + "file_link": { + "light": "#2563EB", + "dark": "#60A5FA" + }, + "primary_action": { + "light": "#111111", + "dark": "#454540" + }, + "content_on_action": { + "light": "#FFFFFF", + "dark": "#FFFFFF" + }, + "connect_hero_bg": { + "light": "#E6EDFF", + "dark": "#2B2B29" + }, + "connect_hero_accent": { + "light": "#9DB4FF", + "dark": "#4A4944" + }, + "connect_hero_secondary": { + "light": "#C9C5FF", + "dark": "#3C3B38" + }, + "connect_hero_surface": { + "light": "#F8FAFF", + "dark": "#252522" + }, + "connect_scan_accent": { + "light": "#FFD021", + "dark": "#FFD021" + }, + "scrim": { + "light": "#44000000", + "dark": "#44000000" + }, + "shell_scrim": { + "light": "#24000000", + "dark": "#24000000" + }, + "media_background": { + "light": "#FF000000", + "dark": "#FF000000" + }, + "media_scrim": { + "light": "#B8000000", + "dark": "#B8000000" + }, + "media_control_background": { + "light": "#8C000000", + "dark": "#8C000000" + }, + "toast_background": { + "light": "#D1171717", + "dark": "#D1171717" + }, + "shadow_faint": { + "light": "#08000000", + "dark": "#08000000" + }, + "shadow_subtle": { + "light": "#12000000", + "dark": "#12000000" + }, + "shadow_medium": { + "light": "#18000000", + "dark": "#18000000" + }, + "shadow_strong": { + "light": "#24000000", + "dark": "#24000000" + }, + "floating_border": { + "light": "#18000000", + "dark": "#18000000" + }, + "soft": { + "light": "#F4F3F0", + "dark": "#2D2C28" + }, + "floating_panel_bg": { + "light": "#F7F7F5", + "dark": "#1E1E1C" + }, + "status_success": { + "light": "#27C46A", + "dark": "#3BD47B" + }, + "status_danger": { + "light": "#E04F4F", + "dark": "#FF6B6B" + }, + "code_line_number": { + "light": "#AAA69D", + "dark": "#77756E" + }, + "code_keyword": { + "light": "#8F3F71", + "dark": "#D99AC4" + }, + "code_string": { + "light": "#477A4A", + "dark": "#9BCB9D" + }, + "code_number": { + "light": "#9A5B13", + "dark": "#E3B36D" + }, + "code_comment": { + "light": "#7A8078", + "dark": "#96958D" + }, + "code_function": { + "light": "#2C6693", + "dark": "#8CBCE0" + }, + "code_type": { + "light": "#865A20", + "dark": "#D5B27F" + }, + "code_constant": { + "light": "#A04444", + "dark": "#E79A9A" + }, + "code_property": { + "light": "#466D78", + "dark": "#9CC8D0" + }, + "code_target_bg": { + "light": "#FFF1BE", + "dark": "#5A4E24" + }, + "brand_dot": { + "light": "#16B9CE", + "dark": "#16B9CE" + }, + "welcome_dock": { + "light": "#171917", + "dark": "#171917" + }, + "welcome_button": { + "light": "#FFFFFF", + "dark": "#FFFFFF" + }, + "welcome_button_label": { + "light": "#171917", + "dark": "#171917" + }, + "welcome_secondary": { + "light": "#B9BCB9", + "dark": "#B9BCB9" + } }, "typography": { - "display_large": { "size": 24, "lineHeight": 30, "weight": 700 }, - "display_medium": { "size": 22, "lineHeight": 28, "weight": 700 }, - "display_small": { "size": 20, "lineHeight": 26, "weight": 700 }, - "headline_large": { "size": 22, "lineHeight": 28, "weight": 700 }, - "headline_medium": { "size": 20, "lineHeight": 26, "weight": 700 }, - "headline_small": { "size": 18, "lineHeight": 24, "weight": 700 }, - "title_large": { "size": 20, "lineHeight": 26, "weight": 700 }, - "conversation_header_title": { "size": 17, "lineHeight": 22, "weight": 600 }, - "title_medium": { "size": 17, "lineHeight": 22, "weight": 500 }, - "title_small": { "size": 15, "lineHeight": 20, "weight": 500 }, - "body_large": { "size": 16, "lineHeight": 24, "weight": 400 }, - "body_medium": { "size": 14, "lineHeight": 21, "weight": 400 }, - "body_small": { "size": 13, "lineHeight": 19, "weight": 400 }, - "label_large": { "size": 15, "lineHeight": 20, "weight": 500 }, - "label_medium": { "size": 14, "lineHeight": 18, "weight": 500 }, - "label_small": { "size": 12, "lineHeight": 16, "weight": 400 } + "display_large": { + "size": 24, + "lineHeight": 30, + "weight": 700 + }, + "display_medium": { + "size": 22, + "lineHeight": 28, + "weight": 700 + }, + "display_small": { + "size": 20, + "lineHeight": 26, + "weight": 700 + }, + "headline_large": { + "size": 22, + "lineHeight": 28, + "weight": 700 + }, + "headline_medium": { + "size": 20, + "lineHeight": 26, + "weight": 700 + }, + "headline_small": { + "size": 18, + "lineHeight": 24, + "weight": 700 + }, + "title_large": { + "size": 20, + "lineHeight": 26, + "weight": 700 + }, + "conversation_header_title": { + "size": 17, + "lineHeight": 22, + "weight": 600 + }, + "title_medium": { + "size": 17, + "lineHeight": 22, + "weight": 500 + }, + "title_small": { + "size": 15, + "lineHeight": 20, + "weight": 500 + }, + "body_large": { + "size": 16, + "lineHeight": 24, + "weight": 400 + }, + "body_medium": { + "size": 14, + "lineHeight": 21, + "weight": 400 + }, + "body_small": { + "size": 13, + "lineHeight": 19, + "weight": 400 + }, + "label_large": { + "size": 15, + "lineHeight": 20, + "weight": 500 + }, + "label_medium": { + "size": 14, + "lineHeight": 18, + "weight": 500 + }, + "label_small": { + "size": 12, + "lineHeight": 16, + "weight": 400 + }, + "brand_wordmark": { + "size": 42, + "lineHeight": 56, + "weight": 500 + } }, "geometry": { "conversation_header_height": 76, @@ -126,7 +344,23 @@ "model_list_top_padding": 10, "model_list_bottom_padding": 16, "model_empty_account_height": 80, - "model_editor_height": 560 + "model_editor_height": 560, + "welcome_max_width": 520, + "welcome_gutter": 25, + "welcome_header_height": 58, + "welcome_button_height": 49, + "welcome_button_gap": 11, + "welcome_dock_radius": 30, + "welcome_dock_bottom": 39, + "welcome_mark_size": 92, + "welcome_word_size": 34, + "welcome_stage_height": 220, + "welcome_header_word_size": 17, + "recent_home_gutter": 24, + "recent_home_mark_size": 132, + "recent_home_title_size": 25, + "recent_home_max_width": 560, + "recent_home_row_padding": 18 }, "breakpoints": { "wide": 600, @@ -135,6 +369,7 @@ }, "motion": { "quick": 180, - "structure": 220 + "structure": 220, + "startup_brand": 6800 } } diff --git a/src/apps/mobile/harmonyos/.gitignore b/src/apps/mobile/harmonyos/.gitignore index aedfdbe8ea..42c31716c8 100644 --- a/src/apps/mobile/harmonyos/.gitignore +++ b/src/apps/mobile/harmonyos/.gitignore @@ -29,3 +29,6 @@ *.pem *.hap *.app + +# Generated from shared desktop MiniApp sources by entry/hvigorfile.ts +/entry/src/main/resources/rawfile/miniapps/ diff --git a/src/apps/mobile/harmonyos/AGENTS.md b/src/apps/mobile/harmonyos/AGENTS.md index f447897f62..966318bf79 100644 --- a/src/apps/mobile/harmonyos/AGENTS.md +++ b/src/apps/mobile/harmonyos/AGENTS.md @@ -69,6 +69,7 @@ through `LocaleController`. Do not import Web UI or mobile-web locale catalogs. The current local HarmonyOS verification loop is: ```bash +node --test miniapps/*.test.cjs # bundled sources, browser bridge, and local storage compatibility source scripts/ohos-env.sh "$HVIGORW" --mode module -p product=default -p module=entry@default assembleHap --no-daemon "$HVIGORW" --mode module -p module=entry@default -p ohos.test.type=LocalTest test --no-daemon diff --git a/src/apps/mobile/harmonyos/README.md b/src/apps/mobile/harmonyos/README.md index b1621fbaee..48e1295b46 100644 --- a/src/apps/mobile/harmonyos/README.md +++ b/src/apps/mobile/harmonyos/README.md @@ -43,3 +43,56 @@ a local signing identity in DevEco Studio when installing the app on a device. The current project targets HarmonyOS `6.1.1(24)` and supports `6.0.1(21)` or newer on phone and tablet devices. + +## Built-in MiniApps + +Choose **MiniApps** from the sidebar to open Gomoku, Regex Playground, +or Daily Divination. The gallery uses two columns of rounded showcase previews +on phones and three on wide screens; tapping a preview opens the app directly. +Showcase images reuse the existing desktop artwork under +`src/web-ui/src/assets/miniapps/showcases/`. Navigation typography follows the +shared mobile body role, with the same proportions on compact and wide hosts. + +These bundled pages run locally in ArkWeb without signing +in, pairing, a desktop connection, or internet access. Storage and clipboard +writes use the phone. Data is isolated by app and retained across app upgrades; +it is not synchronized with desktop MiniApps. Closing a page discards its +unsaved page state. Changing desktop targets has no effect on these local tools. + +Every IDE/CLI HAP build runs `miniapps/generate.cjs` through +`entry/hvigorfile.ts`. It packages the existing shared MiniApp sources and +canonical appearance tokens into generated raw resources; do not edit those +outputs. `miniapps/mobile.css` owns phone-only layout adaptation. The pages +follow the app language and system light/dark appearance. They resize in place +for compact, wide, and folded/unfolded layouts. + +The sandboxed iframe has no network access or local-file access. The native +bridge permits only per-app storage keys and clipboard writes; it has no generic +invoke, Worker, shell, workspace, AI, or Agent API. Local records are replaced +atomically, and malformed records are retained and return an error. These local +tools do not read any remote workspace or peer content, and do not execute jobs +on CLI/Detached Dispatch hosts. Existing Remote Connect protocols are unchanged. +Desktop catalogs, page transfer, and remote MiniApp execution are deferred. + +Run the local test and HAP build commands in `AGENTS.md`, plus: + +```bash +node --test miniapps/*.test.cjs +``` + +Before claiming device verification, exercise local/offline launches, saved data +after relaunch, clipboard, keyboard input, compact/wide layouts, light/dark +appearance, and a live resize/fold transition on supported hardware. + +### Home and launch presentation + +Cold launches reuse the desktop contour mark and reveal the OpenBitFun wordmark +letter by letter in approximately 1.3 seconds. This presentation does not wait +for network/account initialization, is dismissed when backgrounded, and does not +replay on foreground. The system reduced-motion preference skips it where the +platform exposes that preference (API 23+). Native launch artwork and the app +surface both follow the system light/dark theme. + +The welcome surface keeps connection actions at the bottom and offers bundled +MiniApps without a desktop connection. Connected, connecting, and empty wide +surfaces retain their existing remote capability and session routing behavior. diff --git a/src/apps/mobile/harmonyos/entry/hvigorfile.ts b/src/apps/mobile/harmonyos/entry/hvigorfile.ts index b0e3a1ab98..91d8ca97dd 100644 --- a/src/apps/mobile/harmonyos/entry/hvigorfile.ts +++ b/src/apps/mobile/harmonyos/entry/hvigorfile.ts @@ -1,5 +1,8 @@ import { hapTasks } from '@ohos/hvigor-ohos-plugin'; +// Include the current shared sources on every IDE and CLI build. +require('../miniapps/generate.cjs').generate(); + export default { system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */ plugins: [] /* Custom plugin to extend the functionality of Hvigor. */ diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/entryability/EntryAbility.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/entryability/EntryAbility.ets index 707161e88f..a0ee390a78 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/entryability/EntryAbility.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/entryability/EntryAbility.ets @@ -13,7 +13,7 @@ export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { const scenarioId = want.parameters?.['openbitfunDesignPreview']; - if (scenarioId === 'connected-conversation' || + if (scenarioId === 'welcome-home' || scenarioId === 'connected-conversation' || scenarioId === 'streaming-dark' || scenarioId === 'reconnecting-wide' || scenarioId === 'narrow-multiline' || scenarioId === 'fold-context' || scenarioId === 'long-reading') { diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/generated/MobileDesignTokens.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/generated/MobileDesignTokens.ets index 526ee74b0d..9f53b6ca8c 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/generated/MobileDesignTokens.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/generated/MobileDesignTokens.ets @@ -54,6 +54,11 @@ export class MobileDesignColors { static readonly codeConstant: MobileColorPair = new MobileColorPair("#A04444", "#E79A9A"); static readonly codeProperty: MobileColorPair = new MobileColorPair("#466D78", "#9CC8D0"); static readonly codeTargetBg: MobileColorPair = new MobileColorPair("#FFF1BE", "#5A4E24"); + static readonly brandDot: MobileColorPair = new MobileColorPair("#16B9CE", "#16B9CE"); + static readonly welcomeDock: MobileColorPair = new MobileColorPair("#171917", "#171917"); + static readonly welcomeButton: MobileColorPair = new MobileColorPair("#FFFFFF", "#FFFFFF"); + static readonly welcomeButtonLabel: MobileColorPair = new MobileColorPair("#171917", "#171917"); + static readonly welcomeSecondary: MobileColorPair = new MobileColorPair("#B9BCB9", "#B9BCB9"); } export class MobileTypographyToken { @@ -85,6 +90,7 @@ export class MobileDesignTypography { static readonly labelLarge: MobileTypographyToken = new MobileTypographyToken(15, 20, 500); static readonly labelMedium: MobileTypographyToken = new MobileTypographyToken(14, 18, 500); static readonly labelSmall: MobileTypographyToken = new MobileTypographyToken(12, 16, 400); + static readonly brandWordmark: MobileTypographyToken = new MobileTypographyToken(42, 56, 500); } export class MobileDesignGeometry { @@ -147,6 +153,22 @@ export class MobileDesignGeometry { static readonly modelListBottomPadding: number = 16; static readonly modelEmptyAccountHeight: number = 80; static readonly modelEditorHeight: number = 560; + static readonly welcomeMaxWidth: number = 520; + static readonly welcomeGutter: number = 25; + static readonly welcomeHeaderHeight: number = 58; + static readonly welcomeButtonHeight: number = 49; + static readonly welcomeButtonGap: number = 11; + static readonly welcomeDockRadius: number = 30; + static readonly welcomeDockBottom: number = 39; + static readonly welcomeMarkSize: number = 92; + static readonly welcomeWordSize: number = 34; + static readonly welcomeStageHeight: number = 220; + static readonly welcomeHeaderWordSize: number = 17; + static readonly recentHomeGutter: number = 24; + static readonly recentHomeMarkSize: number = 132; + static readonly recentHomeTitleSize: number = 25; + static readonly recentHomeMaxWidth: number = 560; + static readonly recentHomeRowPadding: number = 18; } export class MobileDesignBreakpoints { @@ -158,4 +180,5 @@ export class MobileDesignBreakpoints { export class MobileDesignMotion { static readonly quick: number = 180; static readonly structure: number = 220; + static readonly startupBrand: number = 6800; } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/EnUsMessages.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/EnUsMessages.ets index 708b2dfb55..95fd8ddb4a 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/EnUsMessages.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/EnUsMessages.ets @@ -1,4 +1,34 @@ export const EN_US_MESSAGES: [string, string][] = [ + ['home.recent_title', 'What would you like to do today?'], + ['home.recent_recent', 'Recent conversations'], + ['home.recent_browse', 'Browse workspaces'], + ['home.recent_all', 'All conversations'], + ['home.recent_empty', 'No conversations to continue yet'], + ['home.recent_connect', 'Connect a computer to continue your conversations.'], + ['account.errorNetwork', 'Unable to connect. Check your connection and try again.'], + ['account.errorTimeout', 'Connection timed out. Check your connection and try again.'], + ['account.errorSecureConnection', 'Unable to establish a secure connection. Check your network and try again.'], + ['account.errorRateLimited', 'Too many attempts. Try again later.'], + ['home.welcome_login', 'Sign in'], + ['home.welcome_scan', 'Scan to connect'], + ['home.welcome_work', 'Get things done'], + ['home.welcome_play', 'Try something fun'], + ['home.welcome_yours', 'Make it yours'], + ['home.connectComputer', 'Connect computer'], + ['home.connecting', 'Connecting…'], + ['home.exploreMiniApps', 'Explore MiniApps'], + ['home.miniAppsHint', 'Ready to use, even without a computer'], + ['miniapp.allApps', 'All apps'], + ['miniapp.availableOffline', 'Available offline'], + + ['miniapp.timeout', 'The local operation timed out. It may still finish; it was not retried.'], + ['miniapp.title', 'MiniApps'], + ['miniapp.refresh', 'Refresh'], + ['miniapp.empty', 'No built-in MiniApps are available.'], + ['miniapp.unsupported', 'This capability is unavailable in built-in mobile MiniApps.'], + ['miniapp.invalidPage', 'The MiniApp page is incomplete. Reopen it.'], + ['miniapp.closed', 'The MiniApp was closed or changed.'], + ['miniapp.previewHint', 'Built in · Works offline. Data stays on this phone.'], ['notification.onboardingTitle', 'Task completion notifications'], ['notification.onboardingBody', 'Allow OpenBitFun to notify you when tasks finish. You can change this later in system settings.'], ['notification.onboardingLater', 'Later'], @@ -259,7 +289,7 @@ export const EN_US_MESSAGES: [string, string][] = [ ['remote.settings.loginServer', 'Sign-in server'], ['remote.settings.accountSignIn', 'Sign in with GitHub'], ['remote.settings.accountSigningIn', 'Signing in…'], - ['remote.settings.accountLoginFailed', 'Sign-in failed. Check the account details or server settings.'], + ['remote.settings.accountLoginFailed', 'Unable to sign in right now. Try again later.'], ['remote.settings.relayUrlPlaceholder', 'Relay URL, for example https://relay.example.com'], ['remote.settings.accountLogout', 'Sign out'], ['remote.settings.accountLoggingOut', 'Signing out…'], diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/ZhCnMessages.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/ZhCnMessages.ets index 35f1802977..31d912904a 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/ZhCnMessages.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/i18n/ZhCnMessages.ets @@ -1,4 +1,34 @@ export const ZH_CN_MESSAGES: [string, string][] = [ + ['home.recent_title', '今天，想做点什么？'], + ['home.recent_recent', '最近会话'], + ['home.recent_browse', '浏览工作区'], + ['home.recent_all', '全部会话'], + ['home.recent_empty', '还没有可继续的对话'], + ['home.recent_connect', '连接电脑后，继续你的对话。'], + ['account.errorNetwork', '暂时无法连接，请检查网络后重试。'], + ['account.errorTimeout', '连接超时，请检查网络后重试。'], + ['account.errorSecureConnection', '无法建立安全连接，请检查网络后重试。'], + ['account.errorRateLimited', '操作太频繁，请稍后重试。'], + ['home.welcome_login', '登录账号'], + ['home.welcome_scan', '扫码连接电脑'], + ['home.welcome_work', '干点活儿'], + ['home.welcome_play', '玩点花样'], + ['home.welcome_yours', '随你发挥'], + ['home.connectComputer', '连接电脑'], + ['home.connecting', '正在连接…'], + ['home.exploreMiniApps', '探索小应用'], + ['home.miniAppsHint', '无需连接电脑，也能即刻使用'], + ['miniapp.allApps', '全部应用'], + ['miniapp.availableOffline', '离线可用'], + + ['miniapp.timeout', '本地操作超时，操作可能仍会完成，未自动重试。'], + ['miniapp.title', '小应用'], + ['miniapp.refresh', '刷新'], + ['miniapp.empty', '暂无内置小应用。'], + ['miniapp.unsupported', '手机内置小应用不支持此能力。'], + ['miniapp.invalidPage', '小应用页面数据不完整，请重新打开。'], + ['miniapp.closed', '小应用已关闭或切换。'], + ['miniapp.previewHint', '内置应用 · 离线可用，数据保存在本机。'], ['notification.onboardingTitle', '开启任务完成提醒'], ['notification.onboardingBody', '允许 OpenBitFun 在任务完成时发送通知。你可以稍后在系统设置中更改。'], ['notification.onboardingLater', '稍后'], @@ -259,7 +289,7 @@ export const ZH_CN_MESSAGES: [string, string][] = [ ['remote.settings.loginServer', '登录服务器'], ['remote.settings.accountSignIn', '使用 GitHub 登录'], ['remote.settings.accountSigningIn', '正在登录…'], - ['remote.settings.accountLoginFailed', '登录失败，请检查账号密码或服务器设置。'], + ['remote.settings.accountLoginFailed', '暂时无法登录，请稍后重试。'], ['remote.settings.relayUrlPlaceholder', 'Relay 地址，例如 https://relay.example.com'], ['remote.settings.accountLogout', '退出登录'], ['remote.settings.accountLoggingOut', '正在退出…'], diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/model/MiniAppModels.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/model/MiniAppModels.ets new file mode 100644 index 0000000000..558e8dd0fa --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/model/MiniAppModels.ets @@ -0,0 +1,46 @@ +export interface MiniAppSummary { + id: string; + name: string; + description: string; +} + +export interface MiniAppBridgeParams { + key?: string; + value?: Object | null; + text?: string; +} + +export interface MiniAppBridgeRequest { + id: string; + method: string; + params?: MiniAppBridgeParams; +} + +export interface MiniAppBridgeError { message: string; } +export interface MiniAppBridgeReply { + jsonrpc: string; + id: string; + result?: Object | null; + error?: MiniAppBridgeError; +} + +/** Local data source, deliberately independent of any connection/session. */ +export interface MiniAppHost { + list(locale: string): Promise; + document(appId: string): Promise; + call(appId: string, method: string, params: MiniAppBridgeParams): Promise; +} + +export interface MiniAppActions { + open: () => void; + close: () => void; + back: () => void; + refresh: () => void; + select: (id: string) => void; + request: (raw: string, revision: number) => Promise; +} + +export function emptyMiniAppActions(): MiniAppActions { + return { open: () => {}, close: () => {}, back: () => {}, refresh: () => {}, select: () => {}, + request: async (_raw: string, _revision: number): Promise => '' }; +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/AppRoot.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/AppRoot.ets index bdf2ce7e99..74de864560 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/AppRoot.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/AppRoot.ets @@ -1,3 +1,4 @@ +import { StartupBrandReveal } from './components/StartupBrandReveal'; import { AppRootPresentation } from './components/AppRootPresentation'; import { WatchProvisionCard } from './components/WatchProvisionCard'; import { ArkUiAppRootHostAdapter } from './host/AppRootHostAdapter'; @@ -6,6 +7,7 @@ import { AppRootRuntime } from './runtime/AppRootRuntime'; @Entry @ComponentV2 struct AppRoot { + @Local showStartupBrand: boolean = true; private readonly hostAdapter: ArkUiAppRootHostAdapter = new ArkUiAppRootHostAdapter(); private readonly runtime: AppRootRuntime = new AppRootRuntime(this.hostAdapter); @@ -23,6 +25,7 @@ struct AppRoot { } onPageHide(): void { + this.showStartupBrand = false; this.runtime.onPageHide(); } @@ -31,6 +34,11 @@ struct AppRoot { } onBackPress(): boolean { + if (this.runtime.miniAppViewModel.state.visible) { + if (this.runtime.miniAppViewModel.state.appId) this.runtime.miniAppViewModel.actions.back(); + else this.runtime.miniAppViewModel.close(); + return true; + } return this.runtime.handleRootBack(); } @@ -38,6 +46,8 @@ struct AppRoot { Stack() { AppRootPresentation({ shellState: this.runtime.appShellState, + miniAppState: this.runtime.miniAppViewModel.state, + miniAppActions: this.runtime.miniAppViewModel.actions, navigationStack: this.runtime.navigationStack, remotePageState: this.runtime.remotePageState, deviceDirectoryState: this.runtime.deviceDirectoryState, @@ -47,6 +57,10 @@ struct AppRoot { actions: this.runtime.presentationActions }) + if (this.showStartupBrand) { + StartupBrandReveal({ onFinished: () => { this.showStartupBrand = false; } }) + } + // Sits above every route on purpose: a watch waiting for approval must // not be hidden behind whatever screen the phone happens to be on. WatchProvisionCard({ diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/actions/AppRootPresentationActions.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/actions/AppRootPresentationActions.ets index 1f2a04a49c..2b135f2388 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/actions/AppRootPresentationActions.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/actions/AppRootPresentationActions.ets @@ -26,6 +26,7 @@ export interface FilePreviewPresentationActions { } export interface RemoteHomePresentationActions { + readonly openMiniApps: () => void; readonly openSidebar: () => void; readonly connectWorkspace: () => void; readonly addConnection: () => void; @@ -112,6 +113,7 @@ export function emptyAppRootPresentationActions(): AppRootPresentationActions { onCompactLayoutEntered: () => {}, onLayoutModeChanged: () => {}, onRemoteHome: { + openMiniApps: () => {}, openSidebar: () => {}, connectWorkspace: () => {}, addConnection: () => {}, openSettings: () => {}, refresh: () => {}, showWorkspaces: () => {}, showAssistants: () => {}, selectWorkspace: () => {}, selectAssistant: () => {}, cancelWorkspace: () => {}, cancelAssistant: () => {}, queryChanged: () => {}, diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootOverlaySurfaces.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootOverlaySurfaces.ets index 28a80e16e3..561637c08a 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootOverlaySurfaces.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootOverlaySurfaces.ets @@ -50,6 +50,7 @@ export struct AppSidebarSurface { onClose: this.actions.onSidebar.close, onNewChat: this.actions.onSidebar.newChat, onEnterCode: this.actions.onSidebar.enterCode, + onOpenMiniApps: this.actions.onRemoteHome.openMiniApps, onScanDesktop: this.actions.onSidebar.scanDesktop, onOpenViewSettings: this.onOpenRemoteViewSettings, onSearchQueryChange: (query: string) => { diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootPresentation.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootPresentation.ets index dc4de7d6fa..46d2d6eaf6 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootPresentation.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppRootPresentation.ets @@ -1,3 +1,7 @@ +import { RemoteCompactHomePolicy } from '../policy/RemoteCompactHomePolicy'; +import { MiniAppActions, emptyMiniAppActions } from '../../model/MiniAppModels'; +import { MiniAppState } from '../state/MiniAppState'; +import { MiniAppSurface } from './MiniAppSurface'; import display from '@ohos.display'; import mediaQuery from '@ohos.mediaquery'; import { RemoteUiState } from '../../services/RemoteUiState'; @@ -60,6 +64,8 @@ enum WideWorkspacePresentationMode { @ComponentV2 export struct AppRootPresentation { + @Param miniAppState: MiniAppState = new MiniAppState(); + @Param miniAppActions: MiniAppActions = emptyMiniAppActions(); @Param shellState: AppShellState = new AppShellState(); @Param navigationStack: NavPathStack = new NavPathStack(); @Param remotePageState: RemotePageState = new RemotePageState(); @@ -131,6 +137,7 @@ export struct AppRootPresentation { AppShell({ shellState: this.shellState, useWideLayout: this.isWideLayout(), + allowSidebar: !this.showWelcomeHome(), settingsPlacement: this.settingsPlacement, compactAccountLogin: this.shellState.settingsMode === 'account' && this.remotePageState.accountUserId.trim().length === 0, @@ -185,6 +192,12 @@ export struct AppRootPresentation { Column() { this.WideRouteContent() } .width('100%').height('100%').backgroundColor(PAGE_BG) } + + // Sidebar destinations belong to the moving content pane. A root-level + // overlay would cover the drawer before its closing animation can run. + if (this.miniAppState.visible) { + MiniAppSurface({ state: this.miniAppState, actions: this.miniAppActions }) + } } .width('100%') .height('100%') @@ -205,6 +218,14 @@ export struct AppRootPresentation { */ @Builder WideRouteContent() { + if (this.showWelcomeHome()) { + RemoteSurfaceHost({ + mode: RemoteSurfaceMode.Placeholder, + remotePageState: this.remotePageState, + presentationState: this.remoteSurfaceState, + actions: this.actions + }) + } else { WideConversationHost({ route: this.shellState.activeRoute, shellState: this.shellState, @@ -233,6 +254,7 @@ export struct AppRootPresentation { onToggleFilePreviewExpanded: () => this.toggleFilePreviewExpanded(), onOpenRemoteViewSettings: () => { this.showRemoteViewSettings = true; } }) + } } /** @@ -293,6 +315,11 @@ export struct AppRootPresentation { .backgroundColor(PAGE_BG) } + private showWelcomeHome(): boolean { + return RemoteCompactHomePolicy.shouldShowWelcomeHome(this.remotePageState.controlTargetType, + this.remotePageState.connectionState, this.remotePageState.accountUserId.trim().length > 0); + } + private isWideLayout(): boolean { return this.largeScreenLayout; } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppShell.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppShell.ets index 41a9860e4e..272adb6561 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppShell.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppShell.ets @@ -21,6 +21,7 @@ const WIDE_SHEET_RADIUS: number = 30; export struct AppShell { @Param shellState: AppShellState = new AppShellState(); @Param useWideLayout: boolean = false; + @Param allowSidebar: boolean = true; @Param compactAccountLogin: boolean = false; @Param settingsPlacement: SettingsPlacement = SettingsPlacementPolicy.compactBottom(SettingsSheetKind.Settings); @@ -53,17 +54,17 @@ export struct AppShell { // an opacity of 0 — invisible, but rebuilt on every selection change, // which on a tablet doubled the cost of switching sessions. Compact // keeps it mounted so opening and closing still cross-fades. - if (!this.useWideLayout || this.shellState.showSidebar) { + if (!this.useWideLayout || (this.allowSidebar && this.shellState.showSidebar)) { this.sidebar() } } .width(this.sidebarWidth()) .height('100%') .alignItems(HorizontalAlign.Start) - .opacity(this.shellState.showSidebar ? 1 : 0) - .translate({ x: this.shellState.showSidebar ? '0%' : '-10%' }) + .opacity((this.allowSidebar && this.shellState.showSidebar) ? 1 : 0) + .translate({ x: (this.allowSidebar && this.shellState.showSidebar) ? '0%' : '-10%' }) .animation({ - duration: this.shellState.showSidebar ? 300 : 220, + duration: (this.allowSidebar && this.shellState.showSidebar) ? 300 : 220, curve: Curve.EaseOut }) @@ -75,7 +76,7 @@ export struct AppShell { .height('100%') .bindSheet($$this.shellState.showConnectSheet, this.ConnectSheetContent(), this.connectSheetOptions()) - if (this.shellState.showSidebar) { + if ((this.allowSidebar && this.shellState.showSidebar)) { Column() { } .width('100%') @@ -92,23 +93,23 @@ export struct AppShell { .width('100%') .height('100%') .backgroundColor(PAGE_BG) - .borderRadius(this.shellState.showSidebar ? 28 : 0) + .borderRadius((this.allowSidebar && this.shellState.showSidebar) ? 28 : 0) .clip(true) .shadow({ - radius: this.shellState.showSidebar ? 34 : 0, - color: this.shellState.showSidebar ? SHELL_SCRIM : TRANSPARENT, - offsetX: this.shellState.showSidebar ? -10 : 0 + radius: (this.allowSidebar && this.shellState.showSidebar) ? 34 : 0, + color: (this.allowSidebar && this.shellState.showSidebar) ? SHELL_SCRIM : TRANSPARENT, + offsetX: (this.allowSidebar && this.shellState.showSidebar) ? -10 : 0 }) - .blur(this.shellState.showSidebar ? 1.1 : 0) + .blur((this.allowSidebar && this.shellState.showSidebar) ? 1.1 : 0) .scale({ - x: this.shellState.showSidebar ? 0.985 : 1, - y: this.shellState.showSidebar ? 0.992 : 1, + x: (this.allowSidebar && this.shellState.showSidebar) ? 0.985 : 1, + y: (this.allowSidebar && this.shellState.showSidebar) ? 0.992 : 1, centerX: '0%', centerY: '50%' }) - .translate({ x: this.shellState.showSidebar ? this.sidebarWidth() : 0 }) + .translate({ x: (this.allowSidebar && this.shellState.showSidebar) ? this.sidebarWidth() : 0 }) .animation({ - duration: this.shellState.showSidebar ? 320 : 250, + duration: (this.allowSidebar && this.shellState.showSidebar) ? 320 : 250, curve: Curve.EaseOut }) } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppSidebar.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppSidebar.ets index 1855b6e799..c8931d72f8 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppSidebar.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/AppSidebar.ets @@ -22,6 +22,7 @@ export struct AppSidebar { @Param showViewSettingsButton: boolean = false; @Param showWorkspaceSection: boolean = false; @Event onClose: () => void = () => {}; + @Event onOpenMiniApps: () => void = () => {}; @Event onNewChat: (agentType: string) => void = (_agentType: string) => {}; @Event onEnterCode: () => void = () => {}; @Event onScanDesktop: () => void = () => {}; @@ -57,6 +58,23 @@ export struct AppSidebar { // Device sections own their remote workspace and session rows. Scroll() { Column() { + Button({ type: ButtonType.Normal }) { + Row({ space: 14 }) { + Stack({ alignContent: Alignment.Center }) { + SidebarGlyph({ kind: 'apps' }) + }.width(24).height(24) + Text(RemoteI18n.t('miniapp.title')) + .fontSize(MobileDesignTypography.bodyLarge.size) + .fontWeight(FontWeight.Medium) + .fontColor(INK) + Blank() + }.width('100%').alignItems(VerticalAlign.Center) + } + .width('100%').height(48).padding({ left: 4, right: 8 }) + .backgroundColor(TRANSPARENT).borderRadius(12) + .margin({ top: 16, bottom: 16 }).stateEffect(true) + .accessibilityText(RemoteI18n.t('miniapp.title')) + .onClick(() => this.onOpenMiniApps()) if (this.showWorkspaceSection) { this.contentSlot() } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/BrandMark.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/BrandMark.ets new file mode 100644 index 0000000000..794b512be3 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/BrandMark.ets @@ -0,0 +1,12 @@ +import { TemplateIcon } from './TemplateIcon'; + +/** The same contour mark used by the desktop splash, tinted for both themes. */ +@ComponentV2 +export struct BrandMark { + @Param markSize: number = 96; + + build() { + TemplateIcon({ src: $r('app.media.openbitfun_brand_mark'), iconWidth: this.markSize, iconHeight: this.markSize }) + .accessibilityLevel('no') + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/MiniAppSurface.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/MiniAppSurface.ets new file mode 100644 index 0000000000..4603b3bf1e --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/MiniAppSurface.ets @@ -0,0 +1,87 @@ +import { MobileDesignTypography } from '../../generated/MobileDesignTokens'; +import { MiniAppActions, MiniAppSummary, emptyMiniAppActions } from '../../model/MiniAppModels'; +import { RemoteI18n } from '../../i18n/RemoteI18n'; +import { MiniAppState } from '../state/MiniAppState'; +import { MiniAppWebView } from './MiniAppWebView'; +import { NavigationBackButton } from './NavigationBackButton'; +import { PAGE_BG, INK, MUTED, SOFT, LINE, TRANSPARENT } from './Theme'; + +@ComponentV2 +export struct MiniAppSurface { + @Param state: MiniAppState = new MiniAppState(); + @Param actions: MiniAppActions = emptyMiniAppActions(); + @Local galleryWidth: number = 0; + + build() { + Column() { + Row({ space: 8 }) { + NavigationBackButton({ onBack: (): void => { + if (this.state.appId) this.actions.back(); + else this.actions.close(); + } }) + Text(this.state.appId ? this.state.name : RemoteI18n.t('miniapp.title')) + .fontSize(MobileDesignTypography.bodyLarge.size).fontWeight(FontWeight.Medium) + .fontColor(INK).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }) + .textAlign(TextAlign.Center).layoutWeight(1) + Blank().width(48) + }.width('100%').height(56).padding({ left: 12, right: 12 }) + if (this.state.document) { + MiniAppWebView({ document: this.state.document, revision: this.state.revision, request: this.actions.request }) + .layoutWeight(1) + } else { + Column() { + Row() { + Text(RemoteI18n.t('miniapp.allApps')) + .fontSize(MobileDesignTypography.titleSmall.size).fontWeight(FontWeight.Medium).fontColor(INK) + .padding({ left: 16, right: 16, top: 10, bottom: 10 }).backgroundColor(SOFT).borderRadius(24) + Blank() + Text(RemoteI18n.t('miniapp.availableOffline')) + .fontSize(MobileDesignTypography.labelSmall.size).fontColor(MUTED) + }.width('100%').padding({ top: 16, bottom: 20 }) + if (this.state.loading) { + LoadingProgress().width(32).height(32).margin(24) + } else if (this.state.error) { + Text(this.state.error).fontSize(MobileDesignTypography.bodyMedium.size) + .fontColor(MUTED).padding({ top: 16, bottom: 16 }).copyOption(CopyOptions.InApp) + Button(RemoteI18n.t('miniapp.refresh')) + .fontColor(INK).backgroundColor(SOFT).onClick(() => this.actions.refresh()) + } else if (this.state.apps.length === 0) { + Text(RemoteI18n.t('miniapp.empty')).fontSize(MobileDesignTypography.bodyMedium.size) + .fontColor(MUTED).padding(24) + } else { + Grid() { + ForEach(this.state.apps, (app: MiniAppSummary) => { + GridItem() { this.PreviewTile(app) } + }, (app: MiniAppSummary) => app.id) + }.columnsTemplate(this.galleryWidth >= 600 ? '1fr 1fr 1fr' : '1fr 1fr') + .columnsGap(14).rowsGap(20).layoutWeight(1).width('100%').scrollBar(BarState.Off) + } + }.width('100%').constraintSize({ maxWidth: 1000 }).layoutWeight(1) + .alignItems(HorizontalAlign.Start).padding({ left: 16, right: 16, bottom: 24 }) + .onAreaChange((_oldArea: Area, area: Area) => { this.galleryWidth = Number(area.width); }) + } + }.width('100%').height('100%').backgroundColor(PAGE_BG) + } + + @Builder + private PreviewTile(app: MiniAppSummary) { + Button({ type: ButtonType.Normal }) { + Column({ space: 10 }) { + Image(this.preview(app.id)).width('100%').aspectRatio(1).objectFit(ImageFit.Cover) + .backgroundColor(SOFT).borderRadius(24).border({ width: 0.5, color: LINE }) + .draggable(false).accessibilityLevel('no') + Text(app.name).fontSize(MobileDesignTypography.titleSmall.size) + .fontWeight(FontWeight.Medium).fontColor(INK).maxLines(2) + .textOverflow({ overflow: TextOverflow.Ellipsis }).width('100%').padding({ left: 4, right: 4 }) + }.width('100%').alignItems(HorizontalAlign.Start) + }.width('100%').padding(0).backgroundColor(TRANSPARENT).borderRadius(24) + .stateEffect(true).accessibilityText(`${app.name}, ${app.description}`) + .onClick(() => this.actions.select(app.id)) + } + + private preview(id: string): Resource { + if (id === 'builtin-gomoku') return $r('app.media.miniapp_gomoku_preview'); + if (id === 'builtin-regex-playground') return $r('app.media.miniapp_regex_preview'); + return $r('app.media.miniapp_divination_preview'); + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/MiniAppWebView.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/MiniAppWebView.ets new file mode 100644 index 0000000000..7f63c34e53 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/MiniAppWebView.ets @@ -0,0 +1,61 @@ +import { webview } from '@kit.ArkWeb'; + +// A synthetic origin for in-memory HTML; no document is fetched from this URL. +const MINIAPP_DOCUMENT_URL: string = 'https://miniapp.invalid/'; + +/** Platform leaf. ArkWeb exposes proxies to frames; the ViewModel treats every request as untrusted. */ +class MiniAppNativeBridge { + private readonly dispatch: (raw: string) => void; + constructor(dispatch: (raw: string) => void) { this.dispatch = dispatch; } + request(raw: string): void { this.dispatch(raw); } +} + +@ComponentV2 +export struct MiniAppWebView { + @Param document: string = ''; + @Param revision: number = 0; + @Param request: (raw: string, revision: number) => Promise = async (_raw: string, _revision: number): Promise => ''; + private controller: webview.WebviewController = new webview.WebviewController(); + private active: boolean = true; + private bridge: MiniAppNativeBridge = new MiniAppNativeBridge((raw: string): void => { + void this.reply(raw); + }); + + private async reply(raw: string): Promise { + if (!this.active) return; + const revision = this.revision; + const response = await this.request(raw, revision); + if (!this.active || revision !== this.revision || !response) return; + try { + await this.controller.runJavaScript(`window.__miniappReply(JSON.parse(${JSON.stringify(response)}))`); + } catch (_error) { + // Navigation/close invalidates replies; never replay a host mutation. + } + } + + aboutToDisappear(): void { this.active = false; } + + build() { + // A nonempty initial src can overwrite loadData after controller attachment. + Web({ src: '', controller: this.controller }) + .javaScriptAccess(true) + .darkMode(WebDarkMode.Auto) + .forceDarkAccess(false) + .domStorageAccess(false) + .fileAccess(false) + .javaScriptProxy({ object: this.bridge, name: 'miniappNative', methodList: ['request'], controller: this.controller }) + .onControllerAttached(() => { + this.active = true; + // Without an HTTP(S) base, ArkWeb interprets raw HTML as a data URL: + // CSS hashes become URL fragments and truncate the page before its script. + this.controller.loadData(this.document, 'text/html', 'UTF-8', MINIAPP_DOCUMENT_URL); + }) + .onOverrideUrlLoading((request: WebResourceRequest) => { + // Only the wrapper and its sandboxed blob child may navigate here. + const url = request.getRequestUrl(); + return request.isMainFrame() ? url !== 'about:blank' && url !== MINIAPP_DOCUMENT_URL : !url.startsWith('blob:'); + }) + .width('100%') + .height('100%') + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/OpenBitFunAccountLoginPage.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/OpenBitFunAccountLoginPage.ets index b93a0dcaf1..b93ef32669 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/OpenBitFunAccountLoginPage.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/OpenBitFunAccountLoginPage.ets @@ -1,3 +1,4 @@ +import { AccountLoginErrorPolicy } from '../policy/AccountLoginErrorPolicy'; import { MobileDesignGeometry, MobileDesignTypography } from '../../generated/MobileDesignTokens'; import { RemoteI18n } from '../../i18n/RemoteI18n'; import { DEFAULT_CLOUD_RELAY_URL } from '../../services/CloudAccountClient'; @@ -112,7 +113,7 @@ export struct OpenBitFunAccountLoginPage { await this.cloudLogin(); this.onLoginSuccess(); } catch (err) { - this.errorText = err instanceof Error ? err.message : RemoteI18n.t('remote.settings.accountLoginFailed'); + this.errorText = RemoteI18n.t(AccountLoginErrorPolicy.messageKey(err)); } finally { this.isBusy = false; } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/RecentRemoteHome.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/RecentRemoteHome.ets new file mode 100644 index 0000000000..84a17fca2a --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/RecentRemoteHome.ets @@ -0,0 +1,77 @@ +import { RemoteSession } from '../../model/RemoteModels'; +import { RemoteI18n } from '../../i18n/RemoteI18n'; +import { TimeFormat } from '../../services/TimeFormat'; +import { MobileDesignGeometry } from '../../generated/MobileDesignTokens'; +import { WelcomeBrandFlow } from './WelcomeBrandFlow'; +import { INK, MUTED, LINE, SOFT, TRANSPARENT } from './Theme'; + +/** Current-device landing page. Session activation stays with the remote owner. */ +@ComponentV2 +export struct RecentRemoteHome { + @Param sessions: RemoteSession[] = []; + @Param desktopName: string = ''; + @Param connected: boolean = false; + @Param busy: boolean = false; + @Event onBrowse: () => void = () => {}; + @Event onConnect: () => void = () => {}; + @Event onOpen: (session: RemoteSession) => void = () => {}; + + private recent(): RemoteSession[] { + return this.sessions.filter((s: RemoteSession) => s.status !== 'archived') + .sort((a: RemoteSession, b: RemoteSession) => this.timestamp(b) - this.timestamp(a)).slice(0, 3); + } + private timestamp(session: RemoteSession): number { + const updated = TimeFormat.timestampMs(session.updatedAt); + const created = TimeFormat.timestampMs(session.createdAt); + return Number.isFinite(updated) && updated > 0 ? updated : Number.isFinite(created) ? created : 0; + } + private context(session: RemoteSession): string { + const workspace = session.workspaceName || (session.workspacePath || '').split('/').filter((p: string) => p.length > 0).pop() || ''; + return [this.desktopName, workspace].filter((s: string) => s.length > 0).join(' · '); + } + build() { + Scroll() { + Column() { + Column() { + WelcomeBrandFlow({ markSize: 156, sweep: true }) + .margin({ top: 20, bottom: 8 }) + Text(RemoteI18n.t('home.recent_title')).fontSize(21) + .fontWeight(FontWeight.Medium).fontColor(INK).textAlign(TextAlign.Center) + }.width('100%').margin({ bottom: 32 }) + if (this.busy) { + LoadingProgress().width(24).height(24).color(MUTED).margin({ bottom: 16 }) + } + if (!this.connected) { + Text(RemoteI18n.t('home.recent_connect')).fontSize(13).fontColor(MUTED).margin({ bottom: 16 }) + Button(RemoteI18n.t('home.connectComputer')).onClick(this.onConnect) + .backgroundColor(SOFT).fontColor(INK).height(48).width('100%').margin({ bottom: 16 }) + } + Row() { + Text(RemoteI18n.t('home.recent_recent')).fontSize(12).fontColor(MUTED).layoutWeight(1) + Button(RemoteI18n.t('home.recent_all')).fontSize(12).fontColor(MUTED) + .backgroundColor(TRANSPARENT).onClick(this.onBrowse) + }.width('100%') + ForEach(this.recent(), (session: RemoteSession) => { + Button({ type: ButtonType.Normal }) { + Row({ space: 12 }) { + Column({ space: 6 }) { + Text(session.title).fontSize(15).fontColor(INK).maxLines(2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Text(this.context(session)).fontSize(11).fontColor(MUTED).maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + }.alignItems(HorizontalAlign.Start).layoutWeight(1) + SymbolGlyph($r('sys.symbol.chevron_right')).fontSize(14).fontColor([MUTED]) + }.width('100%').padding({ top: MobileDesignGeometry.recentHomeRowPadding, bottom: MobileDesignGeometry.recentHomeRowPadding }) + }.width('100%').backgroundColor(TRANSPARENT).borderRadius(0) + .border({ width: { bottom: 1 }, color: LINE }).onClick(() => this.onOpen(session)) + }, (session: RemoteSession) => (session.deviceId || '') + ':' + session.id) + if (this.recent().length === 0 && !this.busy) { + Text(RemoteI18n.t('home.recent_empty')).fontSize(13).fontColor(MUTED).margin({ top: 18, bottom: 18 }) + } + + }.alignItems(HorizontalAlign.Start).width('100%') + .constraintSize({ maxWidth: MobileDesignGeometry.recentHomeMaxWidth }) + .padding({ left: MobileDesignGeometry.recentHomeGutter, right: MobileDesignGeometry.recentHomeGutter, bottom: 28 }) + }.width('100%').height('100%').align(Alignment.Top).scrollBar(BarState.Off) + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/SidebarGlyphs.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/SidebarGlyphs.ets index 6a2292e434..1b841d41c1 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/SidebarGlyphs.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/SidebarGlyphs.ets @@ -90,18 +90,12 @@ export struct SidebarGlyph { @Builder private Apps() { - Column({ space: 8 }) { - Row({ space: 8 }) { this.AppDot(); this.AppDot(); } - Row({ space: 8 }) { this.AppDot(); this.AppDot(); } + Stack({ alignContent: Alignment.Center }) { + SymbolGlyph($r('sys.symbol.square_grid_2x2')) + .fontSize(24) + .fontColor([this.tint]) } .width(24).height(24) - .justifyContent(FlexAlign.Center) - .alignItems(HorizontalAlign.Center) - } - - @Builder - private AppDot() { - Text('').width(8).height(8).borderRadius(4).backgroundColor(INK) } @Builder diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/StartupBrandReveal.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/StartupBrandReveal.ets new file mode 100644 index 0000000000..930ade278f --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/StartupBrandReveal.ets @@ -0,0 +1,108 @@ +import { MotionPreference } from '../../services/MotionPreference'; +import { WelcomeBrandFlow } from './WelcomeBrandFlow'; +import { MobileDesignMotion, MobileDesignTypography } from '../../generated/MobileDesignTokens'; +import { PAGE_BG, INK } from './Theme'; + +/** Native rendering of the mobile startup_brand_reveal motion contract. */ +@ComponentV2 +export struct StartupBrandReveal { + @Event onFinished: () => void = () => {}; + @Local progress: number = 0; + @Local stageScale: number = 1; + private readonly letters: string[] = ['O', 'p', 'e', 'n', 'B', 'ı', 't', 'F', 'u', 'n']; + private readonly widths: number[] = [30, 25, 24, 25, 28, 10, 16, 24, 25, 25]; + private timer: number = -1; + private started: number = 0; + + aboutToAppear(): void { + if (MotionPreference.reduceMotion()) { this.onFinished(); return; } + this.started = Date.now(); + this.timer = setInterval(() => { + this.progress = Math.min(1, (Date.now() - this.started) / MobileDesignMotion.startupBrand); + if (this.progress >= 1) { clearInterval(this.timer); this.onFinished(); } + }, 16); + } + aboutToDisappear(): void { clearInterval(this.timer); } + private clamp(x: number): number { return Math.max(0, Math.min(1, x)); } + private smooth(x: number): number { const v = this.clamp(x); return v * v * (3 - 2 * v); } + private ease(x: number): number { return 1 - Math.pow(1 - this.clamp(x), 3); } + private time(): number { return Math.min(this.progress / 0.65 * 0.9, 0.9); } + private settle(): number { return this.smooth((this.progress - 0.66) / 0.19); } + private start(index: number): number { return 0.19 + index * 0.048; } + private x(index: number): number { + let x = 24; + for (let i = 0; i < index; i++) x += this.widths[i]; + return x; + } + private reveal(index: number): number { return this.ease((this.time() - this.start(index)) / 0.05); } + private bounce(index: number): number { + const p = this.clamp((this.time() - this.start(index)) / 0.085); + return Math.sin(p * Math.PI) * Math.pow(1 - p, 0.65); + } + private dot(): number[] { + const t = this.time(); + let x = 9; + let y = 110; + let sx = 1; + let sy = 1; + for (let i = 0; i < 10; i++) { + const end = this.start(i); + const begin = i === 0 ? end - 0.065 : this.start(i - 1); + const from = i === 0 ? 9 : this.x(i) + 10; + const to = this.x(i + 1) + 10; + if (t >= end) { x = to; continue; } + if (t >= begin) { + const step = this.clamp((t - begin) / (end - begin)); + const hop = this.clamp((step - 0.16) / 0.84); + const squash = Math.sin(this.clamp(step / 0.16) * Math.PI); + x = from + (to - from) * this.smooth(hop); + y -= 4 * hop * (1 - hop) * (i === 0 ? 20 : 15); + sx = 1 + 0.2 * squash; sy = 1 - 0.18 * squash; + } + break; + } + if (t >= 0.70) { + const flight = this.clamp((t - 0.70) / 0.16); + const travel = this.smooth(flight); + x += (this.x(5) + 5 - x) * travel; + y = 110 - 15 * travel - Math.sin(Math.PI * flight) * 44; + sx = 1 + (7.35 / 9 - 1) * travel; sy = sx; + if (t > 0.86 && t < 0.9) y -= Math.sin((t - 0.86) / 0.04 * Math.PI) * 2; + } + return [x, y + 42 * this.settle(), sx, sy]; + } + private markScale(): number { + const p = this.clamp((this.progress - 0.66) / 0.19) - 1; + return 0.65 + 0.35 * (1 + 2.2 * p * p * p + 1.2 * p * p); + } + private halo(): number { return Math.sin(this.clamp((this.time() - 0.86) / 0.04) * Math.PI); } + + build() { + Stack({ alignContent: Alignment.Center }) { + Stack({ alignContent: Alignment.TopStart }) { + WelcomeBrandFlow({ markSize: 156, sweep: true }) + .position({ x: 62, y: -34 }).scale({ x: this.markScale(), y: this.markScale() }) + .opacity(this.ease((this.progress - 0.66) / 0.19)) + ForEach(this.letters, (letter: string, index: number) => { + Text(letter).fontSize(MobileDesignTypography.brandWordmark.size).fontWeight(FontWeight.Medium).fontColor(INK) + .width(this.widths[index]).height(56).textAlign(TextAlign.Center) + .position({ x: this.x(index), y: 82 + 42 * this.settle() }) + .opacity(this.reveal(index)) + .translate({ y: 7 * (1 - this.reveal(index)) - 8 * this.bounce(index) }) + .rotate({ angle: (index % 2 === 0 ? -1 : 1) * this.bounce(index) * 6 }) + }, (_letter: string, index: number) => `${index}`) + Circle().width(22).height(22).fill($r('app.color.brand_dot')) + .position({ x: this.dot()[0] - 11, y: this.dot()[1] - 11 }).opacity(this.halo() * 0.16) + Circle().width(9).height(9).fill($r('app.color.brand_dot')) + .position({ x: this.dot()[0] - 4.5, y: this.dot()[1] - 4.5 }) + .scale({ x: this.dot()[2], y: this.dot()[3] }).opacity(this.ease(this.time() / 0.12)) + }.width(280).height(240).scale({ x: this.stageScale, y: this.stageScale }) + } + .width('100%').height('100%').backgroundColor(PAGE_BG) + .onSizeChange((_oldSize: SizeOptions, size: SizeOptions) => { + this.stageScale = Math.min(1, Math.max(0.1, (Number(size.width) - 32) / 280)); + }) + .opacity(1 - this.smooth((this.progress - 0.97) / 0.03)) + .hitTestBehavior(HitTestMode.Block).accessibilityLevel('no-hide-descendants') + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WelcomeBrandFlow.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WelcomeBrandFlow.ets new file mode 100644 index 0000000000..607c05187d --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WelcomeBrandFlow.ets @@ -0,0 +1,81 @@ +import { LengthMetricsUnit } from '@kit.ArkUI'; +import { MotionPreference } from '../../services/MotionPreference'; +import { INK, TRANSPARENT } from './Theme'; +const CONTOURS: string[] = [ + "M154.860 59.584 Q167.500 59.584 173.820 70.531 L200.680 117.053 Q207.000 128.000 200.680 138.947 L173.820 185.469 Q167.500 196.416 154.860 196.416 L101.140 196.416 Q88.500 196.416 82.180 185.469 L55.320 138.947 Q49.000 128.000 55.320 117.053 L82.180 70.531 Q88.500 59.584 101.140 59.584 Z", + "M152.788 57.185 Q165.682 56.702 172.547 67.628 L201.722 114.060 Q208.586 124.985 202.557 136.392 L176.934 184.875 Q170.905 196.282 158.011 196.765 L103.212 198.815 Q90.318 199.298 83.453 188.372 L54.278 141.940 Q47.414 131.015 53.443 119.608 L79.066 71.125 Q85.095 59.718 97.989 59.235 Z", + "M150.574 54.847 Q163.702 53.863 171.119 64.741 L202.639 110.973 Q210.056 121.851 204.343 133.713 L180.066 184.126 Q174.353 195.988 161.224 196.972 L105.426 201.153 Q92.298 202.137 84.881 191.259 L53.361 145.027 Q45.944 134.149 51.657 122.287 L75.934 71.874 Q81.647 60.012 94.776 59.028 Z", + "M148.218 52.578 Q161.562 51.074 169.537 61.879 L203.427 107.798 Q211.401 118.603 206.031 130.911 L183.208 183.221 Q177.838 195.529 164.494 197.032 L107.782 203.422 Q94.438 204.926 86.463 194.121 L52.573 148.202 Q44.599 137.397 49.969 125.089 L72.792 72.779 Q78.162 60.471 91.506 58.968 Z", + "M145.724 50.384 Q159.263 48.344 167.799 59.048 L204.079 104.542 Q212.616 115.246 207.614 127.991 L186.355 182.157 Q181.353 194.902 167.814 196.943 L110.276 205.616 Q96.737 207.656 88.201 196.952 L51.921 151.458 Q43.384 140.754 48.386 128.009 L69.645 73.843 Q74.647 61.098 88.186 59.057 Z", + "M143.094 48.274 Q156.805 45.680 165.907 56.257 L204.592 101.209 Q213.694 111.786 209.085 124.957 L189.498 180.935 Q184.889 194.106 171.178 196.700 L112.906 207.726 Q99.195 210.320 90.093 199.743 L51.408 154.791 Q42.306 144.214 46.915 131.043 L66.502 75.065 Q71.111 61.894 84.822 59.300 Z", + "M140.330 46.254 Q154.191 43.091 163.861 53.512 L204.959 97.806 Q214.629 108.227 210.439 121.813 L192.629 179.551 Q188.438 193.137 174.578 196.301 L115.670 209.746 Q101.809 212.909 92.139 202.488 L51.041 158.194 Q41.371 147.773 45.561 134.187 L63.371 76.449 Q67.562 62.863 81.422 59.699 Z", + "M137.437 44.331 Q151.423 40.584 161.662 50.823 L205.177 94.338 Q215.416 104.577 211.669 118.563 L195.741 178.007 Q191.993 191.993 178.007 195.741 L118.563 211.669 Q104.577 215.416 94.338 205.177 L50.823 161.662 Q40.584 151.423 44.331 137.437 L60.259 77.993 Q64.007 64.007 77.993 60.259 Z", + "M134.416 42.513 Q148.504 38.167 159.311 48.195 L205.242 90.813 Q216.049 100.840 212.769 115.214 L198.826 176.300 Q195.545 190.673 181.458 195.019 L121.584 213.487 Q107.496 217.833 96.689 207.805 L50.758 165.187 Q39.951 155.160 43.231 140.786 L57.174 79.700 Q60.455 65.327 74.542 60.981 Z", + "M131.272 40.805 Q145.436 35.849 156.810 45.637 L205.149 87.237 Q216.523 97.025 213.733 111.769 L201.877 174.431 Q199.087 189.175 184.923 194.131 L124.728 215.195 Q110.564 220.151 99.190 210.363 L50.851 168.763 Q39.477 158.975 42.267 144.231 L54.123 81.569 Q56.913 66.825 71.077 61.869 Z", + "M128.010 39.216 Q142.223 33.637 154.160 43.157 L204.895 83.616 Q216.832 93.136 214.556 108.234 L204.885 172.401 Q202.609 187.499 188.396 193.077 L127.990 216.784 Q113.777 222.363 101.840 212.843 L51.105 172.384 Q39.168 162.864 41.444 147.766 L51.115 83.599 Q53.391 68.501 67.604 62.923 Z", + "M124.633 37.750 Q138.869 31.539 151.365 40.762 L204.475 79.959 Q216.972 89.182 215.233 104.616 L207.842 170.209 Q206.103 185.643 191.868 191.854 L131.367 218.250 Q117.131 224.461 104.635 215.238 L51.525 176.041 Q39.028 166.818 40.767 151.384 L48.158 85.791 Q49.897 70.357 64.132 64.146 Z", + "M121.147 36.415 Q135.377 29.562 148.427 38.459 L203.889 76.272 Q216.938 85.169 215.758 100.920 L210.742 167.858 Q209.562 183.608 195.331 190.461 L134.853 219.585 Q120.623 226.438 107.573 217.541 L52.111 179.728 Q39.062 170.831 40.242 155.080 L45.258 88.142 Q46.438 72.392 60.669 65.539 Z", + "M117.556 35.216 Q131.752 27.713 145.348 36.256 L203.131 72.563 Q216.727 81.106 216.127 97.152 L213.575 165.347 Q212.975 181.393 198.778 188.896 L138.444 220.784 Q124.248 228.287 110.652 219.744 L52.869 183.437 Q39.273 174.894 39.873 158.848 L42.425 90.653 Q43.025 74.607 57.222 67.104 Z", + "M113.866 34.160 Q128.000 26.000 142.134 34.160 L202.201 68.840 Q216.335 77.000 216.335 93.320 L216.335 162.680 Q216.335 179.000 202.201 187.160 L142.134 221.840 Q128.000 230.000 113.866 221.840 L53.799 187.160 Q39.665 179.000 39.665 162.680 L39.665 93.320 Q39.665 77.000 53.799 68.840 Z" +]; +const LENGTHS: number[] = [460.633, 470.212, 479.792, 489.371, 498.95, 508.529, 518.108, 527.687, 537.267, 546.846, 556.425, 566.004, 575.583, 585.163, 594.742]; + +/** Desktop contour-flow effect; only highlights move, never the brand silhouette. */ +@ComponentV2 +export struct WelcomeBrandFlow { + @Param markSize: number = 92; + @Param sweep: boolean = false; + private canvas: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true), LengthMetricsUnit.PX); + private paintSweep(): void { + const color = this.getUIContext().getHostContext()?.resourceManager.getColorSync($r('app.color.ink').id) || 0; + const r = (color >>> 16) & 255; const g = (color >>> 8) & 255; const b = color & 255; + const ctx = this.canvas; + const pixels = this.getUIContext().vp2px(this.markSize); + ctx.clearRect(0, 0, pixels, pixels); + ctx.save();ctx.scale(pixels / 256, pixels / 256); + const shift = this.moving ? (Math.min(1, this.phase / 0.75) * 2 - 1) * 256 : 0; + const gradient = ctx.createLinearGradient(shift, shift, 256 + shift, 256 + shift); + gradient.addColorStop(0, `rgba(${r},${g},${b},0.16)`); + gradient.addColorStop(0.46, `rgba(${r},${g},${b},0.25)`); + gradient.addColorStop(0.55, `rgba(${r},${g},${b},1)`); + gradient.addColorStop(0.65, `rgba(${r},${g},${b},0.25)`); + gradient.addColorStop(1, `rgba(${r},${g},${b},0.16)`); + ctx.strokeStyle = this.moving ? gradient : `rgb(${r},${g},${b})`; + ctx.lineWidth = 1.45; + CONTOURS.forEach((contour: string) => { ctx.stroke(new Path2D(contour)); }); + ctx.restore(); + } + @Local phase: number = 0; + @Local moving: boolean = false; + private timer: number = -1; + aboutToDisappear(): void { this.stop(); } + private stop(): void { if(this.timer>=0) clearInterval(this.timer);this.timer=-1; } + private play(): void { + this.stop();this.moving=!MotionPreference.reduceMotion(); + if(this.moving) this.timer=setInterval(()=>{const cycle=this.sweep?5000:18000;this.phase=(Date.now()%cycle)/cycle;if(this.sweep)this.paintSweep();},33); + if(this.sweep)this.paintSweep(); + } + build() { + Stack({ alignContent: Alignment.Center }) { + if (this.sweep) { + Canvas(this.canvas).width(this.markSize).height(this.markSize).onReady(() => this.paintSweep()) + } else { + Shape() { + ForEach(CONTOURS, (contour: string,index: number)=>{ + Path().commands(contour).fill(TRANSPARENT).stroke(INK).strokeWidth(px2vp(1)).opacity(0.25) + if(this.moving) { + ForEach([0.34,0.26,0.18],(length: number,layer: number)=>{ + Path().commands(contour).fill(TRANSPARENT).stroke(INK).strokeWidth(px2vp(1)) + .strokeDashArray([px2vp(LENGTHS[index]*length/2),px2vp(LENGTHS[index]*(1-length)),px2vp(LENGTHS[index]*length/2),0]) + .strokeDashOffset(px2vp(-LENGTHS[index]*(this.phase+index*0.03))) + .opacity(layer===2?0.36:layer===1?0.14:0.12) + }) + } + }) + }.viewPort({ x: 0, y: 0, width: 256, height: 256 }) + .width(this.markSize).height(this.markSize) + } + }.width(this.markSize).height(this.markSize).accessibilityLevel('no-hide-descendants') + .onVisibleAreaChange([0],(visible: boolean)=>{if(visible)this.play();else this.stop();}) + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WelcomeHome.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WelcomeHome.ets new file mode 100644 index 0000000000..a7c7c0b7d0 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WelcomeHome.ets @@ -0,0 +1,156 @@ +import { RemoteI18n } from '../../i18n/RemoteI18n'; +import { MobileDesignTypography, MobileDesignGeometry as G } from '../../generated/MobileDesignTokens'; +import { MotionPreference } from '../../services/MotionPreference'; +import { WelcomeBrandFlow } from './WelcomeBrandFlow'; +import { INK, PAGE_BG, SOFT, MUTED, TRANSPARENT } from './Theme'; + +/** A welcome composition with the C staggered-slide phrase timeline. */ +@ComponentV2 +export struct WelcomeHome { + @Param signedIn: boolean = false; + @Event onLogin: () => void = () => {}; + @Event onScan: () => void = () => {}; + @Event onMiniApps: () => void = () => {}; + @Local elapsed: number = 0; + @Local pageHeight: number = 700; + @Local pageWidth: number = 390; + private timer: number = -1; + private started: number = 0; + + aboutToDisappear(): void { this.stop(); } + private stop(): void { if (this.timer >= 0) clearInterval(this.timer); this.timer = -1; } + private play(): void { + this.stop(); + if (MotionPreference.reduceMotion()) { this.elapsed = 2700; return; } + this.started = Date.now(); + this.timer = setInterval(() => { this.elapsed = Date.now() - this.started; }, 16); + } + private phrases(): string[] { + return ['OpenBitFun', RemoteI18n.t('home.welcome_work'), RemoteI18n.t('home.welcome_play'), RemoteI18n.t('home.welcome_yours')]; + } + private duration(word: string): number { return 250 + word.length * 185 + (word === 'OpenBitFun' ? 600 : 0) + 1800 + 650; } + private phraseIndex(): number { + const words = this.phrases(); + let total = 0; + for (const word of words) total += this.duration(word); + let time = this.elapsed % total; + for (let i = 0; i < words.length; i++) { if (time < this.duration(words[i])) return i; time -= this.duration(words[i]); } + return 0; + } + private word(): string { return this.phrases()[this.phraseIndex()]; } + private time(): number { + const words = this.phrases(); + let total = 0; + for (const word of words) total += this.duration(word); + let time = this.elapsed % total; + for (let i = 0; i < this.phraseIndex(); i++) time -= this.duration(words[i]); + return time; + } + private clamp(value: number): number { return Math.max(0, Math.min(1, value)); } + private progress(index: number): number { return this.clamp((this.time() - 180 - index * 55) / 800); } + private exitProgress(): number { return this.clamp((this.time() - this.duration(this.word()) + 650) / 650); } + private bump(index: number): number { const p = this.progress(index); return Math.sin(p * Math.PI) * (1-p); } + private glyphOffset(index: number): number { + return Math.pow(1-this.progress(index), 3) * 38 - this.bump(index) * 5 - Math.pow(this.exitProgress(), 2) * 30; + } + + private wide(): boolean { return this.pageWidth >= 600; } + private landscape(): boolean { + return this.pageWidth >= 840 && this.pageWidth / Math.max(1, this.pageHeight) >= 1.2; + } + + build() { + Scroll() { + Column() { + Row() { + ForEach('OpenBitFun'.split(''), (letter: string) => { this.Glyph(letter, G.welcomeHeaderWordSize); }) + }.width('100%').height(G.welcomeHeaderHeight) + .padding({ left: this.wide() ? 40 : G.welcomeGutter, right: G.welcomeGutter }) + if (this.landscape()) { + Row({ space: 48 }) { + Column() { this.Hero() }.layoutWeight(1) + Column() { this.Actions() }.layoutWeight(1) + }.width('100%').constraintSize({ maxWidth: 1000, + minHeight: Math.max(400, this.pageHeight - G.welcomeHeaderHeight) }) + .padding({ left: 40, right: 40, bottom: 48 }) + .alignItems(VerticalAlign.Center) + } else if (this.wide()) { + Column() { + this.Hero() + this.Actions() + }.width('100%').constraintSize({ minHeight: Math.max(540, this.pageHeight - G.welcomeHeaderHeight) }) + .justifyContent(FlexAlign.Center).padding({ bottom: 64 }) + } else { + Column() { this.Hero() } + .justifyContent(FlexAlign.Center).width('100%') + .height(Math.max(300, this.pageHeight - G.welcomeHeaderHeight - 228)) + .padding({ bottom: 24 }) + this.Actions() + } + }.width('100%') + }.width('100%').height('100%').scrollBar(BarState.Off).backgroundColor(PAGE_BG) + .onSizeChange((_old: SizeOptions, size: SizeOptions) => { + this.pageHeight = Number(size.height); + this.pageWidth = Number(size.width); + }) + .onVisibleAreaChange([0], (visible: boolean) => { if (visible) this.play(); else this.stop(); }) + } + + @Builder + private Hero() { + Column({ space: this.wide() ? 16 : 20 }) { + WelcomeBrandFlow({ markSize: this.landscape() ? 216 : this.wide() ? 184 : 156, sweep: true }) + Row() { + ForEach(this.word().split(''), (letter: string, index: number) => { + Stack() { this.Glyph(letter, this.word().length > 12 ? 25 : 30); } + .opacity(this.clamp(this.progress(index)*3)*(1-this.exitProgress())) + .translate({ x: this.glyphOffset(index) }) + .scale({ x: 1+this.bump(index)*0.045, y: 1+this.bump(index)*0.045 }) + }, (letter: string, index: number) => `${this.phraseIndex()}-${index}-${letter}`) + }.height(48).accessibilityLevel('no-hide-descendants') + }.width('100%').margin({ bottom: this.wide() ? 32 : 0 }) + } + + @Builder + private Actions() { + Column({ space: G.welcomeButtonGap }) { + this.Action(false) + this.Action(true) + Button({ type: ButtonType.Normal }) { + Row({ space: 5 }) { + Text(RemoteI18n.t('home.exploreMiniApps')).fontSize(MobileDesignTypography.labelSmall.size) + .fontColor(this.wide() ? MUTED : $r('app.color.welcome_secondary')) + SymbolGlyph($r('sys.symbol.chevron_right')).fontSize(MobileDesignTypography.labelSmall.size) + .fontColor([this.wide() ? MUTED : $r('app.color.welcome_secondary')]) + } + }.height(44).width('100%').backgroundColor(TRANSPARENT).onClick(this.onMiniApps) + }.width('100%').constraintSize({ maxWidth: this.wide() ? 400 : G.welcomeMaxWidth }) + .padding({ left: G.welcomeGutter, right: G.welcomeGutter, top: this.wide() ? 0 : G.welcomeGutter, + bottom: this.wide() ? 0 : G.welcomeDockBottom }) + .backgroundColor(this.wide() ? TRANSPARENT : $r('app.color.welcome_dock')) + .borderRadius({ topLeft: G.welcomeDockRadius, topRight: G.welcomeDockRadius }) + } + @Builder + private Glyph(letter: string, size: number) { + if (letter === 'i') { + Stack({ alignContent: Alignment.Top }) { + Text('ı').fontSize(size).fontWeight(FontWeight.Medium).fontColor(INK) + Circle().width(size*0.14).height(size*0.14).fill($r('app.color.brand_dot')).translate({ y: size*0.25 }) + } + } else { + Text(letter).fontSize(size).fontWeight(FontWeight.Medium).fontColor(INK) + } + } + + @Builder + private Action(scan: boolean) { + Button({ type: ButtonType.Normal }) { + Row({ space: 10 }) { + if (scan) { Image($r('app.media.welcome_scan')).width(20).height(20) } + Text(RemoteI18n.t(scan ? 'home.welcome_scan' : + (this.signedIn ? 'home.connectComputer' : 'home.welcome_login'))).fontSize(MobileDesignTypography.labelMedium.size).fontWeight(FontWeight.Medium).fontColor(this.wide() ? (scan ? INK : PAGE_BG) : $r('app.color.welcome_button_label')) + }.justifyContent(FlexAlign.Center) + }.width('100%').height(G.welcomeButtonHeight).borderRadius(28) + .backgroundColor(this.wide() ? (scan ? SOFT : INK) : $r('app.color.welcome_button')).onClick(() => { if(scan) this.onScan(); else this.onLogin(); }) + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WideConversationHost.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WideConversationHost.ets index c14a78e9b9..e8a831526a 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WideConversationHost.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/WideConversationHost.ets @@ -141,6 +141,7 @@ export struct WideConversationHost { onClose: this.actions.onSidebar.close, onNewChat: this.actions.onSidebar.newChat, onEnterCode: this.actions.onSidebar.enterCode, + onOpenMiniApps: this.actions.onRemoteHome.openMiniApps, onScanDesktop: this.actions.onSidebar.scanDesktop, onCollapse: this.onCollapseMasterPane, onOpenViewSettings: this.onOpenRemoteViewSettings, diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/remote/RemoteSurfaceHost.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/remote/RemoteSurfaceHost.ets index 042f30d732..b3f661bf79 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/remote/RemoteSurfaceHost.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/components/remote/RemoteSurfaceHost.ets @@ -1,3 +1,5 @@ +import { RecentRemoteHome } from '../RecentRemoteHome'; +import { WelcomeHome } from '../WelcomeHome'; import { MobileDesignTypography } from '../../../generated/MobileDesignTokens'; import { RemoteI18n } from '../../../i18n/RemoteI18n'; import { REMOTE_CAPABILITY_HARNESS_PROFILES_V1, RemoteSession } from '../../../model/RemoteModels'; @@ -15,7 +17,6 @@ import { RemoteSessionList } from '../RemoteSessionList'; import { RemoteSessionLoadingView } from '../RemoteSessionLoadingView'; import { SidebarToggleButton } from '../SidebarToggleButton'; import { SessionActionPresentation } from '../SessionActionSurface'; -import { HarnessProfileMenu } from '../HarnessProfileMenu'; import { SettingsPlacement, SettingsPlacementPolicy, @@ -64,7 +65,6 @@ export struct RemoteSurfaceHost { @Event onOpenSidebar: () => void = () => {}; @Event onRestoreSidebar: () => void = () => {}; @Event onCloseSettings: () => void = () => {}; - @Local showCreateModeMenu: boolean = false; // The wide layout keeps the master pane inside a routed destination, so a // mount here while switching sessions means the navigation stack was torn @@ -77,7 +77,11 @@ export struct RemoteSurfaceHost { } build() { - if (this.mode === RemoteSurfaceMode.Master) { + if (this.mode !== RemoteSurfaceMode.Settings && + RemoteCompactHomePolicy.shouldShowWelcomeHome(this.remotePageState.controlTargetType, + this.remotePageState.connectionState, this.remotePageState.accountUserId.trim().length > 0)) { + this.WelcomeEntry() + } else if (this.mode === RemoteSurfaceMode.Master) { this.MasterContent(); } else if (this.mode === RemoteSurfaceMode.CompactHome) { this.CompactHomeContent(); @@ -129,7 +133,7 @@ export struct RemoteSurfaceHost { onLoadMore: () => this.actions.onRemoteHome.loadMore() }) } else { - this.DisconnectedState() + this.ConnectionEntry() } } .width('100%') @@ -182,44 +186,42 @@ export struct RemoteSurfaceHost { } @Builder - private DisconnectedState() { - Column({ space: 12 }) { - Stack({ alignContent: Alignment.Center }) { - SymbolGlyph($r('sys.symbol.desktop')).fontSize(42).fontColor([INK]) - } - .width(74) - .height(74) - .backgroundColor(CARD) - .borderRadius(24) - .border({ width: 1, color: LINE }) - Text(RemoteI18n.t('remote.connectTitle')) - .fontSize(MobileDesignTypography.headlineSmall.size).fontWeight(FontWeight.Bold).fontColor(INK).textAlign(TextAlign.Center) - Text(RemoteI18n.t('remote.connectText')) - .fontSize(MobileDesignTypography.bodySmall.size).lineHeight(MobileDesignTypography.bodySmall.lineHeight).fontColor(MUTED).textAlign(TextAlign.Center) - Text(RemoteI18n.t('connect.connect')) - .width(136).height(44).fontSize(MobileDesignTypography.titleSmall.size).fontColor(CONTENT_ON_ACTION) - .backgroundColor(PRIMARY_ACTION).textAlign(TextAlign.Center).borderRadius(22) - .onClick(() => this.actions.onRemoteHome.connectWorkspace()) + private WelcomeEntry() { + WelcomeHome({ + signedIn: this.remotePageState.accountUserId.trim().length > 0, + onLogin: () => { + if (this.remotePageState.accountUserId.trim().length > 0) { + this.actions.onRemoteHome.connectWorkspace(); + } else { + this.actions.onSettings.openAccount(); + } + }, + onScan: this.actions.onSidebar.scanDesktop, + onMiniApps: this.actions.onRemoteHome.openMiniApps + }) + } + + @Builder + private ConnectionEntry() { + if (this.isSyncing()) { + RemoteSessionLoadingView() + } else { + this.CompactEmptyState() } - .layoutWeight(1) - .width('100%') - .justifyContent(FlexAlign.Center) - .alignItems(HorizontalAlign.Center) - .padding({ left: 20, right: 20, bottom: 48 }) } @Builder private CompactHomeContent() { Column() { ConversationHeader({ - title: RemoteI18n.t('remote.title'), + title: RemoteI18n.t('app.title'), subtitle: this.compactHeaderContext(), - titleFallback: RemoteI18n.t('remote.title'), + titleFallback: RemoteI18n.t('app.title'), showSidebarButton: true, onOpenSidebar: this.onOpenSidebar }) if (RemoteCompactHomePolicy.shouldShowConnectHome(this.remotePageState.connectionState)) { - this.DisconnectedState() + this.ConnectionEntry() } else { this.CompactEmptyState() } @@ -231,51 +233,15 @@ export struct RemoteSurfaceHost { @Builder private CompactEmptyState() { - Column({ space: 10 }) { - if (this.isInitialLoading()) { - LoadingProgress().width(28).height(28).color(MUTED).margin({ bottom: 8 }) - } - Text(this.compactTitle()) - .fontSize(MobileDesignTypography.headlineMedium.size).fontWeight(FontWeight.Bold).fontColor(INK).textAlign(TextAlign.Center) - Text(this.compactText()) - .fontSize(MobileDesignTypography.bodyMedium.size).lineHeight(MobileDesignTypography.bodyMedium.lineHeight).fontColor(MUTED).maxLines(2) - .textOverflow({ overflow: TextOverflow.Ellipsis }).textAlign(TextAlign.Center) - .constraintSize({ maxWidth: 280 }) - // Starting a session needs a desktop on the other end, so while the link - // is down the button that is actually useful is the one that brings it - // back up. - if (this.canReconnect()) { - Text(RemoteI18n.t('remote.settings.reconnect')) - .width(148).height(46).fontSize(MobileDesignTypography.titleSmall.size).fontWeight(FontWeight.Medium) - .fontColor(CONTENT_ON_ACTION).backgroundColor(PRIMARY_ACTION) - .textAlign(TextAlign.Center).borderRadius(23).margin({ top: 12 }) - .onClick(() => this.actions.onRemoteHome.reconnect()) - } else { - Text(RemoteI18n.t('remote.startSession')) - .width(148).height(46).fontSize(MobileDesignTypography.titleSmall.size).fontWeight(FontWeight.Medium) - .fontColor(CONTENT_ON_ACTION).backgroundColor(PRIMARY_ACTION) - .textAlign(TextAlign.Center).borderRadius(23).margin({ top: 12 }) - .bindPopup(this.showCreateModeMenu, { - builder: () => { - this.CreateModeMenu() - }, - placement: Placement.Top, - popupColor: CARD, - enableArrow: false, - autoCancel: true, - mask: true, - targetSpace: 8, - onStateChange: (event) => { - if (!event.isVisible) { - this.showCreateModeMenu = false; - } - } - }) - .onClick(() => this.requestCreateSession()) - } - } - .width('100%').layoutWeight(1).justifyContent(FlexAlign.Center) - .alignItems(HorizontalAlign.Center).padding({ left: 24, right: 24, bottom: 56 }) + RecentRemoteHome({ + sessions: this.remotePageState.sessions, + desktopName: this.remotePageState.desktopName, + connected: this.remotePageState.connectionState === 'connected', + busy: this.isInitialLoading(), + onBrowse: () => { if (this.compact) this.onOpenSidebar(); else this.onRestoreSidebar(); }, + onConnect: () => this.actions.onRemoteHome.connectWorkspace(), + onOpen: (session: RemoteSession) => this.openSession(session) + }).layoutWeight(1) } @Builder @@ -298,16 +264,8 @@ export struct RemoteSurfaceHost { .width('100%').height(76).padding({ left: 16, right: 16, top: 14, bottom: 12 }) .border({ width: { bottom: 1 }, color: LINE }) - Column({ space: 8 }) { - if (this.isInitialLoading()) { - LoadingProgress().width(28).height(28).color(MUTED).margin({ bottom: 8 }) - } - Text(this.placeholderTitle()).fontSize(MobileDesignTypography.headlineLarge.size).fontWeight(FontWeight.Bold).fontColor(INK) - Text(this.statusText()).fontSize(MobileDesignTypography.bodyMedium.size).fontColor(MUTED).maxLines(2) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - } - .width('100%').layoutWeight(1).justifyContent(FlexAlign.Center) - .alignItems(HorizontalAlign.Center).padding({ left: 24, right: 24, bottom: 48 }) + this.CompactEmptyState() + } .width('100%').height('100%').backgroundColor(PAGE_BG) } @@ -368,24 +326,6 @@ export struct RemoteSurfaceHost { this.createSession('code'); } - @Builder - private CreateModeMenu() { - HarnessProfileMenu({ - onSelect: (agentType: string) => { - this.showCreateModeMenu = false; - this.createSession(agentType); - } - }) - } - - private requestCreateSession(): void { - if (this.supportsHarnessProfiles()) { - this.showCreateModeMenu = true; - return; - } - this.createSession('code'); - } - private supportsHarnessProfiles(): boolean { return this.remotePageState.supportsHostCapability(REMOTE_CAPABILITY_HARNESS_PROFILES_V1); } @@ -466,20 +406,4 @@ export struct RemoteSurfaceHost { RemoteI18n.t('remote.settings.noDesktop'); } - private compactTitle(): string { - if (this.isInitialLoading()) return RemoteI18n.t('common.loading'); - return this.remotePageState.visibleSessions().length > 0 ? - RemoteI18n.t('remote.pickSession') : RemoteI18n.t('remote.emptyTitle'); - } - - private compactText(): string { - if (this.isInitialLoading()) return this.statusText(); - return this.remotePageState.visibleSessions().length > 0 ? - RemoteI18n.t('remote.pickSessionText') : RemoteI18n.t('remote.emptyText'); - } - - private placeholderTitle(): string { - if (this.isInitialLoading()) return RemoteI18n.t('common.loading'); - return this.remotePageState.visibleSessions().length > 0 ? '选择会话' : RemoteI18n.t('remote.emptyTitle'); - } } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/AccountLoginErrorPolicy.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/AccountLoginErrorPolicy.ets new file mode 100644 index 0000000000..f539df32a7 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/AccountLoginErrorPolicy.ets @@ -0,0 +1,13 @@ +interface AccountLoginFailure { code?: number; statusCode?: number; } + +/** Present structured failures without exposing SDK messages or response bodies. */ +export class AccountLoginErrorPolicy { + static messageKey(error: Object): string { + const failure = error as AccountLoginFailure; + if (failure.code === 2300028) return 'account.errorTimeout'; + if (failure.code === 2300060 || failure.code === 2300035) return 'account.errorSecureConnection'; + if (failure.code !== undefined) return 'account.errorNetwork'; + if (failure.statusCode === 429) return 'account.errorRateLimited'; + return 'remote.settings.accountLoginFailed'; + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/RemoteCompactHomePolicy.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/RemoteCompactHomePolicy.ets index 90512a27ca..d93f441f4a 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/RemoteCompactHomePolicy.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/policy/RemoteCompactHomePolicy.ets @@ -6,6 +6,10 @@ * cache as a live link: "pick a session" only belongs on a connected desktop. */ export class RemoteCompactHomePolicy { + static shouldShowWelcomeHome(controlTargetType: string, connectionState: string, signedIn: boolean = false): boolean { + return !signedIn && controlTargetType === 'none' && connectionState !== 'connected'; + } + static shouldShowConnectHome(connectionState: string): boolean { return connectionState !== 'connected'; } diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/preview/MobileDesignGallery.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/preview/MobileDesignGallery.ets index 3349143a4f..94ef825b27 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/preview/MobileDesignGallery.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/preview/MobileDesignGallery.ets @@ -1,3 +1,4 @@ +import { WelcomeHome } from '../components/WelcomeHome'; import { MobileDesignGeometry, MobileDesignTypography } from '../../generated/MobileDesignTokens'; import { MobilePreviewMessage, @@ -30,6 +31,15 @@ struct MobileDesignGallery { } build() { + if (AppStorage.get('scenarioId') === 'welcome-home') { + WelcomeHome() + } else { + this.ConversationPreview() + } + } + + @Builder + private ConversationPreview() { Column() { this.PlatformLabel() ConversationHeader({ diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntime.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntime.ets index 7b2566b20c..fcbcb2680d 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntime.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntime.ets @@ -104,6 +104,7 @@ export class AppRootRuntime extends AppRootRuntimeComposition { } aboutToDisappear(): void { + this.miniAppViewModel.close(); this.settingsController.stopPresencePolling(); this.watchProvisionController.stop(); this.taskCompletionNotificationController.stop(); diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntimeComposition.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntimeComposition.ets index 9965439d67..ee59db2044 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntimeComposition.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/runtime/AppRootRuntimeComposition.ets @@ -1,3 +1,5 @@ +import { BuiltinMiniAppHost } from '../../services/BuiltinMiniAppHost'; +import { MiniAppViewModel } from '../viewmodel/MiniAppViewModel'; import { SidebarConnectionActionPolicy } from '../policy/SidebarConnectionActionPolicy'; import { accountDeviceLink } from '../../services/AccountDeviceLink'; import { @@ -138,6 +140,7 @@ export abstract class AppRootRuntimeComposition { abstract toggleVoiceInput(): Promise; readonly sessionManager: RemoteSessionManager = new RemoteSessionManager(); + readonly miniAppViewModel: MiniAppViewModel = new MiniAppViewModel(new BuiltinMiniAppHost((): Context => this.host.context())); readonly taskCompletionNotificationPort: HarmonyTaskCompletionNotificationPort = new HarmonyTaskCompletionNotificationPort((): Context => this.host.context()); readonly taskCompletionNotificationController: TaskCompletionNotificationController = @@ -752,6 +755,7 @@ export abstract class AppRootRuntimeComposition { onCompactLayoutEntered: (): void => this.enterCompactLayout(), onLayoutModeChanged: (wideLayout: boolean): void => this.appShellState.setWideLayout(wideLayout), onRemoteHome: { + openMiniApps: (): void => { this.closeAppSidebar(); this.miniAppViewModel.actions.open(); }, openSidebar: (): void => this.openAppSidebar(), connectWorkspace: (): void => this.openConnectSheet(), addConnection: (): void => this.openConnectSheet(), @@ -819,8 +823,10 @@ export abstract class AppRootRuntimeComposition { setTimeout(() => this.appShellState.openSettings('account'), 180); }, openSession: (session: RemoteSession): void => { + // The shell supplies the horizontal motion; do not stack a second + // NavDestination push animation on top of the closing drawer. this.closeAppSidebar(); - this.conversationController.openHomeSession(session); + this.conversationController.openHomeSession(session, true); }, deleteSession: (session: RemoteSession): void => { this.conversationController.deleteHomeSession(session); } }, diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/state/MiniAppState.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/state/MiniAppState.ets new file mode 100644 index 0000000000..c5bba426ab --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/state/MiniAppState.ets @@ -0,0 +1,13 @@ +import { MiniAppSummary } from '../../model/MiniAppModels'; + +@ObservedV2 +export class MiniAppState { + @Trace visible: boolean = false; + @Trace loading: boolean = false; + @Trace error: string = ''; + @Trace apps: MiniAppSummary[] = []; + @Trace appId: string = ''; + @Trace name: string = ''; + @Trace document: string = ''; + @Trace revision: number = 0; +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/pages/viewmodel/MiniAppViewModel.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/viewmodel/MiniAppViewModel.ets new file mode 100644 index 0000000000..e3c1f84f76 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/pages/viewmodel/MiniAppViewModel.ets @@ -0,0 +1,90 @@ +import { MiniAppActions, MiniAppBridgeReply, MiniAppBridgeRequest, MiniAppHost } from '../../model/MiniAppModels'; +import { MiniAppDocument } from '../../services/MiniAppDocument'; +import { RemoteI18n } from '../../i18n/RemoteI18n'; +import { MiniAppState } from '../state/MiniAppState'; + +export class MiniAppViewModel { + readonly state: MiniAppState = new MiniAppState(); + private generation: number = 0; + private readonly host: MiniAppHost; + readonly actions: MiniAppActions = { + open: (): void => { void this.open(); }, + close: (): void => this.close(), + back: (): void => { void this.open(); }, + refresh: (): void => { void this.open(); }, + select: (id: string): void => { void this.select(id); }, + request: (raw: string, revision: number): Promise => this.request(raw, revision) + }; + + constructor(host: MiniAppHost) { this.host = host; } + + close(): void { + this.generation += 1; + this.state.visible = false; + this.state.loading = false; + this.state.document = ''; + this.state.appId = ''; + } + + async open(): Promise { + const generation = ++this.generation; + this.state.visible = true; + this.state.document = ''; + this.state.appId = ''; + this.state.name = ''; + this.state.apps = []; + this.state.error = ''; + this.state.loading = true; + try { + const apps = await this.host.list(RemoteI18n.language()); + if (generation === this.generation) this.state.apps = apps; + } catch (error) { + if (generation === this.generation) this.state.error = String(error); + } finally { + if (generation === this.generation) this.state.loading = false; + } + } + + async select(id: string): Promise { + const app = this.state.apps.find((entry) => entry.id === id); + if (!this.state.visible || !app) return; + const generation = ++this.generation; + this.state.loading = true; + this.state.document = ''; + this.state.appId = ''; + this.state.error = ''; + try { + const html = await this.host.document(id); + if (generation !== this.generation) return; + if (!html) throw new Error(RemoteI18n.t('miniapp.invalidPage')); + this.state.appId = id; + this.state.name = app.name; + this.state.document = MiniAppDocument.build(html, RemoteI18n.language()); + this.state.revision += 1; + } catch (error) { + if (generation === this.generation) this.state.error = String(error); + } finally { + if (generation === this.generation) this.state.loading = false; + } + } + + async request(raw: string, revision: number = this.state.revision): Promise { + const generation = this.generation; + let id: string = ''; + try { + const rpc = JSON.parse(raw) as MiniAppBridgeRequest; + id = rpc.id; + if (revision !== this.state.revision || typeof id !== 'string' || !rpc.params || !this.state.visible || !this.state.appId || + !['storage.get', 'storage.set', 'clipboard.writeText'].includes(rpc.method)) { + throw new Error(RemoteI18n.t('miniapp.unsupported')); + } + const result = await this.host.call(this.state.appId, rpc.method, rpc.params); + if (generation !== this.generation) throw new Error(RemoteI18n.t('miniapp.closed')); + const reply: MiniAppBridgeReply = { jsonrpc: '2.0', id, result }; + return JSON.stringify(reply); + } catch (error) { + const reply: MiniAppBridgeReply = { jsonrpc: '2.0', id, error: { message: String(error) } }; + return JSON.stringify(reply); + } + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/services/BuiltinMiniAppHost.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/services/BuiltinMiniAppHost.ets new file mode 100644 index 0000000000..1f48e527d0 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/services/BuiltinMiniAppHost.ets @@ -0,0 +1,86 @@ +import { util } from '@kit.ArkTS'; +import { fileIo as fs } from '@kit.CoreFileKit'; +import { MiniAppBridgeParams, MiniAppHost, MiniAppSummary } from '../model/MiniAppModels'; +import { RemoteI18n } from '../i18n/RemoteI18n'; +import { ClipboardService } from './ClipboardService'; + +interface BuiltinMiniAppLocale { name: string; description: string; } +interface BuiltinMiniAppEntry { id: string; locales: Record; } +interface MiniAppFileError { code?: number; } + +/** Only these product-selected bundles may access the local bridge. */ +export const BUILTIN_MINIAPP_IDS: string[] = ['builtin-gomoku', 'builtin-regex-playground', 'builtin-daily-divination']; + +export class BuiltinMiniAppHost implements MiniAppHost { + private readonly context: () => Context; + // Serialize mutations and reads so close/reopen cannot overtake a pending save. + private storageQueue: Promise = Promise.resolve(null); + + constructor(context: () => Context) { this.context = context; } + + private assertApp(appId: string): void { + if (!BUILTIN_MINIAPP_IDS.includes(appId)) throw new Error(RemoteI18n.t('miniapp.unsupported')); + } + + private async resource(name: string): Promise { + const bytes = await this.context().resourceManager.getRawFileContent(`miniapps/${name}`); + return util.TextDecoder.create('utf-8').decodeWithStream(bytes); + } + + async list(locale: string): Promise { + const catalog = JSON.parse(await this.resource('catalog.json')) as BuiltinMiniAppEntry[]; + return catalog.map((entry: BuiltinMiniAppEntry): MiniAppSummary => { + this.assertApp(entry.id); + const copy = entry.locales[locale] || entry.locales['en-US']; + return { id: entry.id, name: copy.name, description: copy.description }; + }); + } + + async document(appId: string): Promise { + this.assertApp(appId); + return this.resource(`${appId}.html`); + } + + async call(appId: string, method: string, params: MiniAppBridgeParams): Promise { + this.assertApp(appId); + if (method === 'clipboard.writeText' && typeof params.text === 'string') { + await new ClipboardService().writeText(params.text); + return null; + } + if ((method !== 'storage.get' && method !== 'storage.set') || typeof params.key !== 'string' || + !this.allowedKey(appId, params.key)) throw new Error(RemoteI18n.t('miniapp.unsupported')); + const operation = this.storageQueue.then((): Promise => this.storage(appId, method, params)); + this.storageQueue = operation.catch((): null => null); + return operation; + } + + private allowedKey(appId: string, key: string): boolean { + return (appId === 'builtin-gomoku' && key === 'stats') || + (appId === 'builtin-regex-playground' && key === 'regex-state') || + (appId === 'builtin-daily-divination' && key === 'lastReading'); + } + + private async storage(appId: string, method: string, params: MiniAppBridgeParams): Promise { + // Stable path across bundle upgrades. Never remove unreadable records. + const directory = `${this.context().filesDir}/miniapps`; + const path = `${directory}/${appId}-${params.key}.json`; + if (method === 'storage.get') { + try { + return JSON.parse(await fs.readText(path)) as Object | null; + } catch (error) { + if ((error as MiniAppFileError).code === 13900002) return null; // ENOENT only + throw new Error(String(error)); + } + } + await fs.mkdir(directory, true); + const file = await fs.open(`${path}.tmp`, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE | fs.OpenMode.TRUNC); + try { + await fs.write(file.fd, JSON.stringify(params.value === undefined ? null : params.value)); + await fs.fsync(file.fd); + } finally { + await fs.close(file); + } + await fs.rename(`${path}.tmp`, path); + return null; + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/services/CloudAccountClient.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/services/CloudAccountClient.ets index d403841eb3..7d77581f27 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/ets/services/CloudAccountClient.ets +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/services/CloudAccountClient.ets @@ -24,6 +24,16 @@ interface LoginRequest { interface PeerPublicKey { public_key: string; } interface RelayErrorResponse { error?: string; } +interface NetworkRequestFailure { code?: number; } + +export class CloudAccountTransportError extends Error { + readonly code: number; + constructor(code: number) { + super(`Account transport failed (code=${code}).`); + this.code = code; + } +} + export class CloudAccountRequestError extends Error { readonly statusCode: number; @@ -337,6 +347,11 @@ export class CloudAccountClient { } return JSON.parse(text) as T; } catch (err) { + const code = (err as NetworkRequestFailure).code; + if (typeof code === 'number') { + RemoteLogger.warn(`relay transport failed method=${method} path=${path} code=${code}`); + throw new CloudAccountTransportError(code); + } throw OhosError.wrap('relay request', err); } finally { request.destroy(); diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/services/MiniAppDocument.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/services/MiniAppDocument.ets new file mode 100644 index 0000000000..56817895d2 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/services/MiniAppDocument.ets @@ -0,0 +1,39 @@ +import { RemoteI18n } from '../i18n/RemoteI18n'; + +/** Trusted wrapper and untrusted H5 are separate browsing contexts. */ +export class MiniAppDocument { + static build(html: string, locale: string): string { + const language = JSON.stringify(locale).replace(/', ``); + const source = JSON.stringify(localized).replace(/ + + +`; + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/ets/services/MotionPreference.ets b/src/apps/mobile/harmonyos/entry/src/main/ets/services/MotionPreference.ets new file mode 100644 index 0000000000..bdafe42009 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/ets/services/MotionPreference.ets @@ -0,0 +1,13 @@ +import accessibility from '@ohos.accessibility'; +import deviceInfo from '@ohos.deviceInfo'; + +/** Optional on older phones; never let a presentation preference block startup. */ +export class MotionPreference { + static reduceMotion(): boolean { + try { + return deviceInfo.sdkApiVersion >= 23 && accessibility.isAnimationReduceEnabledSync(); + } catch (_err) { + return false; + } + } +} diff --git a/src/apps/mobile/harmonyos/entry/src/main/module.json5 b/src/apps/mobile/harmonyos/entry/src/main/module.json5 index 371070a8f3..c47e1d3306 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/module.json5 +++ b/src/apps/mobile/harmonyos/entry/src/main/module.json5 @@ -68,7 +68,7 @@ "icon": "$media:openbitfun_app_icon", "label": "$string:EntryAbility_label", "startWindowIcon": "$media:openbitfun_start_window", - "startWindowBackground": "$color:start_window_background", + "startWindowBackground": "$color:page_bg", "exported": true, "skills": [ { diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/element/color.json b/src/apps/mobile/harmonyos/entry/src/main/resources/base/element/color.json index 46f9729710..888e8e66f1 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/resources/base/element/color.json +++ b/src/apps/mobile/harmonyos/entry/src/main/resources/base/element/color.json @@ -171,6 +171,26 @@ { "name": "code_target_bg", "value": "#FFF1BE" + }, + { + "name": "brand_dot", + "value": "#16B9CE" + }, + { + "name": "welcome_dock", + "value": "#171917" + }, + { + "name": "welcome_button", + "value": "#FFFFFF" + }, + { + "name": "welcome_button_label", + "value": "#171917" + }, + { + "name": "welcome_secondary", + "value": "#B9BCB9" } ] } diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_divination_preview.webp b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_divination_preview.webp new file mode 100644 index 0000000000..2bcccda7ed Binary files /dev/null and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_divination_preview.webp differ diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_gomoku_preview.webp b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_gomoku_preview.webp new file mode 100644 index 0000000000..3b7109e686 Binary files /dev/null and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_gomoku_preview.webp differ diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_regex_preview.webp b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_regex_preview.webp new file mode 100644 index 0000000000..dd7ddb72ae Binary files /dev/null and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/miniapp_regex_preview.webp differ diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_brand_mark.png b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_brand_mark.png new file mode 100644 index 0000000000..a14b2966c7 Binary files /dev/null and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_brand_mark.png differ diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png index a05c7af45d..a14b2966c7 100644 Binary files a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png differ diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/welcome_scan.svg b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/welcome_scan.svg new file mode 100644 index 0000000000..09d946e2a4 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/welcome_scan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/dark/element/color.json b/src/apps/mobile/harmonyos/entry/src/main/resources/dark/element/color.json index 6d08d86a85..2f240a62ae 100644 --- a/src/apps/mobile/harmonyos/entry/src/main/resources/dark/element/color.json +++ b/src/apps/mobile/harmonyos/entry/src/main/resources/dark/element/color.json @@ -171,6 +171,26 @@ { "name": "code_target_bg", "value": "#5A4E24" + }, + { + "name": "brand_dot", + "value": "#16B9CE" + }, + { + "name": "welcome_dock", + "value": "#171917" + }, + { + "name": "welcome_button", + "value": "#FFFFFF" + }, + { + "name": "welcome_button_label", + "value": "#171917" + }, + { + "name": "welcome_secondary", + "value": "#B9BCB9" } ] } diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/dark/media/openbitfun_start_window.png b/src/apps/mobile/harmonyos/entry/src/main/resources/dark/media/openbitfun_start_window.png new file mode 100644 index 0000000000..0bf92c7847 Binary files /dev/null and b/src/apps/mobile/harmonyos/entry/src/main/resources/dark/media/openbitfun_start_window.png differ diff --git a/src/apps/mobile/harmonyos/entry/src/test/ConversationPresentationUnit.test.ets b/src/apps/mobile/harmonyos/entry/src/test/ConversationPresentationUnit.test.ets index 736ce5aa4f..bd42c57644 100644 --- a/src/apps/mobile/harmonyos/entry/src/test/ConversationPresentationUnit.test.ets +++ b/src/apps/mobile/harmonyos/entry/src/test/ConversationPresentationUnit.test.ets @@ -1,3 +1,4 @@ +import { AccountLoginErrorPolicy } from '../main/ets/pages/policy/AccountLoginErrorPolicy'; import { describe, it, expect } from '@ohos/hypium'; import { RemoteI18n } from '../main/ets/i18n/RemoteI18n'; import { ChatComposerPolicy, ComposerPrimaryAction } from '../main/ets/services/ChatComposerPolicy'; @@ -50,6 +51,8 @@ import { DetectedUrlAction } from '../main/ets/services/ConnectScanDecisionPolicy'; +interface LoginFailureFixture { code?: number; statusCode?: number; } + export default function conversationPresentationUnitTest() { describe('HarnessProfilePolicy', () => { it('maps mobile execution levels to canonical host Agents', 0, () => { @@ -712,7 +715,34 @@ export default function conversationPresentationUnitTest() { }); }); + describe('AccountLoginErrorPolicy', () => { + it('uses actionable copy for SDK transport failures', 0, () => { + expect(AccountLoginErrorPolicy.messageKey({ code: 2300006 } as LoginFailureFixture)).assertEqual('account.errorNetwork'); + expect(AccountLoginErrorPolicy.messageKey({ code: 2300028 } as LoginFailureFixture)).assertEqual('account.errorTimeout'); + expect(AccountLoginErrorPolicy.messageKey({ code: 2300060 } as LoginFailureFixture)).assertEqual('account.errorSecureConnection'); + expect(AccountLoginErrorPolicy.messageKey({ statusCode: 429 } as LoginFailureFixture)).assertEqual('account.errorRateLimited'); + }); + it('does not expose unknown exception text or server bodies', 0, () => { + expect(AccountLoginErrorPolicy.messageKey(new Error('raw SDK JSON'))) + .assertEqual('remote.settings.accountLoginFailed'); + expect(AccountLoginErrorPolicy.messageKey({ statusCode: 500 } as LoginFailureFixture)) + .assertEqual('remote.settings.accountLoginFailed'); + }); + }); + describe('RemoteCompactHomePolicy', () => { + it('keeps the welcome entry without replacing a retained control target', 0, () => { + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('none', 'idle')).assertTrue(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('none', 'idle', true)).assertFalse(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('none', 'failed', true)).assertFalse(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('none', 'disconnected')).assertTrue(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('none', 'failed')).assertTrue(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('none', 'pairing')).assertTrue(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('account_device', 'disconnected')).assertFalse(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('account_device', 'reconnecting')).assertFalse(); + expect(RemoteCompactHomePolicy.shouldShowWelcomeHome('account_device', 'connected')).assertFalse(); + }); + it('keeps pick-session chrome only while the desktop link is actually connected', 0, () => { expect(RemoteCompactHomePolicy.shouldShowConnectHome('connected')).assertFalse(); }); diff --git a/src/apps/mobile/harmonyos/entry/src/test/LocalUnit.test.ets b/src/apps/mobile/harmonyos/entry/src/test/LocalUnit.test.ets index 609b4f895f..88aad63924 100644 --- a/src/apps/mobile/harmonyos/entry/src/test/LocalUnit.test.ets +++ b/src/apps/mobile/harmonyos/entry/src/test/LocalUnit.test.ets @@ -1,3 +1,4 @@ +import miniAppUnitTest from './MiniAppUnit.test'; import transportAndGeneralChatUnitTest from './TransportAndGeneralChatUnit.test'; import conversationStateUnitTest from './ConversationStateUnit.test'; import conversationPresentationUnitTest from './ConversationPresentationUnit.test'; @@ -11,6 +12,7 @@ import i18nUnitTest from './I18nUnit.test'; import watchProvisionUnitTest from './WatchProvisionUnit.test'; export default function localUnitTest() { + miniAppUnitTest(); i18nUnitTest(); watchProvisionUnitTest(); architectureUnitTest(); diff --git a/src/apps/mobile/harmonyos/entry/src/test/MiniAppUnit.test.ets b/src/apps/mobile/harmonyos/entry/src/test/MiniAppUnit.test.ets new file mode 100644 index 0000000000..b0be951882 --- /dev/null +++ b/src/apps/mobile/harmonyos/entry/src/test/MiniAppUnit.test.ets @@ -0,0 +1,81 @@ +import { describe, expect, it } from '@ohos/hypium'; +import { MiniAppDocument } from '../main/ets/services/MiniAppDocument'; +import { MiniAppViewModel } from '../main/ets/pages/viewmodel/MiniAppViewModel'; +import { MiniAppBridgeParams, MiniAppHost, MiniAppSummary } from '../main/ets/model/MiniAppModels'; + +class FakeMiniAppHost implements MiniAppHost { + calls: string[] = []; + pendingOpen?: (html: string) => void; + holdOpen: boolean = false; + stored: Map = new Map(); + async list(_locale: string): Promise { + return [{ id: 'game', name: 'Game', description: '' }, { id: 'regex', name: 'Regex', description: '' }]; + } + async document(_id: string): Promise { + if (this.holdOpen) return new Promise((resolve) => { this.pendingOpen = resolve; }); + return '

Game

'; + } + async call(appId: string, method: string, params: MiniAppBridgeParams): Promise { + this.calls.push(appId); + const key = `${appId}:${params.key}`; + if (method === 'storage.set') this.stored.set(key, params.value || null); + return this.stored.get(key) || null; + } +} + +export default function miniAppUnitTest() { + describe('MobileMiniApp', () => { + it('opens_offline_and_binds_storage_to_selected_app_across_reopen', 0, async () => { + const host = new FakeMiniAppHost(); + const model = new MiniAppViewModel(host); + await model.open(); + await model.select('game'); + await model.request('{"id":"save","method":"storage.set","params":{"key":"stats","value":{"wins":3}},"app_id":"attacker"}'); + expect(host.calls[0]).assertEqual('game'); + model.close(); + await model.open(); + await model.select('regex'); + expect((await model.request('{"id":"stale","method":"storage.set","params":{"key":"stats","value":3}}', 1)).includes('error')).assertTrue(); + expect((await model.request('{"id":"get","method":"storage.get","params":{"key":"stats"}}')).includes('"result":null')).assertTrue(); + await model.open(); + await model.select('game'); + expect((await model.request('{"id":"get","method":"storage.get","params":{"key":"stats"}}')).includes('"wins":3')).assertTrue(); + }); + + it('does_not_resurrect_a_closed_page_after_a_slow_open', 0, async () => { + const host = new FakeMiniAppHost(); + const model = new MiniAppViewModel(host); + await model.open(); + host.holdOpen = true; + const loading = model.select('game'); + model.close(); + host.pendingOpen?.('

Late

'); + await loading; + expect(model.state.visible).assertFalse(); + expect(model.state.document).assertEqual(''); + expect(model.state.loading).assertFalse(); + }); + + it('rejects_unknown_apps_closed_pages_and_unsupported_methods', 0, async () => { + const host = new FakeMiniAppHost(); + const model = new MiniAppViewModel(host); + await model.open(); + await model.select('attacker'); + expect(model.state.appId).assertEqual(''); + await model.select('game'); + expect((await model.request('{"id":"bad","method":"host_invoke","params":{}}')).includes('error')).assertTrue(); + model.close(); + expect((await model.request('{"id":"bad","method":"storage.get","params":{"key":"stats"}}')).includes('error')).assertTrue(); + expect(host.calls.length).assertEqual(0); + }); + + it('keeps_app_markup_outside_the_trusted_wrapper_and_disables_network', 0, () => { + const html = MiniAppDocument.build('', 'en-US'); + expect(html.includes('`; + const html = read('index.html') + .replace('', ``) + .replace('', () => `${appearance}${script(bridge)}`) + .replace('', () => `${script(js)}`); + const file = path.join(output, `${meta.id}.html`); + if (!fs.existsSync(file) || fs.readFileSync(file, 'utf8') !== html) fs.writeFileSync(file, html); + catalog.push({ id: meta.id, locales: meta.i18n.locales }); + } + const file = path.join(output, 'catalog.json'); + const value = JSON.stringify(catalog); + if (!fs.existsSync(file) || fs.readFileSync(file, 'utf8') !== value) fs.writeFileSync(file, value); +} +module.exports = { generate }; +if (require.main === module) generate(); diff --git a/src/apps/mobile/harmonyos/miniapps/mobile.css b/src/apps/mobile/harmonyos/miniapps/mobile.css new file mode 100644 index 0000000000..3c3fb42db4 --- /dev/null +++ b/src/apps/mobile/harmonyos/miniapps/mobile.css @@ -0,0 +1,32 @@ +/* Mobile-only layout adaptation; visual tokens still come from the shared theme. */ +.gomoku .board { touch-action: pan-y; } +@media (max-width: 720px) { + .gomoku { height: auto; min-height: 100vh; } + .gomoku .topbar { flex-wrap: wrap; gap: 12px; } + .gomoku .layout { flex: none; overflow: visible; grid-template-rows: auto auto; } + .gomoku .board-wrap { min-width: 0; } + .gomoku .board-frame { width: 100%; } + .gomoku .sidepanel { flex-direction: column; overflow: visible; } + .gomoku .sidepanel .card { min-width: 0; } + .gomoku .seg__btn, .gomoku .btn { min-height: 44px; } +} + +/* The desktop stage clips a fixed-height canvas. Results must keep their + * intrinsic height and scroll inside the mobile WebView, including wide hosts. */ +.div-app > .header, .div-app > .footer { flex-shrink: 0; } +.div-app > .stage { overflow-x: hidden; overflow-y: auto; } +.div-app .result { flex-shrink: 0; align-self: flex-start; } +@media (max-width: 720px) { + .div-app .result { display: flex; flex-direction: column; gap: 24px; } + .div-app .card-front, .div-app .result__panels { width: 100%; flex-shrink: 0; } + .div-app > .header { flex-wrap: wrap; gap: 8px; padding: 12px 16px; } + .div-app .header__title { font-size: 14px; letter-spacing: 3px; } + .div-app .header__date { font-size: 12px; letter-spacing: 1px; } + .div-app > .footer { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; } + .div-app .link-btn { min-height: 44px; justify-content: center; flex-shrink: 0; } + .div-app .footer__hint { font-size: 11px; letter-spacing: 0; text-align: center; } +} +@media (max-width: 880px) { + .div-app .lucky__cell:nth-child(3) { grid-column: 1 / -1; } + .div-app .lucky__value { white-space: normal; overflow-wrap: anywhere; } +} diff --git a/src/apps/mobile/harmonyos/miniapps/storage.test.cjs b/src/apps/mobile/harmonyos/miniapps/storage.test.cjs new file mode 100644 index 0000000000..a8eb6b788d --- /dev/null +++ b/src/apps/mobile/harmonyos/miniapps/storage.test.cjs @@ -0,0 +1,84 @@ +const { test } = require('node:test'); +const assert = require('node:assert/strict'); +const fs = require('node:fs/promises'); +const os = require('node:os'); +const path = require('node:path'); +const vm = require('node:vm'); +const ts = require('typescript'); + +// Exercise the production ArkTS owner against a real temporary filesystem. +// Only platform APIs are adapted; storage ordering and path policy are unchanged. +async function hostFixture(t) { + const directory = await fs.mkdtemp(path.join(os.tmpdir(), 'builtin-miniapp-')); + t.after(() => fs.rm(directory, { recursive: true, force: true })); + const handles = new Map(); + let failWrite = false; + const io = { + OpenMode: { CREATE: 1, READ_WRITE: 2, TRUNC: 4 }, + readText: async file => { + try { return await fs.readFile(file, 'utf8'); } + catch (error) { if (error.code === 'ENOENT') error.code = 13900002; throw error; } + }, + mkdir: file => fs.mkdir(file, { recursive: true }), + open: async file => { const handle = await fs.open(file, 'w'); handles.set(handle.fd, handle); return handle; }, + write: async (fd, value) => { if (failWrite) throw Error('disk full'); await handles.get(fd).writeFile(value); }, + fsync: fd => handles.get(fd).sync(), + close: async handle => { handles.delete(handle.fd); await handle.close(); }, + rename: fs.rename + }; + const source = await fs.readFile(path.resolve(__dirname, '../entry/src/main/ets/services/BuiltinMiniAppHost.ets'), 'utf8'); + const exports = {}; + vm.runInNewContext(ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS } }).outputText, { + exports, + require: name => { + if (name === '@kit.CoreFileKit') return { fileIo: io }; + if (name.endsWith('RemoteI18n')) return { RemoteI18n: { t: key => key } }; + return {}; + } + }); + const create = () => new exports.BuiltinMiniAppHost(() => ({ filesDir: directory })); + return { host: create(), create, directory, failWrite: () => { failWrite = true; } }; +} + +test('legacy records and unknown fields survive read/reopen; apps remain isolated', async t => { + const fixture = await hostFixture(t); + const dir = path.join(fixture.directory, 'miniapps'); + await fs.mkdir(dir); + const record = '{"wins":3,"future_field":{"keep":true}}'; + const file = path.join(dir, 'builtin-gomoku-stats.json'); + await fs.writeFile(file, record); + const result = await fixture.create().call('builtin-gomoku', 'storage.get', { key: 'stats' }); + assert.equal(JSON.stringify(result), record); + assert.equal(await fs.readFile(file, 'utf8'), record); + assert.equal(await fixture.host.call('builtin-daily-divination', 'storage.get', { key: 'lastReading' }), null); + await assert.rejects(fixture.host.call('builtin-daily-divination', 'storage.get', { key: 'stats' })); + await assert.rejects(fixture.host.call('../escape', 'storage.get', { key: 'stats' })); +}); + +test('corrupt records return errors without removing or resetting data', async t => { + const fixture = await hostFixture(t); + const dir = path.join(fixture.directory, 'miniapps'); + await fs.mkdir(dir); + const file = path.join(dir, 'builtin-gomoku-stats.json'); + await fs.writeFile(file, '{broken'); + await assert.rejects(fixture.host.call('builtin-gomoku', 'storage.get', { key: 'stats' })); + assert.equal(await fs.readFile(file, 'utf8'), '{broken'); +}); + +test('queued saves are durable across host recreation and retain large regex input', async t => { + const fixture = await hostFixture(t); + const value = { text: 'x'.repeat(20000), flags: ['g'], future: true }; + const first = fixture.host.call('builtin-regex-playground', 'storage.set', { key: 'regex-state', value: {} }); + const second = fixture.host.call('builtin-regex-playground', 'storage.set', { key: 'regex-state', value }); + await Promise.all([first, second]); + const stored = await fixture.create().call('builtin-regex-playground', 'storage.get', { key: 'regex-state' }); + assert.equal(JSON.stringify(stored), JSON.stringify(value)); +}); + +test('failed writes preserve the last saved record and do not poison reads', async t => { + const fixture = await hostFixture(t); + await fixture.host.call('builtin-gomoku', 'storage.set', { key: 'stats', value: { wins: 1 } }); + fixture.failWrite(); + await assert.rejects(fixture.host.call('builtin-gomoku', 'storage.set', { key: 'stats', value: { wins: 2 } }), /disk full/); + assert.equal((await fixture.host.call('builtin-gomoku', 'storage.get', { key: 'stats' })).wins, 1); +}); diff --git a/src/apps/mobile/ios/OpenBitFun.xcodeproj/project.pbxproj b/src/apps/mobile/ios/OpenBitFun.xcodeproj/project.pbxproj index b6f44bc2e6..14d11afa9e 100644 --- a/src/apps/mobile/ios/OpenBitFun.xcodeproj/project.pbxproj +++ b/src/apps/mobile/ios/OpenBitFun.xcodeproj/project.pbxproj @@ -7,6 +7,7 @@ objects = { /* Begin PBXBuildFile section */ + A90000000000000000000001 /* StartupBrandReveal.swift in Sources */ = {isa = PBXBuildFile; fileRef = B90000000000000000000001; }; A10000000000000000000001 /* OpenBitFunApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = B10000000000000000000001 /* OpenBitFunApp.swift */; }; A10000000000000000000002 /* MobileAppModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = B10000000000000000000002 /* MobileAppModel.swift */; }; A10000000000000000000003 /* OpenBitFunTheme.swift in Sources */ = {isa = PBXBuildFile; fileRef = B10000000000000000000003 /* OpenBitFunTheme.swift */; }; @@ -53,6 +54,7 @@ /* End PBXContainerItemProxy section */ /* Begin PBXFileReference section */ + B90000000000000000000001 /* StartupBrandReveal.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OpenBitFun/Features/Shell/StartupBrandReveal.swift; sourceTree = SOURCE_ROOT; }; B10000000000000000000000 /* OpenBitFun.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = OpenBitFun.app; sourceTree = BUILT_PRODUCTS_DIR; }; B10000000000000000000001 /* OpenBitFunApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OpenBitFunApp.swift; sourceTree = ""; }; B10000000000000000000002 /* MobileAppModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MobileAppModel.swift; sourceTree = ""; }; @@ -111,7 +113,7 @@ D10000000000000000000014 /* Pairing */ = {isa = PBXGroup; children = (B10000000000000000000033 /* PairingSheet.swift */); path = Pairing; sourceTree = ""; }; D10000000000000000000015 /* Account */ = {isa = PBXGroup; children = (B10000000000000000000035 /* AccountSettingsView.swift */); path = Account; sourceTree = ""; }; D10000000000000000000004 /* Chat */ = {isa = PBXGroup; children = (B10000000000000000000030 /* ConversationHomeViews.swift */, B10000000000000000000005 /* ConversationHeader.swift */, B10000000000000000000006 /* ChatTimelineView.swift */, B10000000000000000000007 /* ComposerBar.swift */); path = Chat; sourceTree = ""; }; - D10000000000000000000005 /* Shell */ = {isa = PBXGroup; children = (B10000000000000000000003 /* OpenBitFunTheme.swift */, B10000000000000000000004 /* SidebarView.swift */, B10000000000000000000008 /* MobileShellView.swift */, B10000000000000000000019 /* SessionActionComponents.swift */, B10000000000000000000020 /* RemoteCreateSessionView.swift */, B10000000000000000000021 /* RemoteFilePreviewView.swift */, B10000000000000000000022 /* RemoteSettingsViews.swift */); path = Shell; sourceTree = ""; }; + D10000000000000000000005 /* Shell */ = {isa = PBXGroup; children = (B90000000000000000000001 /* StartupBrandReveal.swift */, B10000000000000000000003 /* OpenBitFunTheme.swift */, B10000000000000000000004 /* SidebarView.swift */, B10000000000000000000008 /* MobileShellView.swift */, B10000000000000000000019 /* SessionActionComponents.swift */, B10000000000000000000020 /* RemoteCreateSessionView.swift */, B10000000000000000000021 /* RemoteFilePreviewView.swift */, B10000000000000000000022 /* RemoteSettingsViews.swift */); path = Shell; sourceTree = ""; }; D10000000000000000000011 /* Resources */ = {isa = PBXGroup; children = (B10000000000000000000016 /* Localizable.xcstrings */); path = Resources; sourceTree = ""; }; D10000000000000000000016 /* Presentation */ = {isa = PBXGroup; children = (D10000000000000000000018 /* Models */); path = Presentation; sourceTree = ""; }; D10000000000000000000018 /* Models */ = {isa = PBXGroup; children = (B10000000000000000000036 /* MobilePresentationModels.swift */); path = Models; sourceTree = ""; }; @@ -132,7 +134,7 @@ /* End PBXProject section */ /* Begin PBXSourcesBuildPhase section */ - C10000000000000000000002 /* Sources */ = {isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = (A10000000000000000000041, A10000000000000000000040, A10000000000000000000001, A10000000000000000000002, A10000000000000000000003, A10000000000000000000004, A10000000000000000000005, A10000000000000000000006, A10000000000000000000007, A10000000000000000000008, A10000000000000000000010, A10000000000000000000013, A10000000000000000000014, A10000000000000000000015, A10000000000000000000017, A10000000000000000000018, A10000000000000000000019, A10000000000000000000020, A10000000000000000000021, A10000000000000000000022, A10000000000000000000024, A10000000000000000000025, A10000000000000000000026, A10000000000000000000027, A10000000000000000000028, A10000000000000000000029, A10000000000000000000030, A10000000000000000000031, A10000000000000000000032, A10000000000000000000033, A10000000000000000000034, A10000000000000000000035, A10000000000000000000036, A10000000000000000000037, A10000000000000000000038); runOnlyForDeploymentPostprocessing = 0; }; + C10000000000000000000002 /* Sources */ = {isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = (A90000000000000000000001, A10000000000000000000041, A10000000000000000000040, A10000000000000000000001, A10000000000000000000002, A10000000000000000000003, A10000000000000000000004, A10000000000000000000005, A10000000000000000000006, A10000000000000000000007, A10000000000000000000008, A10000000000000000000010, A10000000000000000000013, A10000000000000000000014, A10000000000000000000015, A10000000000000000000017, A10000000000000000000018, A10000000000000000000019, A10000000000000000000020, A10000000000000000000021, A10000000000000000000022, A10000000000000000000024, A10000000000000000000025, A10000000000000000000026, A10000000000000000000027, A10000000000000000000028, A10000000000000000000029, A10000000000000000000030, A10000000000000000000031, A10000000000000000000032, A10000000000000000000033, A10000000000000000000034, A10000000000000000000035, A10000000000000000000036, A10000000000000000000037, A10000000000000000000038); runOnlyForDeploymentPostprocessing = 0; }; C20000000000000000000002 /* Sources */ = {isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = (A20000000000000000000001 /* RemoteCodeSessionSendUITests.swift in Sources */); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXSourcesBuildPhase section */ diff --git a/src/apps/mobile/ios/OpenBitFun/App/OpenBitFunApp.swift b/src/apps/mobile/ios/OpenBitFun/App/OpenBitFunApp.swift index 59e21911b0..675360e021 100644 --- a/src/apps/mobile/ios/OpenBitFun/App/OpenBitFunApp.swift +++ b/src/apps/mobile/ios/OpenBitFun/App/OpenBitFunApp.swift @@ -2,6 +2,7 @@ import SwiftUI @main struct OpenBitFunApp: App { + @State private var showStartupBrand = true @State private var notificationOnboardingOpen = false @StateObject private var model = MobileLaunchConfiguration.makeModel() @Environment(\.scenePhase) private var scenePhase @@ -13,9 +14,16 @@ struct OpenBitFunApp: App { MobileDesignGallery(scenario: scenario) .preferredColorScheme(scenario.appearance == "dark" ? .dark : .light) } else { - MobileShellView(model: model) - .task { - notificationOnboardingOpen = await TaskCompletionNotifier.shouldOfferOnboarding() + ZStack { + MobileShellView(model: model) + if showStartupBrand { + StartupBrandReveal { showStartupBrand = false } + } + } + .task(id: showStartupBrand) { + if !showStartupBrand { + notificationOnboardingOpen = await TaskCompletionNotifier.shouldOfferOnboarding() + } } .alert(model.localized("开启任务完成提醒"), isPresented: $notificationOnboardingOpen) { Button(model.localized("稍后"), role: .cancel) { @@ -27,7 +35,10 @@ struct OpenBitFunApp: App { } message: { Text(model.localized("允许 OpenBitFun 在任务完成时发送通知。你可以稍后在系统设置中更改。")) } - .onChange(of: scenePhase) { model.handleScenePhase($0) } + .onChange(of: scenePhase) { phase in + if phase == .background { showStartupBrand = false } + model.handleScenePhase(phase) + } .environment(\.locale, Locale(identifier: model.appLanguage.rawValue)) } } diff --git a/src/apps/mobile/ios/OpenBitFun/Features/DesignSystem/GeneratedMobileDesignTokens.swift b/src/apps/mobile/ios/OpenBitFun/Features/DesignSystem/GeneratedMobileDesignTokens.swift index 33590ccd7b..f6b3dd516c 100644 --- a/src/apps/mobile/ios/OpenBitFun/Features/DesignSystem/GeneratedMobileDesignTokens.swift +++ b/src/apps/mobile/ios/OpenBitFun/Features/DesignSystem/GeneratedMobileDesignTokens.swift @@ -65,6 +65,11 @@ enum MobileDesignColors { static let codeConstant = dynamic(light: 0xFFA04444, dark: 0xFFE79A9A) static let codeProperty = dynamic(light: 0xFF466D78, dark: 0xFF9CC8D0) static let codeTargetBg = dynamic(light: 0xFFFFF1BE, dark: 0xFF5A4E24) + static let brandDot = dynamic(light: 0xFF16B9CE, dark: 0xFF16B9CE) + static let welcomeDock = dynamic(light: 0xFF171917, dark: 0xFF171917) + static let welcomeButton = dynamic(light: 0xFFFFFFFF, dark: 0xFFFFFFFF) + static let welcomeButtonLabel = dynamic(light: 0xFF171917, dark: 0xFF171917) + static let welcomeSecondary = dynamic(light: 0xFFB9BCB9, dark: 0xFFB9BCB9) private static func dynamic(light: UInt32, dark: UInt32) -> Color { Color(uiColor: UIColor { traits in @@ -99,6 +104,7 @@ enum MobileDesignTypography { static let labelLarge = MobileTypographyToken(size: 15, lineHeight: 20, weight: .medium, textStyle: .subheadline) static let labelMedium = MobileTypographyToken(size: 14, lineHeight: 18, weight: .medium, textStyle: .footnote) static let labelSmall = MobileTypographyToken(size: 12, lineHeight: 16, weight: .regular, textStyle: .caption1) + static let brandWordmark = MobileTypographyToken(size: 42, lineHeight: 56, weight: .medium, textStyle: .largeTitle) } enum MobileDesignGeometry { @@ -161,6 +167,22 @@ enum MobileDesignGeometry { static let modelListBottomPadding: CGFloat = 16 static let modelEmptyAccountHeight: CGFloat = 80 static let modelEditorHeight: CGFloat = 560 + static let welcomeMaxWidth: CGFloat = 520 + static let welcomeGutter: CGFloat = 25 + static let welcomeHeaderHeight: CGFloat = 58 + static let welcomeButtonHeight: CGFloat = 49 + static let welcomeButtonGap: CGFloat = 11 + static let welcomeDockRadius: CGFloat = 30 + static let welcomeDockBottom: CGFloat = 39 + static let welcomeMarkSize: CGFloat = 92 + static let welcomeWordSize: CGFloat = 34 + static let welcomeStageHeight: CGFloat = 220 + static let welcomeHeaderWordSize: CGFloat = 17 + static let recentHomeGutter: CGFloat = 24 + static let recentHomeMarkSize: CGFloat = 132 + static let recentHomeTitleSize: CGFloat = 25 + static let recentHomeMaxWidth: CGFloat = 560 + static let recentHomeRowPadding: CGFloat = 18 } enum MobileDesignBreakpoints { @@ -172,4 +194,5 @@ enum MobileDesignBreakpoints { enum MobileDesignMotion { static let quick: CGFloat = 180 static let structure: CGFloat = 220 + static let startupBrand: CGFloat = 6800 } diff --git a/src/apps/mobile/ios/OpenBitFun/Features/Remote/RemoteHomeViews.swift b/src/apps/mobile/ios/OpenBitFun/Features/Remote/RemoteHomeViews.swift index 43924fd297..eb087908e9 100644 --- a/src/apps/mobile/ios/OpenBitFun/Features/Remote/RemoteHomeViews.swift +++ b/src/apps/mobile/ios/OpenBitFun/Features/Remote/RemoteHomeViews.swift @@ -1,100 +1,80 @@ import OpenBitFunMobileCore import SwiftUI -struct RemoteHomeView: View { - @ObservedObject var model: MobileAppModel - - var body: some View { - VStack(spacing: 12) { - Spacer() - ZStack { - Image(systemName: "desktopcomputer") - .font(.system(size: 42, weight: .medium)) - .foregroundStyle(OpenBitFunTheme.ink) - } - .frame(width: 74, height: 74) - .background(OpenBitFunTheme.card) - .overlay(RoundedRectangle(cornerRadius: 24).stroke(OpenBitFunTheme.line, lineWidth: 1)) - .clipShape(RoundedRectangle(cornerRadius: 24)) - Text(model.localized("连接桌面端")) - .font(MobileDesignTypography.headlineSmall.font) - .foregroundStyle(OpenBitFunTheme.ink) - Text(model.localized("扫描桌面端显示的二维码，开始远程处理任务。")) - .font(MobileDesignTypography.bodySmall.font) - .foregroundStyle(OpenBitFunTheme.muted) - .multilineTextAlignment(.center) - .lineSpacing(7) - .padding(.horizontal, 20) - Button(model.localized("连接")) { model.connectRemote() } - .font(MobileDesignTypography.titleSmall.font) - .foregroundStyle(OpenBitFunTheme.contentOnAction) - .frame(width: 136, height: 44) - .background(MobileDesignColors.primaryAction) - .clipShape(Capsule()) - Spacer() - } - .frame(maxWidth: .infinity, maxHeight: .infinity) - .padding(.horizontal, 20) - .padding(.bottom, 48) - .background(OpenBitFunTheme.page) - } -} - struct RemoteConnectedHomeView: View { @ObservedObject var model: MobileAppModel + var onBrowse: (() -> Void)? + private var recent: [ChatSession] { + Array(model.remoteSessions.filter { $0.status != "archived" }.sorted { + timestamp($0) > timestamp($1) + }.prefix(3)) + } + private func timestamp(_ session: ChatSession) -> Int64 { + let updated = SessionTimePresentation.shared.timestampMs(value: session.updatedLabel)?.int64Value ?? 0 + return updated > 0 ? updated : SessionTimePresentation.shared.timestampMs(value: session.createdAt)?.int64Value ?? 0 + } + private func context(_ session: ChatSession) -> String { + let device = model.accountDevices.first { $0.id == session.deviceKey }?.name ?? model.accountDeviceName ?? "" + let workspace = session.workspaceName.flatMap { $0.isEmpty ? nil : $0 } + ?? session.workspacePath?.split(separator: "/").last.map(String.init) ?? "" + return [device, workspace].filter { !$0.isEmpty }.joined(separator: " · ") + } + private func browse() { + if let onBrowse { onBrowse() } + else { model.drawerOpen = true } + } var body: some View { - VStack(spacing: 10) { - Spacer() - Text(model.localized(model.remoteSessions.isEmpty ? "还没有远程对话" : "选择一个会话")) - .font(MobileDesignTypography.headlineMedium.font) - .foregroundStyle(OpenBitFunTheme.ink) - Text(model.localized( - model.remoteSessions.isEmpty - ? "新建聊天后，可以从手机继续处理桌面端任务。" - : "从侧边栏打开会话，或新建一个。" - )) - .font(MobileDesignTypography.bodyMedium.font) - .foregroundStyle(OpenBitFunTheme.muted) - .multilineTextAlignment(.center) - .lineLimit(2) - .frame(maxWidth: 280) - Group { - if model.selectedRemoteWorkspaceKind != "assistant", - HarnessProfilePolicy.shared.supported(capabilities: model.remoteHostCapabilities) { - Menu { - ForEach([HarnessProfile.minimal, .standard, .ultimate], id: \.name) { profile in - Button { model.createRemoteSessionFromHome(agentType: profile.agentType) } label: { - HarnessProfileLabel(model: model, profile: profile) + ScrollView { + VStack(alignment: .leading, spacing: 0) { + WelcomeBrandFlowView(sweep: true) + .frame(width: MobileDesignGeometry.recentHomeMarkSize, height: MobileDesignGeometry.recentHomeMarkSize) + .frame(maxWidth: .infinity) + .padding(.top, 20) + Text(model.localized("今天，想做点什么？")) + .font(.system(size: MobileDesignGeometry.recentHomeTitleSize, weight: .medium)) + .multilineTextAlignment(.center).frame(maxWidth: .infinity) + .padding(.top, 10).padding(.bottom, 32) + if model.remoteConversationLoading { ProgressView().padding(.bottom, 16) } + if !model.remoteConnected { + Text(model.localized("连接电脑后，继续你的对话。")) + .font(.system(size: 13)).foregroundStyle(OpenBitFunTheme.muted) + Button(model.localized("连接电脑")) { model.connectRemote() }.padding(.vertical, 12) + } + HStack { + Text(model.localized("最近会话")) + Spacer() + Button(model.localized("全部会话"), action: browse) + }.font(.system(size: 12)).foregroundStyle(OpenBitFunTheme.muted) + ForEach(recent) { session in + Button { + if session.deviceKey != nil { model.selectDirectorySession(session) } + else { model.select(session) } + } label: { + HStack(spacing: 12) { + VStack(alignment: .leading, spacing: 6) { + Text(session.title).font(.system(size: 15)).lineLimit(2) + Text(context(session)).font(.system(size: 11)) + .foregroundStyle(OpenBitFunTheme.muted).lineLimit(1) } - } - } label: { createLabel } - } else { - Button { model.createRemoteSessionFromHome() } label: { createLabel } + Spacer(minLength: 0) + Image(systemName: "chevron.right").font(.system(size: 12)) + .foregroundStyle(OpenBitFunTheme.muted) + }.padding(.vertical, MobileDesignGeometry.recentHomeRowPadding) + .contentShape(Rectangle()) + }.buttonStyle(.plain) + Rectangle().fill(OpenBitFunTheme.line).frame(height: 0.5) } - } - .buttonStyle(.plain) - .disabled(model.remoteCreateSubmitting || !model.remoteCreateInteraction.canSubmit) - - Spacer() - } - .frame(maxWidth: .infinity, maxHeight: .infinity) - .padding(.horizontal, 24) - .padding(.bottom, 56) - .background(OpenBitFunTheme.page) - } - private var createLabel: some View { - HStack(spacing: 8) { - if model.remoteCreateSubmitting { - ProgressView().controlSize(.small).tint(OpenBitFunTheme.contentOnAction) - } - Text(model.localized(model.remoteCreateSubmitting ? "正在加载" : "新建会话")) + if recent.isEmpty && !model.remoteConversationLoading { + Text(model.localized("还没有可继续的对话")) + .font(.system(size: 13)).foregroundStyle(OpenBitFunTheme.muted).padding(.vertical, 18) } - .font(MobileDesignTypography.titleSmall.font) - .foregroundStyle(OpenBitFunTheme.contentOnAction) - .frame(width: 148, height: 46) - .background(OpenBitFunTheme.accent) - .clipShape(Capsule()) + + } + .padding(.horizontal, MobileDesignGeometry.recentHomeGutter).padding(.bottom, 28) + .frame(maxWidth: MobileDesignGeometry.recentHomeMaxWidth) + .frame(maxWidth: .infinity, alignment: .center) + }.foregroundStyle(OpenBitFunTheme.ink).background(OpenBitFunTheme.page) } } @@ -130,3 +110,99 @@ struct ConnectionStatusBar: View { } + + +/// Signed-out home with a fixed contour mark and looping desktop phrases. +struct WelcomeHomeView: View { + @ObservedObject var model: MobileAppModel + @Environment(\.accessibilityReduceMotion) private var reduceMotion + @Environment(\.scenePhase) private var scenePhase + @State private var started = Date() + private var phrases: [String] { ["OpenBitFun", model.localized("干点活儿"), model.localized("玩点花样"), model.localized("随你发挥")] } + + var body: some View { + GeometryReader { geometry in + let height = max(540, geometry.size.height) + ScrollView(showsIndicators: false) { + VStack(spacing: 0) { + HStack { + HStack(spacing: 0) { ForEach(Array("OpenBitFun".enumerated()), id: \.offset) { _, c in welcomeGlyph(c, size: MobileDesignGeometry.welcomeHeaderWordSize) } } + Spacer() + } + .padding(.horizontal, MobileDesignGeometry.welcomeGutter) + .frame(height: MobileDesignGeometry.welcomeHeaderHeight) + TimelineView(.animation(minimumInterval: 1.0 / 60, paused: reduceMotion || scenePhase != .active)) { timeline in + let pose = phrase(at: timeline.date) + VStack(spacing: 29) { + WelcomeBrandFlowView() + .frame(width: MobileDesignGeometry.welcomeMarkSize, height: MobileDesignGeometry.welcomeMarkSize) + HStack(spacing: 0) { + ForEach(Array(pose.word.enumerated()), id: \.offset) { index, letter in + let p = min(1, max(0, (pose.time - 180 - Double(index) * 55) / 800)) + let ease = 1 - pow(1-p, 3) + let bump = sin(p * .pi) * (1-p) + let out = min(1, max(0, (pose.time - duration(pose.word) + 650) / 650)) + welcomeGlyph(letter, size: pose.word.count > 12 ? 27 : MobileDesignGeometry.welcomeWordSize) + .opacity(min(1,p*3)*(1-out)) + .scaleEffect(1+bump*0.045) + .offset(x: (1-ease)*38-bump*5-out*out*30) + } + } + .frame(height: 48) + .accessibilityHidden(true) + } + .offset(y: -28) + .frame(maxWidth: .infinity) + .frame(height: max(270,height-MobileDesignGeometry.welcomeHeaderHeight-228)) + } + VStack(spacing: MobileDesignGeometry.welcomeButtonGap) { + welcomeAction(model.accountUser == nil ? "登录账号" : "连接电脑", symbol: nil) { + if model.accountUser == nil { model.accountSheetOpen = true } + else { model.connectRemote() } + } + welcomeAction("扫码连接电脑", symbol: "viewfinder") { model.scanRemote() } + // This host does not yet ship the native MiniApp destination. + Color.clear.frame(height: 44).accessibilityHidden(true) + } + .padding(.horizontal, MobileDesignGeometry.welcomeGutter) + .padding(.top, MobileDesignGeometry.welcomeGutter) + .padding(.bottom, MobileDesignGeometry.welcomeDockBottom) + .background(MobileDesignColors.welcomeDock) + .clipShape(UnevenRoundedRectangle(topLeadingRadius: MobileDesignGeometry.welcomeDockRadius, topTrailingRadius: MobileDesignGeometry.welcomeDockRadius)) + } + .frame(maxWidth: MobileDesignGeometry.welcomeMaxWidth) + .frame(maxWidth: .infinity) + } + } + .foregroundStyle(OpenBitFunTheme.ink) + .background(OpenBitFunTheme.page) + .onChange(of: scenePhase) { if $0 == .active { started = Date() } } + } + + private func welcomeGlyph(_ letter: Character, size: CGFloat) -> some View { + Text(letter == "i" ? "ı" : String(letter)).font(.system(size: size, weight: .semibold)) + .overlay(alignment: .top) { + if letter == "i" { Circle().fill(MobileDesignColors.brandDot).frame(width: size*0.14, height: size*0.14).offset(y: size*0.25) } + } + } + + private func welcomeAction(_ title: String, symbol: String?, action: @escaping () -> Void) -> some View { + Button(action: action) { + HStack(spacing: 10) { + if let symbol { Image(systemName: symbol).font(.system(size: 20, weight: .regular)) } + Text(model.localized(title)).font(.system(size: 14, weight: .semibold)) + } + .frame(maxWidth: .infinity, minHeight: MobileDesignGeometry.welcomeButtonHeight) + .foregroundStyle(MobileDesignColors.welcomeButtonLabel) + .background(MobileDesignColors.welcomeButton) + .clipShape(Capsule()) + }.buttonStyle(.plain) + } + private func duration(_ word: String) -> Double { 250+Double(word.count)*185+(word == "OpenBitFun" ? 600 : 0)+1800+650 } + private func phrase(at date: Date) -> (word: String,time: Double) { + if reduceMotion { return ("OpenBitFun",2700) } + var time = max(0,date.timeIntervalSince(started)*1000).truncatingRemainder(dividingBy: phrases.reduce(0) { $0+duration($1) }) + for word in phrases { if time < duration(word) { return (word,time) };time -= duration(word) } + return (phrases[0],0) + } +} diff --git a/src/apps/mobile/ios/OpenBitFun/Features/Shell/MobileShellView.swift b/src/apps/mobile/ios/OpenBitFun/Features/Shell/MobileShellView.swift index e3b75d892c..31e267ecab 100644 --- a/src/apps/mobile/ios/OpenBitFun/Features/Shell/MobileShellView.swift +++ b/src/apps/mobile/ios/OpenBitFun/Features/Shell/MobileShellView.swift @@ -106,6 +106,10 @@ struct MobileShellView: View { } + private var showsWelcomeHome: Bool { + model.surface == .remote && model.accountUser == nil && !model.remoteConnected && model.remoteExpectedDeviceKey == nil + } + @ViewBuilder private func adaptiveSurface(viewportWidth: CGFloat, viewportHeight: CGFloat) -> some View { let width = Int32(max(0, viewportWidth.rounded(.down))) @@ -322,14 +326,16 @@ struct MobileShellView: View { sidebarActionLabel: String ) -> some View { VStack(spacing: 0) { + if !showsWelcomeHome { ConversationHeader( model: model, actionsOpen: $sessionActionsOpen, sidebarAction: sidebarAction, sidebarActionLabel: sidebarActionLabel ) + } if model.surface == .remote, - model.remoteSessionSelected, + model.remoteExpectedDeviceKey != nil, model.connectionPhase != .connected { ConnectionStatusBar( phase: model.connectionPhase, @@ -337,11 +343,10 @@ struct MobileShellView: View { onRetry: model.verifyRemoteConnection ) } - if model.surface == .remote && !model.remoteConnected { - RemoteHomeView(model: model) + if showsWelcomeHome { + WelcomeHomeView(model: model) } else if model.surface == .remote && !model.remoteSessionSelected { - RemoteConnectedHomeView(model: model) - ComposerBar(model: model) + RemoteConnectedHomeView(model: model, onBrowse: sidebarAction) } else { ZStack { ChatTimelineView(model: model) diff --git a/src/apps/mobile/ios/OpenBitFun/Features/Shell/StartupBrandReveal.swift b/src/apps/mobile/ios/OpenBitFun/Features/Shell/StartupBrandReveal.swift new file mode 100644 index 0000000000..965164d149 --- /dev/null +++ b/src/apps/mobile/ios/OpenBitFun/Features/Shell/StartupBrandReveal.swift @@ -0,0 +1,172 @@ +import SwiftUI + +/// Native rendering of the mobile startup_brand_reveal contract; no network dependencies. +struct StartupBrandReveal: View { + let onFinished: () -> Void + @Environment(\.accessibilityReduceMotion) private var reduceMotion + @State private var started = Date() + private let widths: [CGFloat] = [30,25,24,25,28,10,16,24,25,25] + private let letters = Array("OpenBıtFun") + + var body: some View { + GeometryReader { geometry in + TimelineView(.animation) { timeline in + let p = min(1, max(0, timeline.date.timeIntervalSince(started) / (MobileDesignMotion.startupBrand / 1000))) + let scale = min(1, max(0.1, (geometry.size.width - 32) / 280)) + ZStack { + OpenBitFunTheme.page + stage(progress: p) + .frame(width: 280, height: 240) + .scaleEffect(scale) + } + .frame(width: geometry.size.width, height: geometry.size.height) + .opacity(1 - smooth((p - 0.97) / 0.03)) + } + } + .ignoresSafeArea() + .contentShape(Rectangle()) + .onTapGesture { } + .accessibilityHidden(true) + .task { + guard !reduceMotion else { onFinished(); return } + started = Date() + do { + try await Task.sleep(nanoseconds: UInt64(MobileDesignMotion.startupBrand * 1_000_000)) + onFinished() + } catch { /* The overlay was removed or the scene backgrounded. */ } + } + .onChange(of: reduceMotion) { if $0 { onFinished() } } + } + + private func stage(progress p: Double) -> some View { + let t = min(p / 0.65 * 0.9, 0.9) + let settle = smooth((p - 0.66) / 0.19) + let mark = max(0, min(1, (p - 0.66) / 0.19)) + let q = mark - 1 + let markScale = 0.65 + 0.35 * (1 + 2.2*q*q*q + 1.2*q*q) + return ZStack(alignment: .topLeading) { + WelcomeBrandFlowView() + .frame(width: 92, height: 92) + .scaleEffect(markScale).opacity(ease(mark)) + .position(x: 140, y: 60) + Canvas { context, _ in + for i in 0.. CGFloat { 24 + widths.prefix(index).reduce(0, +) } + private func dotPose(t: Double, settle: Double) -> DotPose { + var dot = DotPose(x: 9, y: 110, sx: 1, sy: 1) + for i in 0..<10 { + let end = 0.19 + Double(i) * 0.048 + let begin = i == 0 ? end - 0.065 : end - 0.048 + let from = i == 0 ? 9 : x(i) + 10 + let to = x(i+1) + 10 + if t >= end { dot.x = to; continue } + if t >= begin { + let step = max(0, min(1, (t-begin)/(end-begin))) + let hop = max(0, min(1, (step-0.16)/0.84)) + let squash = sin(max(0, min(1, step/0.16)) * .pi) + dot.x = from + (to-from)*smooth(hop) + dot.y -= 4*hop*(1-hop)*(i == 0 ? 20 : 15) + dot.sx = 1+0.2*squash; dot.sy = 1-0.18*squash + } + break + } + if t >= 0.70 { + let flight = max(0, min(1, (t-0.70)/0.16)) + let travel = smooth(flight) + dot.x += (x(5)+5-dot.x)*travel + dot.y = 110-15*travel-sin(.pi*flight)*44 + dot.sx = 1+(7.35/9-1)*travel; dot.sy = dot.sx + if t > 0.86 && t < 0.9 { dot.y -= sin((t-0.86)/0.04 * .pi)*2 } + } + dot.y += 42*settle + return dot + } + private struct DotPose { var x: CGFloat; var y: CGFloat; var sx: CGFloat; var sy: CGFloat } + private func smooth(_ x: Double) -> Double { let v=max(0,min(1,x));return v*v*(3-2*v) } + private func ease(_ x: Double) -> Double { 1-pow(1-max(0,min(1,x)),3) } +} + + +/// Same fixed contour ribbon as desktop AboutBrandMark, with slow highlights. +struct WelcomeBrandFlowView: View { + var sweep = false + @Environment(\.accessibilityReduceMotion) private var reduceMotion + @Environment(\.scenePhase) private var scenePhase + private static let contours: [(Path, CGFloat)] = (0..<15).map { index in + let progress = CGFloat(index) / 14 + let radius = 79 + 23 * progress + let angle = (-60 - 30 * progress) * .pi / 180 + let vertices = (0..<6).map { vertex in + CGPoint(x: 128 + radius * cos(angle + CGFloat(vertex) * .pi / 3), + y: 128 + radius * sin(angle + CGFloat(vertex) * .pi / 3)) + } + var path = Path() + for i in 0..<6 { + let vertex = vertices[i], previous = vertices[(i+5)%6], next = vertices[(i+1)%6] + let entry = CGPoint(x: vertex.x+(previous.x-vertex.x)*0.16,y: vertex.y+(previous.y-vertex.y)*0.16) + let exit = CGPoint(x: vertex.x+(next.x-vertex.x)*0.16,y: vertex.y+(next.y-vertex.y)*0.16) + if i == 0 { path.move(to: entry) } else { path.addLine(to: entry) } + path.addQuadCurve(to: exit, control: vertex) + } + path.closeSubpath() + return (path,radius*5.83080081501503) + } + var body: some View { + TimelineView(.animation(minimumInterval: 1.0/30, paused: reduceMotion || scenePhase != .active)) { timeline in + let phase = timeline.date.timeIntervalSince1970.truncatingRemainder(dividingBy: 18)/18 + Canvas { context,size in + context.scaleBy(x: size.width/256,y: size.height/256) + for (index,contour) in Self.contours.enumerated() { + if sweep { + let progress = timeline.date.timeIntervalSince1970.truncatingRemainder(dividingBy: 5)/5 + let shift = reduceMotion ? 0 : (min(1, progress/0.75)*2-1)*256 + let stops: [Gradient.Stop] = [ + .init(color: OpenBitFunTheme.ink.opacity(0.16), location: 0), + .init(color: OpenBitFunTheme.ink.opacity(0.25), location: 0.46), + .init(color: OpenBitFunTheme.ink, location: 0.55), + .init(color: OpenBitFunTheme.ink.opacity(0.25), location: 0.65), + .init(color: OpenBitFunTheme.ink.opacity(0.16), location: 1) + ] + context.stroke(contour.0, with: .linearGradient(Gradient(stops: stops), + startPoint: CGPoint(x: shift, y: shift), endPoint: CGPoint(x: shift+256, y: shift+256)), lineWidth: 1.45) + continue + } + context.stroke(contour.0,with: .color(OpenBitFunTheme.ink.opacity(0.25)),lineWidth: 1) + if !reduceMotion { + for (layer,length) in [0.34,0.26,0.18].enumerated() { + let total=contour.1 + context.stroke(contour.0,with: .color(OpenBitFunTheme.ink.opacity([0.12,0.14,0.36][layer])), + style: StrokeStyle(lineWidth: 1,dash: [total*length/2,total*(1-length),total*length/2,0],dashPhase: -total*(phase+Double(index)*0.03))) + } + } + } + } + }.accessibilityHidden(true) + } +} diff --git a/src/apps/mobile/ios/OpenBitFun/Infrastructure/AccountFailureCopy.swift b/src/apps/mobile/ios/OpenBitFun/Infrastructure/AccountFailureCopy.swift index 46c0b06da2..23ca59a5d8 100644 --- a/src/apps/mobile/ios/OpenBitFun/Infrastructure/AccountFailureCopy.swift +++ b/src/apps/mobile/ios/OpenBitFun/Infrastructure/AccountFailureCopy.swift @@ -13,11 +13,11 @@ enum AccountFailureCopy { case "RATE_LIMITED": return "登录请求过多，请稍后重试" case "RELAY_UNAVAILABLE": - return "Relay 服务暂时不可用，请稍后重试" + return "登录服务暂时不可用，请稍后重试。" case "NETWORK": - return "网络连接失败，请检查网络和 relay 地址后重试" + return "暂时无法连接，请检查网络后重试。" case "TIMEOUT": - return "登录超时，请稍后重试" + return "连接超时，请检查网络后重试。" case "MALFORMED_RESPONSE": return "Relay 响应异常，请稍后重试或升级应用" case "SECURE_STORAGE": diff --git a/src/apps/mobile/ios/OpenBitFun/Resources/Localizable.xcstrings b/src/apps/mobile/ios/OpenBitFun/Resources/Localizable.xcstrings index 8278a03b5f..f13f7f572c 100644 --- a/src/apps/mobile/ios/OpenBitFun/Resources/Localizable.xcstrings +++ b/src/apps/mobile/ios/OpenBitFun/Resources/Localizable.xcstrings @@ -4146,7 +4146,7 @@ "en": { "stringUnit": { "state": "translated", - "value": "Scan to connect a computer" + "value": "Scan to connect" } } } @@ -8036,6 +8036,172 @@ } } } + }, + "登录账号": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Sign in" + } + } + } + }, + "干点活儿": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Get things done" + } + } + } + }, + "玩点花样": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Try something fun" + } + } + } + }, + "随你发挥": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Make it yours" + } + } + } + }, + "暂时无法连接，请检查网络后重试。": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Unable to connect. Check your connection and try again." + } + } + } + }, + "连接超时，请检查网络后重试。": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Connection timed out. Check your connection and try again." + } + } + } + }, + "登录服务暂时不可用，请稍后重试。": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Sign-in is temporarily unavailable. Try again later." + } + } + } + }, + "今天，想做点什么？": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "What would you like to do today?" + } + }, + "zh-Hans": { + "stringUnit": { + "state": "translated", + "value": "今天，想做点什么？" + } + } + } + }, + "最近会话": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Recent conversations" + } + }, + "zh-Hans": { + "stringUnit": { + "state": "translated", + "value": "最近会话" + } + } + } + }, + "浏览工作区": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Browse workspaces" + } + }, + "zh-Hans": { + "stringUnit": { + "state": "translated", + "value": "浏览工作区" + } + } + } + }, + "全部会话": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "All conversations" + } + }, + "zh-Hans": { + "stringUnit": { + "state": "translated", + "value": "全部会话" + } + } + } + }, + "还没有可继续的对话": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "No conversations to continue yet" + } + }, + "zh-Hans": { + "stringUnit": { + "state": "translated", + "value": "还没有可继续的对话" + } + } + } + }, + "连接电脑后，继续你的对话。": { + "localizations": { + "en": { + "stringUnit": { + "state": "translated", + "value": "Connect a computer to continue your conversations." + } + }, + "zh-Hans": { + "stringUnit": { + "state": "translated", + "value": "连接电脑后，继续你的对话。" + } + } + } } }, "version": "1.0" diff --git a/src/apps/mobile/ios/Testing/AccountFailureCopyTests.swift b/src/apps/mobile/ios/Testing/AccountFailureCopyTests.swift index b83c624a17..5b38853662 100644 --- a/src/apps/mobile/ios/Testing/AccountFailureCopyTests.swift +++ b/src/apps/mobile/ios/Testing/AccountFailureCopyTests.swift @@ -7,9 +7,9 @@ struct AccountFailureCopyTests { "INVALID_CREDENTIALS": "账号或密码错误", "AUTHENTICATION": "登录状态无效，请重新输入账号和密码", "RATE_LIMITED": "登录请求过多，请稍后重试", - "RELAY_UNAVAILABLE": "Relay 服务暂时不可用，请稍后重试", - "NETWORK": "网络连接失败，请检查网络和 relay 地址后重试", - "TIMEOUT": "登录超时，请稍后重试", + "RELAY_UNAVAILABLE": "登录服务暂时不可用，请稍后重试。", + "NETWORK": "暂时无法连接，请检查网络后重试。", + "TIMEOUT": "连接超时，请检查网络后重试。", "MALFORMED_RESPONSE": "Relay 响应异常，请稍后重试或升级应用", "SECURE_STORAGE": "无法访问系统安全存储，请稍后重试。", ] diff --git a/src/apps/mobile/shared/core-feature/src/commonMain/kotlin/com/openbitfun/mobile/core/feature/account/AccountUiState.kt b/src/apps/mobile/shared/core-feature/src/commonMain/kotlin/com/openbitfun/mobile/core/feature/account/AccountUiState.kt index e353cc5d35..b9c9683f52 100644 --- a/src/apps/mobile/shared/core-feature/src/commonMain/kotlin/com/openbitfun/mobile/core/feature/account/AccountUiState.kt +++ b/src/apps/mobile/shared/core-feature/src/commonMain/kotlin/com/openbitfun/mobile/core/feature/account/AccountUiState.kt @@ -74,13 +74,6 @@ public sealed interface AccountUiState { selectedDeviceName: String?, ) : this(userId, relayUrl, username, devices, selectedDeviceId, selectedDeviceName, false, null) - public constructor( - userId: String, - username: String, - devices: List, - selectedDeviceId: String?, - selectedDeviceName: String?, - ) : this(userId, username, com.openbitfun.mobile.core.transport.DEFAULT_CLOUD_RELAY_URL, devices, selectedDeviceId, selectedDeviceName) } public data class Failed public constructor( public val reason: AccountFailureReason,