Merge pull request #2700 from wgqqqqq/bitfun/refine-harmonyos-mobile-ui

feat(harmonyos): refine mobile UI and device navigation

Author: wgqqqqq

scripts/check-harmonyos-architecture.mjs

@@ -202,6 +202,16 @@ const conversationViewSource = fs.readFileSync(conversationViewPath, 'utf8');
 const conversationViewInputCount = [...conversationViewSource.matchAll(/^\s+@(Param|Event)\b/gm)].length;
 const wideConversationViewContract = conversationViewInputCount > 10 ?
   [`${relative(conversationViewPath)}:${conversationViewInputCount}`] : [];
+// SheetLayout may adapt cross-platform geometry for ArkUI, but it must not
+// become a second numeric source of truth for geometry already in the mobile
+// design contract. This deliberately checks ownership, not page-level sizes.
+const sheetLayoutPath = path.join(pagesRoot, 'components/SheetLayout.ets');
+const sheetLayoutSource = fs.readFileSync(sheetLayoutPath, 'utf8');
+const duplicateSheetGeometry =
+  !sheetLayoutSource.includes("from '../../generated/MobileDesignTokens'") ||
+  /export\s+const\s+SHEET_(?:HORIZONTAL_PADDING|HEADER_HEIGHT|ACTION_HEIGHT|TOP_RADIUS|SIDE_RADIUS)\s*:\s*number\s*=\s*\d/.test(
+    sheetLayoutSource
+  ) ? [relative(sheetLayoutPath)] : [];
 const cryptoDeclarationPath = path.join(
   repoRoot,
   'src/apps/mobile/harmonyos/entry/src/main/cpp/types/libbitfun_crypto/index.d.ts'
@@ -402,6 +412,7 @@ const expected = {
   snapshottedMessageBuilderInput: [],
   missingObservableTimelineRows: [],
   wideConversationViewContract: [],
+  duplicateSheetGeometry: [],
   synchronousArgon2Declaration: [],
   synchronousNativeArgon2: [],
   misplacedPresentationPolicies: []
@@ -440,6 +451,7 @@ const actual = {
   snapshottedMessageBuilderInput,
   missingObservableTimelineRows,
   wideConversationViewContract,
+  duplicateSheetGeometry,
   synchronousArgon2Declaration,
   synchronousNativeArgon2,
   misplacedPresentationPolicies

src/apps/mobile/android/app/src/main/kotlin/com/bitfun/mobile/app/ui/theme/generated/MobileDesignTokens.kt

@@ -10,8 +10,8 @@ import androidx.compose.ui.unit.sp
 internal object MobileDesignColors {
     object Light {
         val StartWindowBackground = Color(0xFFFFFFFF)
-        val PageBg = Color(0xFFFDFDFB)
-        val PageBgFade = Color(0x00FDFDFB)
+        val PageBg = Color(0xFFFFFFFF)
+        val PageBgFade = Color(0x00FFFFFF)
         val Ink = Color(0xFF171717)
         val Muted = Color(0xFF706F6A)
         val Subtle = Color(0xFFA5A39B)
@@ -87,7 +87,7 @@ internal object MobileDesignTypography {
     val HeadlineMedium = TextStyle(fontSize = 20.sp, lineHeight = 26.sp, fontWeight = FontWeight.Bold)
     val HeadlineSmall = TextStyle(fontSize = 18.sp, lineHeight = 24.sp, fontWeight = FontWeight.Bold)
     val TitleLarge = TextStyle(fontSize = 20.sp, lineHeight = 26.sp, fontWeight = FontWeight.Bold)
-    val ConversationHeaderTitle = TextStyle(fontSize = 18.sp, lineHeight = 22.sp, fontWeight = FontWeight.Medium)
+    val ConversationHeaderTitle = TextStyle(fontSize = 17.sp, lineHeight = 22.sp, fontWeight = FontWeight.Medium)
     val TitleMedium = TextStyle(fontSize = 17.sp, lineHeight = 22.sp, fontWeight = FontWeight.Medium)
     val TitleSmall = TextStyle(fontSize = 15.sp, lineHeight = 20.sp, fontWeight = FontWeight.Medium)
     val BodyLarge = TextStyle(fontSize = 16.sp, lineHeight = 24.sp, fontWeight = FontWeight.Normal)
@@ -101,34 +101,34 @@ internal object MobileDesignTypography {
 internal object MobileDesignGeometry {
     val ConversationHeaderHeight = 76.dp
     val ConversationHeaderCompactHeight = 64.dp
-    val ControlTouchSize = 44.dp
+    val ControlTouchSize = 48.dp
     val ContentGutter = 16.dp
     val ConnectionStripHeight = 48.dp
     val TimelineTopPadding = 22.dp
-    val MessageSpacing = 12.dp
+    val MessageSpacing = 18.dp
     val MessageBubbleMaxWidth = 276.dp
     val MessageBubbleHorizontalPadding = 14.dp
     val MessageBubbleVerticalPadding = 11.dp
     val MessageBubbleRadius = 17.dp
-    val ComposerActionSize = 40.dp
-    val ComposerInputHeight = 42.dp
-    val ComposerExpandedInputHeight = 74.dp
-    val ComposerCollapsedHeight = 52.dp
-    val ComposerExpandedInputRowHeight = 76.dp
-    val ComposerExpandedActionRowHeight = 44.dp
-    val ComposerExpandedHeight = 126.dp
-    val ComposerCollapsedRadius = 26.dp
+    val ComposerActionSize = 44.dp
+    val ComposerInputHeight = 44.dp
+    val ComposerExpandedInputHeight = 58.dp
+    val ComposerCollapsedHeight = 56.dp
+    val ComposerExpandedInputRowHeight = 60.dp
+    val ComposerExpandedActionRowHeight = 40.dp
+    val ComposerExpandedHeight = 108.dp
+    val ComposerCollapsedRadius = 28.dp
     val ComposerExpandedRadius = 18.dp
     val ComposerModelSelectorWidth = 330.dp
     val ComposerModelSelectorRadius = 14.dp
     val ComposerModelSelectorRowHeight = 48.dp
     val ComposerModelSelectorRowRadius = 9.dp
     val ComposerModelSelectorRowGap = 6.dp
-    val SheetTopRadius = 34.dp
-    val SheetSideRadius = 34.dp
+    val SheetTopRadius = 28.dp
+    val SheetSideRadius = 28.dp
     val SheetHorizontalPadding = 20.dp
     val SheetHeaderHeight = 56.dp
-    val SheetActionHeight = 46.dp
+    val SheetActionHeight = 48.dp
     val SelectionTopRadius = 20.dp
     val SelectionRowHeight = 64.dp
     val SelectionCloseSize = 32.dp
@@ -141,9 +141,9 @@ internal object MobileDesignGeometry {
     val CompactPopoverWidth = 150.dp
     val CompactPopoverRadius = 14.dp
     val CompactPopoverActionHeight = 42.dp
-    val SettingsCompactCardRadius = 8.dp
-    val SettingsCardRadius = 24.dp
-    val SettingsProminentCardRadius = 28.dp
+    val SettingsCompactCardRadius = 12.dp
+    val SettingsCardRadius = 16.dp
+    val SettingsProminentCardRadius = 20.dp
     val ModelCurrentRowHeight = 64.dp
     val ModelSourceRowHeight = 62.dp
     val ModelAccountRowHeight = 56.dp

src/apps/mobile/design-system/components/mobile-components.json

@@ -2,11 +2,18 @@
   "version": 1,
   "components": {
     "circle_control": {
-      "purpose": "A floating primary navigation or overflow control.",
-      "anatomy": ["touch_target", "centered_glyph", "hairline_border", "soft_shadow"],
+      "purpose": "A compact navigation or overflow control with a full-size touch target.",
+      "anatomy": ["touch_target", "centered_glyph", "optional_pressed_surface"],
       "states": ["enabled", "pressed", "disabled", "focused"],
       "tokens": ["control_touch_size", "card", "line", "ink"],
-      "platformNotes": "Keep the glyph's optical box separate from the touch target."
+      "platformNotes": "Keep the glyph's optical box separate from the touch target. Header and sidebar controls stay visually transparent at rest; reserve borders and elevation for the containing surface."
+    },
+    "action_button": {
+      "purpose": "Expresses one primary, secondary, quiet, or destructive workflow action with consistent emphasis.",
+      "anatomy": ["touch_target", "action_label", "semantic_surface", "optional_hairline_border"],
+      "states": ["primary", "secondary", "quiet", "destructive", "disabled", "busy"],
+      "tokens": ["sheet_action_height", "primary_action", "primary_action_text", "card", "soft", "line", "red", "label_large"],
+      "platformNotes": "The semantic style is shared; a workflow may override height when its context requires a larger target, while preserving typography, radius, color, and disabled treatment."
     },
     "conversation_header": {
       "purpose": "Identifies the active conversation and the device or workspace answering it.",
@@ -27,7 +34,7 @@
       "anatomy": ["attachment_action", "text_input", "model_control", "primary_action"],
       "states": ["empty", "draft", "focused", "streaming", "disconnected", "with_attachments"],
       "tokens": ["composer_action_size", "composer_collapsed_height", "composer_expanded_height", "composer_collapsed_radius", "composer_expanded_radius"],
-      "platformNotes": "Keyboard, dictation, and attachment pickers remain native adapters."
+      "platformNotes": "Keyboard, dictation, and attachment pickers remain native adapters. The focused two-row form stays compact and exists to expose message context controls; multiline content and attachments may grow it further. The trailing action is the single filled action for Send, Dictate, or Stop."
     },
     "composer_model_selector": {
       "purpose": "Changes the model for the message being composed without leaving the conversation or creation flow.",

src/apps/mobile/design-system/preview/generated/mobile-design-data.js

@@ -6,8 +6,8 @@
   },
   "colors": {
     "start_window_background": { "light": "#FFFFFF", "dark": "#000000" },
-    "page_bg": { "light": "#FDFDFB", "dark": "#151514" },
-    "page_bg_fade": { "light": "#00FDFDFB", "dark": "#00151514" },
+    "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" },
@@ -46,7 +46,7 @@
     "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": 18, "lineHeight": 22, "weight": 500 },
+    "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 },
@@ -59,34 +59,34 @@
   "geometry": {
     "conversation_header_height": 76,
     "conversation_header_compact_height": 64,
-    "control_touch_size": 44,
+    "control_touch_size": 48,
     "content_gutter": 16,
     "connection_strip_height": 48,
     "timeline_top_padding": 22,
-    "message_spacing": 12,
+    "message_spacing": 18,
     "message_bubble_max_width": 276,
     "message_bubble_horizontal_padding": 14,
     "message_bubble_vertical_padding": 11,
     "message_bubble_radius": 17,
-    "composer_action_size": 40,
-    "composer_input_height": 42,
-    "composer_expanded_input_height": 74,
-    "composer_collapsed_height": 52,
-    "composer_expanded_input_row_height": 76,
-    "composer_expanded_action_row_height": 44,
-    "composer_expanded_height": 126,
-    "composer_collapsed_radius": 26,
+    "composer_action_size": 44,
+    "composer_input_height": 44,
+    "composer_expanded_input_height": 58,
+    "composer_collapsed_height": 56,
+    "composer_expanded_input_row_height": 60,
+    "composer_expanded_action_row_height": 40,
+    "composer_expanded_height": 108,
+    "composer_collapsed_radius": 28,
     "composer_expanded_radius": 18,
     "composer_model_selector_width": 330,
     "composer_model_selector_radius": 14,
     "composer_model_selector_row_height": 48,
     "composer_model_selector_row_radius": 9,
     "composer_model_selector_row_gap": 6,
-    "sheet_top_radius": 34,
-    "sheet_side_radius": 34,
+    "sheet_top_radius": 28,
+    "sheet_side_radius": 28,
     "sheet_horizontal_padding": 20,
     "sheet_header_height": 56,
-    "sheet_action_height": 46,
+    "sheet_action_height": 48,
     "selection_top_radius": 20,
     "selection_row_height": 64,
     "selection_close_size": 32,
@@ -99,9 +99,9 @@
     "compact_popover_width": 150,
     "compact_popover_radius": 14,
     "compact_popover_action_height": 42,
-    "settings_compact_card_radius": 8,
-    "settings_card_radius": 24,
-    "settings_prominent_card_radius": 28,
+    "settings_compact_card_radius": 12,
+    "settings_card_radius": 16,
+    "settings_prominent_card_radius": 20,
     "model_current_row_height": 64,
     "model_source_row_height": 62,
     "model_account_row_height": 56,