From 3f4e2b281210fd5d62f5bd2c86a9d13a1ef702ca Mon Sep 17 00:00:00 2001
From: tongtongstudio <tongtongstudio@outlook.com>
Date: Fri, 14 Aug 2026 10:54:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(server):=20=E5=AE=8C=E5=96=84=E8=BF=9C?=
 =?UTF-8?q?=E7=A8=8B=20UI=20=E9=A1=B5=E9=9D=A2=E5=86=85=E5=AE=B9=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=E8=A7=A3=E6=9E=90=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ttstd/composeremote/ui/RemoteUIScreen.kt  |  9 +--
 .../server/RemoteDocumentBuilder.kt           | 66 +++++++++++++++++--
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/ComposeRemoteAndroid/app/src/main/java/com/ttstd/composeremote/ui/RemoteUIScreen.kt b/ComposeRemoteAndroid/app/src/main/java/com/ttstd/composeremote/ui/RemoteUIScreen.kt
index 28882c7..e416d46 100644
--- a/ComposeRemoteAndroid/app/src/main/java/com/ttstd/composeremote/ui/RemoteUIScreen.kt
+++ b/ComposeRemoteAndroid/app/src/main/java/com/ttstd/composeremote/ui/RemoteUIScreen.kt
@@ -79,17 +79,18 @@ private fun RemoteDocumentView(
     key(contentKey) {
         AndroidView(
             factory = { ctx ->
-                Log.d("RemoteUIScreen", "Creating RemoteComposePlayer")
+                // 仅创建播放器实例
                 RemoteComposePlayer(ctx)
             },
             update = { view ->
                 try {
-                    // 显式解析 ByteArray 为 RemoteDocument 对象
+                    // 1. 将二进制显式解析为 RemoteDocument 对象
                     val document = RemoteDocument(bytes)
+                    // 2. 使用 RemoteDocument 重载版本设置文档，确保解析与生命周期同步
                     view.setDocument(document)
-                    Log.d("RemoteUIScreen", "RemoteDocument set successfully")
+                    Log.d("RemoteUIScreen", "文档解析并加载成功: ${bytes.size} 字节")
                 } catch (e: Exception) {
-                    Log.e("RemoteUIScreen", "Failed to set RemoteDocument", e)
+                    Log.e("RemoteUIScreen", "文档解析失败", e)
                 }
             },
             modifier = modifier
diff --git a/ComposeRemoteServer/src/main/kotlin/com/ttstd/composeremote/server/RemoteDocumentBuilder.kt b/ComposeRemoteServer/src/main/kotlin/com/ttstd/composeremote/server/RemoteDocumentBuilder.kt
index ff0d98c..ebf665e 100644
--- a/ComposeRemoteServer/src/main/kotlin/com/ttstd/composeremote/server/RemoteDocumentBuilder.kt
+++ b/ComposeRemoteServer/src/main/kotlin/com/ttstd/composeremote/server/RemoteDocumentBuilder.kt
@@ -27,12 +27,66 @@ fun buildRemoteDocument(page: String): ByteArray {
     )
     val rcProfile = RcProfile(profile, false)
     return createRcBuffer(rcProfile) {
-        Column(Modifier.fillMaxSize().background(0xFFFFFFFF.toInt()).padding(16f)) {
-            Text(
-                text = if (page == "home") "Home Page" else "Detail Page",
-                fontSize = RcSp(36f),
-                color = 0xFF0000FF.toInt() // Blue
-            )
+        //加了RcRoot会不显示
+//        RcRoot {
+            Column(Modifier.fillMaxSize().background(0xFFFFFFFF.toInt()).padding(16f)) {
+                when (page) {
+                    "detail" -> detailContent()
+                    else -> homeContent()
+                }
+            }
+//        }
+    }
+}
+
+private fun RcColumnScope.homeContent() {
+    Text(
+        text = "Remote Compose",
+        fontSize = RcSp(36f),
+        color = TITLE_COLOR,
+        modifier = Modifier.padding(0f, 0f, 0f, 4f)
+    )
+    Text(
+        text = "服务端驱动 UI · 演示",
+        fontSize = RcSp(18f),
+        color = BODY_COLOR,
+        modifier = Modifier.padding(0f, 0f, 0f, 16f)
+    )
+    Spacer(Modifier)
+    card(title = "首页", body = "这个界面由后端实时生成并下发二进制文档。")
+    Spacer(Modifier)
+    card(title = "技术栈", body = "Spring Boot 4 + Remote Compose 1.0.0-alpha17")
+}
+
+private fun RcColumnScope.detailContent() {
+    Text(
+        text = "详情页",
+        fontSize = RcSp(36f),
+        color = TITLE_COLOR,
+        modifier = Modifier.padding(0f, 0f, 0f, 4f)
+    )
+    Text(
+        text = "Detail",
+        fontSize = RcSp(18f),
+        color = BODY_COLOR,
+        modifier = Modifier.padding(0f, 0f, 0f, 16f)
+    )
+    Spacer(Modifier)
+    card(title = "接口", body = "GET /api/remote-ui/detail")
+    Spacer(Modifier)
+    card(title = "说明", body = "每个页面对应后端的一个独立接口，按需下发。")
+}
+
+private fun RcColumnScope.card(title: String, body: String) {
+    Box(Modifier.fillMaxWidth().background(CARD_BG).padding(16f)) {
+        Column(Modifier.fillMaxWidth()) {
+            Text(text = title, fontSize = RcSp(22f), color = TITLE_COLOR, modifier = Modifier)
+            Spacer(Modifier)
+            Text(text = body, fontSize = RcSp(15f), color = BODY_COLOR, modifier = Modifier)
         }
     }
 }
+
+private const val TITLE_COLOR = 0xFF0D47A1.toInt()
+private const val BODY_COLOR = 0xFF212121.toInt()
+private const val CARD_BG = 0xFFE3F2FD.toInt()