file-preview

ForteScarlet · ForteScarlet · commit 15243dec79ad · 2025-08-18T13:15:53.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
@@ -4,7 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ContentCopy
@@ -13,9 +13,9 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.platform.ClipEntry
+import androidx.compose.ui.platform.LocalClipboard
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
@@ -25,7 +25,9 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.launch
-import androidx.compose.foundation.text.selection.SelectionContainer
+import org.jetbrains.compose.resources.Font
+import simbot_codegen.composeapp.generated.resources.JetBrainsMono_Medium
+import simbot_codegen.composeapp.generated.resources.Res
 
 /**
  * 文件内容预览组件
@@ -126,11 +128,11 @@ private fun FileContentDisplay(content: FileContent) {
     Column(modifier = Modifier.fillMaxSize()) {
         // 文件信息头部
         FileHeader(content = content)
-        
+
         HorizontalDivider(
             color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f)
         )
-        
+
         // 文件内容
         FileContentBody(content = content)
     }
@@ -141,7 +143,7 @@ private fun FileContentDisplay(content: FileContent) {
  */
 @Composable
 private fun FileHeader(content: FileContent) {
-    val clipboardManager = LocalClipboardManager.current
+    val clipboardManager = LocalClipboard.current
     val scope = rememberCoroutineScope()
     var showCopyFeedback by remember { mutableStateOf(false) }
 
@@ -180,11 +182,12 @@ private fun FileHeader(content: FileContent) {
                     color = MaterialTheme.colorScheme.primary
                 )
             }
-            
+
             IconButton(
                 onClick = {
                     scope.launch {
-                        clipboardManager.setText(AnnotatedString(content.content))
+                        clipboardManager.nativeClipboard
+                        clipboardManager.setClipEntry(ClipEntry.withPlainText(content.content))
                         showCopyFeedback = true
                         kotlinx.coroutines.delay(2000)
                         showCopyFeedback = false
@@ -224,15 +227,15 @@ private fun FileContentBody(content: FileContent) {
         ) {
             // 行号列
             LineNumbers(content = content.content)
-            
+
             // 分隔线
             VerticalDivider(
                 modifier = Modifier
                     .fillMaxHeight()
                     .padding(horizontal = 8.dp),
                 color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.3f)
             )
-            
+
             // 代码内容
             CodeContent(
                 content = content.content,
@@ -247,19 +250,25 @@ private fun FileContentBody(content: FileContent) {
  */
 @Composable
 private fun LineNumbers(content: String) {
+    val jetBrainsMonoFontFamily = FontFamily(
+        Font(Res.font.JetBrainsMono_Medium, FontWeight.Medium)
+    )
+
     val lines = content.split('\n')
     val maxLineNumber = lines.size
     val lineNumberWidth = maxLineNumber.toString().length
-    
+
     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 = FontFamily.Monospace,
-                    fontSize = 12.sp
+                    fontFamily = jetBrainsMonoFontFamily,
+                    fontSize = 16.sp,
+                    lineHeight = 16.sp
                 ),
                 color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f),
                 modifier = Modifier.padding(vertical = 1.dp)
@@ -273,19 +282,23 @@ private fun LineNumbers(content: String) {
  */
 @Composable
 private fun CodeContent(content: String, mimeType: String) {
+    val jetBrainsMonoFontFamily = FontFamily(
+        Font(Res.font.JetBrainsMono_Medium, FontWeight.Medium)
+    )
+
     val highlightedText = remember(content, mimeType) {
         highlightCode(content, mimeType)
     }
-    
+
     SelectionContainer {
         Text(
             text = highlightedText,
             style = MaterialTheme.typography.bodySmall.copy(
-                fontFamily = FontFamily.Monospace,
-                fontSize = 12.sp,
+                fontFamily = jetBrainsMonoFontFamily,
+                fontSize = 16.sp,
                 lineHeight = 16.sp
             ),
-            modifier = Modifier.padding(vertical = 1.dp)
+            modifier = Modifier.padding(vertical = 1.dp),
         )
     }
 }
@@ -296,7 +309,7 @@ private fun CodeContent(content: String, mimeType: String) {
 private fun highlightCode(content: String, mimeType: String): AnnotatedString {
     return buildAnnotatedString {
         append(content)
-        
+
         // 根据 MIME 类型应用不同的高亮规则
         when (mimeType) {
             "text/x-kotlin" -> applyKotlinHighlight(this, content)
@@ -313,12 +326,12 @@ private fun highlightCode(content: String, mimeType: String): AnnotatedString {
  */
 private fun applyKotlinHighlight(builder: AnnotatedString.Builder, content: String) {
     val keywords = setOf(
-        "class", "interface", "fun", "val", "var", "if", "else", "when", "for", 
+        "class", "interface", "fun", "val", "var", "if", "else", "when", "for",
         "while", "do", "try", "catch", "finally", "return", "break", "continue",
         "object", "companion", "data", "sealed", "enum", "annotation", "suspend",
         "import", "package", "private", "public", "protected", "internal"
     )
-    
+
     highlightKeywords(builder, content, keywords, Color(0xFF0000FF)) // 蓝色关键字
     highlightStrings(builder, content, Color(0xFF008000)) // 绿色字符串
     highlightComments(builder, content, Color(0xFF808080)) // 灰色注释
@@ -335,7 +348,7 @@ private fun applyJavaHighlight(builder: AnnotatedString.Builder, content: String
         "catch", "finally", "throw", "throws", "return", "break", "continue",
         "import", "package", "extends", "implements", "super", "this", "new"
     )
-    
+
     highlightKeywords(builder, content, keywords, Color(0xFF0000FF))
     highlightStrings(builder, content, Color(0xFF008000))
     highlightComments(builder, content, Color(0xFF808080))
@@ -369,7 +382,7 @@ private fun applyJsonHighlight(builder: AnnotatedString.Builder, content: String
             end = match.range.last + 1
         )
     }
-    
+
     // 数字
     val numberRegex = Regex("\\b\\d+(\\.\\d+)?\\b")
     numberRegex.findAll(content).forEach { match ->
@@ -394,8 +407,8 @@ private fun applyGenericHighlight(builder: AnnotatedString.Builder, content: Str
  * 关键字高亮
  */
 private fun highlightKeywords(
-    builder: AnnotatedString.Builder, 
-    content: String, 
+    builder: AnnotatedString.Builder,
+    content: String,
     keywords: Set<String>,
     color: Color
 ) {
@@ -437,7 +450,7 @@ private fun highlightComments(builder: AnnotatedString.Builder, content: String,
             end = match.range.last + 1
         )
     }
-    
+
     val blockCommentRegex = Regex("/\\*.*?\\*/", RegexOption.DOT_MATCHES_ALL)
     blockCommentRegex.findAll(content).forEach { match ->
         builder.addStyle(
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
@@ -28,9 +28,53 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 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)
+            }
+        }
+    }
+    
+    collectAutoExpandPaths(nodes)
+    return autoExpandPaths
+}
+
 /**
  * 文件树展示组件
- * 支持展开/折叠，默认展开第一层
+ * 支持展开/折叠，默认展开第一层，自动展开只有唯一子目录的目录
  */
 @Composable
 fun FileTreeView(
@@ -39,16 +83,15 @@ fun FileTreeView(
     onFileSelect: (ZipFileNode) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    // 展开状态管理，默认展开第一层
-    val expandedPaths = remember { 
-        mutableStateOf(
-            nodes.filter { it.isDirectory && it.isTopLevel }.map { it.path }.toSet()
-        ) 
+    // 展开状态管理，默认展开第一层和自动展开单子目录
+    val expandedPaths = remember(nodes) { 
+        mutableStateOf(calculateAutoExpandPaths(nodes))
     }
 
     LazyColumn(
         modifier = modifier.fillMaxWidth(),
-        verticalArrangement = Arrangement.spacedBy(2.dp)
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+        contentPadding = PaddingValues(vertical = 8.dp)
     ) {
         items(nodes) { node ->
             FileTreeNode(
@@ -90,12 +133,12 @@ private fun FileTreeNode(
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .clip(RoundedCornerShape(4.dp))
+                .clip(RoundedCornerShape(8.dp))
                 .background(
-                    color = if (isSelected) {
-                        MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
-                    } else {
-                        MaterialTheme.colorScheme.surface
+                    color = when {
+                        isSelected -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.4f)
+                        node.isDirectory -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.3f)
+                        else -> MaterialTheme.colorScheme.surface
                     }
                 )
                 .clickable(
@@ -105,10 +148,10 @@ private fun FileTreeNode(
                     onNodeClick(node)
                 }
                 .padding(
-                    start = (8 + level * 16).dp,
-                    top = 4.dp,
-                    bottom = 4.dp,
-                    end = 8.dp
+                    start = (12 + level * 20).dp,
+                    top = 8.dp,
+                    bottom = 8.dp,
+                    end = 12.dp
                 ),
             verticalAlignment = Alignment.CenterVertically
         ) {
diff --git a/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/ZipPreviewModels.kt b/composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/gen/view/preview/ZipPreviewModels.kt
@@ -2,10 +2,6 @@ package love.forte.simbot.codegen.gen.view.preview
 
 import jszip.JSZip
 import jszip.JSZipObject
-import jszip.JSZipGeneratorOptions
-import jszip.OutputType
-import js.objects.unsafeJso
-import js.promise.await
 import jszip.text
 
 /**
@@ -225,19 +221,6 @@ class FileContentLoader {
         if (node.isDirectory || node.zipObject == null) return null
 
         return try {
-            // TODO: 调试正确的 JSZipObject API 用法
-            // 暂时使用占位符，显示文件信息而不是实际内容
-            val placeholder = """
-                文件路径: ${node.path}
-                文件名称: ${node.name}
-                文件扩展名: ${node.extension}
-                
-                注意: 文件内容读取功能正在开发中
-                这是一个占位符内容，用于测试预览功能的基本结构。
-                
-                实际的文件内容将在 JSZipObject API 调试完成后显示。
-            """.trimIndent()
-            
             val content = node.zipObject.text()
             val mimeType = FileContent.inferMimeType(node.name)
             val isBinary = false
