file-preview, good~

ForteScarlet · ForteScarlet · commit 811683ad5d7e · 2025-08-18T17:33:00.000+08:00
diff --git a/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/FileContentComponents.kt b/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/FileContentComponents.kt
@@ -7,6 +7,8 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.VerticalScrollbar
+import androidx.compose.foundation.HorizontalScrollbar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ContentCopy
 import androidx.compose.material.icons.filled.Description
@@ -250,6 +252,17 @@ private fun FileContentBody(content: FileContent) {
             }
         }
 
+        // 垂直滚动条
+        VerticalScrollbar(
+            modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
+            adapter = rememberScrollbarAdapter(verticalScrollState)
+        )
+
+        // 水平滚动条
+        HorizontalScrollbar(
+            modifier = Modifier.align(Alignment.BottomCenter).fillMaxWidth(),
+            adapter = rememberScrollbarAdapter(horizontalScrollState)
+        )
     }
 }
 
@@ -266,21 +279,26 @@ private fun LineNumbers(content: String) {
     val maxLineNumber = lines.size
     val lineNumberWidth = maxLineNumber.toString().length
 
+    val textStyle = MaterialTheme.typography.bodySmall.copy(
+        fontFamily = jetBrainsMonoFontFamily,
+        fontSize = 16.sp,
+        lineHeight = 24.sp // 增加行高以改善对齐
+    )
+
     Column(
         modifier = Modifier.padding(end = 8.dp)
     ) {
         lines.forEachIndexed { index, _ ->
-            Text(
-                text = (index + 1).toString().padStart(lineNumberWidth),
-                // fontFamily = jetBrainsMonoFontFamily,
-                style = MaterialTheme.typography.bodySmall.copy(
-                    fontFamily = jetBrainsMonoFontFamily,
-                    fontSize = 16.sp,
-                    lineHeight = 16.sp
-                ),
-                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f),
-                modifier = Modifier.padding(vertical = 1.dp)
-            )
+            Box(
+                modifier = Modifier.height(24.dp), // 固定高度确保对齐
+                contentAlignment = Alignment.CenterStart
+            ) {
+                Text(
+                    text = (index + 1).toString().padStart(lineNumberWidth),
+                    style = textStyle,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f),
+                )
+            }
         }
     }
 }
@@ -294,16 +312,26 @@ private fun CodeContent(content: String, mimeType: String) {
         Font(Res.font.JetBrainsMono_Medium, FontWeight.Medium)
     )
 
+    val textStyle = MaterialTheme.typography.bodySmall.copy(
+        fontFamily = jetBrainsMonoFontFamily,
+        fontSize = 16.sp,
+        lineHeight = 24.sp // 与行号保持一致的行高
+    )
+
     SelectionContainer {
-        Text(
-            text = content,
-            style = MaterialTheme.typography.bodySmall.copy(
-                fontFamily = jetBrainsMonoFontFamily,
-                fontSize = 16.sp,
-                lineHeight = 16.sp
-            ),
-            modifier = Modifier.padding(vertical = 1.dp),
-        )
+        Column {
+            content.split('\n').forEach { line ->
+                Box(
+                    modifier = Modifier.height(24.dp), // 固定高度确保对齐
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    Text(
+                        text = if (line.isEmpty()) " " else line, // 空行显示空格以保持高度
+                        style = textStyle,
+                    )
+                }
+            }
+        }
     }
 }
 
diff --git a/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/FileTreeComponents.kt b/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/FileTreeComponents.kt
@@ -31,51 +31,24 @@ import androidx.compose.ui.unit.sp
 
 /**
  * 计算应该自动展开的路径
- * 递归展开只有唯一子目录的目录
+ * 只展开第一级目录
  */
 private fun calculateAutoExpandPaths(nodes: List<ZipFileNode>): Set<String> {
     val autoExpandPaths = mutableSetOf<String>()
     
-    fun shouldAutoExpand(node: ZipFileNode): Boolean {
-        if (!node.isDirectory) return false
-        
-        // 统计子目录数量
-        val childDirectories = node.children.filter { it.isDirectory }
-        
-        // 如果只有一个子目录，则应该自动展开
-        return childDirectories.size == 1
-    }
-    
-    fun collectAutoExpandPaths(nodeList: List<ZipFileNode>) {
-        for (node in nodeList) {
-            if (node.isDirectory) {
-                // 如果是顶层目录，总是展开
-                if (node.isTopLevel) {
-                    autoExpandPaths.add(node.path)
-                }
-                
-                // 如果应该自动展开，添加到集合中
-                if (shouldAutoExpand(node)) {
-                    autoExpandPaths.add(node.path)
-                    
-                    // 对唯一的子目录递归处理
-                    val childDir = node.children.first { it.isDirectory }
-                    collectAutoExpandPaths(listOf(childDir))
-                }
-                
-                // 递归处理所有子节点
-                collectAutoExpandPaths(node.children)
-            }
+    // 只展开根级别的目录
+    for (node in nodes) {
+        if (node.isDirectory) {
+            autoExpandPaths.add(node.path)
         }
     }
     
-    collectAutoExpandPaths(nodes)
     return autoExpandPaths
 }
 
 /**
  * 文件树展示组件
- * 支持展开/折叠，默认展开第一层，自动展开只有唯一子目录的目录
+ * 支持展开/折叠，默认只展开第一层目录
  */
 @Composable
 fun FileTreeView(
@@ -220,11 +193,11 @@ private fun FileTreeNode(
                 visible = isExpanded,
                 enter = expandVertically(
                     animationSpec = androidx.compose.animation.core.spring(
-                        dampingRatio = androidx.compose.animation.core.Spring.DampingRatioMediumBouncy,
-                        stiffness = androidx.compose.animation.core.Spring.StiffnessLow
+                        dampingRatio = androidx.compose.animation.core.Spring.DampingRatioNoBouncy,
+                        stiffness = androidx.compose.animation.core.Spring.StiffnessMedium
                     )
                 ) + fadeIn(
-                    animationSpec = androidx.compose.animation.core.tween(300)
+                    animationSpec = androidx.compose.animation.core.tween(250)
                 ),
                 exit = shrinkVertically(
                     animationSpec = androidx.compose.animation.core.spring(
diff --git a/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/ZipPreviewComponents.kt b/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/ZipPreviewComponents.kt
@@ -5,9 +5,14 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Folder
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
@@ -368,32 +373,46 @@ private fun DesktopLayout(
             colors = CardDefaults.cardColors(
                 containerColor = MaterialTheme.colorScheme.surface
             ),
-            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
-            shape = RoundedCornerShape(16.dp)
+            elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
+            shape = RoundedCornerShape(12.dp)
         ) {
             Column(
                 modifier = Modifier.fillMaxSize()
             ) {
                 // 标题区域
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .background(
-                            MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f),
-                            RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
-                        )
-                        .padding(horizontal = 16.dp, vertical = 12.dp)
+                Surface(
+                    modifier = Modifier.fillMaxWidth(),
+                    color = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.4f),
+                    shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp)
                 ) {
-                    Text(
-                        text = "📁 文件结构",
-                        style = MaterialTheme.typography.titleMedium.copy(
-                            fontWeight = FontWeight.SemiBold,
-                            fontSize = 16.sp
-                        ),
-                        color = MaterialTheme.colorScheme.primary
-                    )
+                    Row(
+                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 14.dp),
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
+                        Icon(
+                            imageVector = Icons.Default.Folder,
+                            contentDescription = null,
+                            modifier = Modifier.size(20.dp),
+                            tint = MaterialTheme.colorScheme.primary
+                        )
+                        Text(
+                            text = "文件结构",
+                            style = MaterialTheme.typography.titleMedium.copy(
+                                fontWeight = FontWeight.SemiBold,
+                                fontSize = 16.sp
+                            ),
+                            color = MaterialTheme.colorScheme.primary
+                        )
+                    }
                 }
                 
+                // 分隔线
+                HorizontalDivider(
+                    color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f),
+                    thickness = 1.dp
+                )
+                
                 // 文件树内容区域
                 Box(
                     modifier = Modifier
