feat(ui): replace VariablePanel with FileTreePanel #453

Replace the VariablePanel component with a new FileTreePanel that provides project file browsing capabilities. Add FileTreeCellRenderer for custom file icons, implement project loading and file selection functionality. Update DevInsEditorFrame to support dynamic UI layout switching based on file type, with improved syntax highlighting for multiple languages. Integrate FlatLaf dark theme for modern UI appearance and add support for opening projects and individual files.

Author: phodal

mpp-ui/build.gradle.kts

@@ -14,6 +14,10 @@ dependencies {
     // 用于代码编辑器功能
     implementation("com.fifesoft:rsyntaxtextarea:3.3.4")
 
+    // 现代化 UI 主题
+    implementation("com.formdev:flatlaf:3.2.5")
+    implementation("com.formdev:flatlaf-extras:3.2.5")
+
     // JSON 处理
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
 

mpp-ui/src/main/kotlin/cc/unitmesh/devins/ui/Main.kt

@@ -1,10 +1,26 @@
 package cc.unitmesh.devins.ui
 
 import cc.unitmesh.devins.ui.swing.DevInsEditorFrame
+import com.formdev.flatlaf.FlatDarkLaf
+import com.formdev.flatlaf.extras.FlatSVGIcon
 import javax.swing.SwingUtilities
 import javax.swing.UIManager
 
 fun main() {
+    // 设置 FlatLaf 暗色主题
+    try {
+        FlatDarkLaf.setup()
+
+        // 设置一些自定义属性
+        UIManager.put("Tree.showDefaultIcons", true)
+        UIManager.put("Component.focusWidth", 1)
+        UIManager.put("ScrollBar.showButtons", false)
+        UIManager.put("ScrollBar.width", 12)
+
+    } catch (e: Exception) {
+        e.printStackTrace()
+    }
+
     SwingUtilities.invokeLater {
         DevInsEditorFrame().isVisible = true
     }

mpp-ui/src/main/kotlin/cc/unitmesh/devins/ui/swing/DevInsEditorFrame.kt

@@ -13,25 +13,27 @@ import javax.swing.*
 import javax.swing.border.TitledBorder
 import javax.swing.filechooser.FileNameExtensionFilter
 
-class DevInsEditorFrame : JFrame("DevIns Editor") {
-    
+class DevInsEditorFrame : JFrame("AutoDev Desktop") {
+
     private val sourceEditor = RSyntaxTextArea(20, 60)
     private val outputArea = JTextArea(10, 60)
-    private val variablePanel = VariablePanel()
     private val statusLabel = JLabel("Ready")
     private val compileButton = JButton("Compile")
     private val clearButton = JButton("Clear")
-    
+    private val fileTreePanel = FileTreePanel { file -> openFileInEditor(file) }
+
     private val scope = CoroutineScope(Dispatchers.Main + SupervisorJob())
     private var currentFile: File? = null
+    private var mainPanel: JSplitPane? = null
+    private var outputPanel: JComponent? = null
 
     init {
         setupUI()
         setupActions()
         setupDefaultContent()
 
         defaultCloseOperation = EXIT_ON_CLOSE
-        setSize(1200, 800)
+        setSize(1400, 900)
         setLocationRelativeTo(null)
     }
 
@@ -42,12 +44,8 @@ class DevInsEditorFrame : JFrame("DevIns Editor") {
         val toolbar = createToolbar()
         add(toolbar, BorderLayout.NORTH)
 
-        // 主面板
-        val mainPanel = JSplitPane(JSplitPane.HORIZONTAL_SPLIT)
-        mainPanel.leftComponent = createLeftPanel()
-        mainPanel.rightComponent = createRightPanel()
-        mainPanel.dividerLocation = 800
-        add(mainPanel, BorderLayout.CENTER)
+        // 初始化主面板
+        setupMainPanel(false)
 
         // 状态栏
         val statusPanel = JPanel(FlowLayout(FlowLayout.LEFT))
@@ -60,46 +58,46 @@ class DevInsEditorFrame : JFrame("DevIns Editor") {
         toolbar.isFloatable = false
 
         // 文件操作
-        val openButton = JButton("Open")
-        openButton.addActionListener { openFile() }
-        toolbar.add(openButton)
+        val openProjectButton = JButton("Open Project")
+        openProjectButton.addActionListener { openProject() }
+        toolbar.add(openProjectButton)
+
+        val openFileButton = JButton("Open File")
+        openFileButton.addActionListener { openFile() }
+        toolbar.add(openFileButton)
 
         val saveButton = JButton("Save")
         saveButton.addActionListener { saveFile() }
         toolbar.add(saveButton)
 
         toolbar.addSeparator()
 
-        // 编译操作
+        // 编译操作（初始隐藏）
+        compileButton.isVisible = false
+        clearButton.isVisible = false
         toolbar.add(compileButton)
         toolbar.add(clearButton)
 
         return toolbar
     }
 
-    private fun createLeftPanel(): JComponent {
-        val leftPanel = JSplitPane(JSplitPane.VERTICAL_SPLIT)
-        
+    private fun createEditorPanel(): JComponent {
         // 代码编辑器
-        sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_MARKDOWN
+        sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_NONE
         sourceEditor.isCodeFoldingEnabled = true
         sourceEditor.antiAliasingEnabled = true
         sourceEditor.font = Font("JetBrains Mono", Font.PLAIN, 14)
         sourceEditor.tabSize = 2
-        
+
         val editorScrollPane = RTextScrollPane(sourceEditor)
         editorScrollPane.lineNumbersEnabled = true
         editorScrollPane.isFoldIndicatorEnabled = true
-        editorScrollPane.border = TitledBorder("DevIns Source")
-        
-        leftPanel.topComponent = editorScrollPane
-        leftPanel.bottomComponent = variablePanel
-        leftPanel.dividerLocation = 400
-        
-        return leftPanel
+        editorScrollPane.border = TitledBorder("📝 Editor")
+
+        return editorScrollPane
     }
 
-    private fun createRightPanel(): JComponent {
+    private fun createOutputPanel(): JComponent {
         outputArea.isEditable = false
         outputArea.font = Font("JetBrains Mono", Font.PLAIN, 12)
         outputArea.background = Color.WHITE
@@ -128,29 +126,29 @@ class DevInsEditorFrame : JFrame("DevIns Editor") {
             variables:
               greeting: "Hello"
               target: "World"
+              author: "DevIns Team"
+              version: "1.0.0"
             ---
-            
+
             # DevIns Template Example
-            
+
             ${'$'}greeting, ${'$'}target! Welcome to DevIns.
-            
+
             This is a simple example showing:
             - Variable substitution: ${'$'}greeting and ${'$'}target
             - Front matter configuration
             - Markdown-like syntax
-            
+
             ## Variables in Action
-            
+
             You can use variables like ${'$'}greeting anywhere in your template.
             The compiler will replace them with the actual values.
-            
-            Try editing the variables in the panel below!
+
+            Edit the variables in the front matter above to see changes!
+
+            Author: ${'$'}author
+            Version: ${'$'}version
         """.trimIndent()
-        
-        variablePanel.addVariable("greeting", "Hello")
-        variablePanel.addVariable("target", "World")
-        variablePanel.addVariable("author", "DevIns Team")
-        variablePanel.addVariable("version", "1.0.0")
     }
 
     private fun compile() {
@@ -162,10 +160,7 @@ class DevInsEditorFrame : JFrame("DevIns Editor") {
                 val startTime = System.currentTimeMillis()
 
                 val result = withContext(Dispatchers.IO) {
-                    DevInsCompilerFacade.compile(
-                        sourceEditor.text,
-                        variablePanel.getVariables()
-                    )
+                    DevInsCompilerFacade.compile(sourceEditor.text)
                 }
 
                 val executionTime = System.currentTimeMillis() - startTime
@@ -200,25 +195,14 @@ class DevInsEditorFrame : JFrame("DevIns Editor") {
 
     private fun openFile() {
         val fileChooser = JFileChooser().apply {
-            fileFilter = FileNameExtensionFilter("DevIns Files", "devin", "devins", "txt")
+            fileFilter = FileNameExtensionFilter("All Supported Files",
+                "devin", "devins", "kt", "java", "js", "ts", "py", "json", "yaml", "yml", "md", "txt")
             currentDirectory = File(System.getProperty("user.home"))
         }
-        
+
         if (fileChooser.showOpenDialog(this) == JFileChooser.APPROVE_OPTION) {
             val file = fileChooser.selectedFile
-            try {
-                sourceEditor.text = file.readText()
-                currentFile = file
-                title = "DevIns Editor - ${file.name}"
-                statusLabel.text = "Opened: ${file.name}"
-            } catch (e: Exception) {
-                JOptionPane.showMessageDialog(
-                    this,
-                    "Failed to open file: ${e.message}",
-                    "Error",
-                    JOptionPane.ERROR_MESSAGE
-                )
-            }
+            openFileInEditor(file)
         }
     }
 
@@ -251,4 +235,126 @@ class DevInsEditorFrame : JFrame("DevIns Editor") {
             )
         }
     }
+
+    private fun setupMainPanel(showOutput: Boolean) {
+        // 移除现有的主面板
+        if (mainPanel != null) {
+            remove(mainPanel)
+        }
+
+        mainPanel = JSplitPane(JSplitPane.HORIZONTAL_SPLIT)
+
+        // 左侧：文件树 + 编辑器
+        val leftPanel = JSplitPane(JSplitPane.HORIZONTAL_SPLIT)
+        leftPanel.leftComponent = fileTreePanel
+        leftPanel.rightComponent = createEditorPanel()
+        leftPanel.dividerLocation = 250
+        leftPanel.resizeWeight = 0.0 // 文件树固定宽度
+
+        if (showOutput) {
+            // 三栏布局：文件树 + 编辑器 + 输出
+            outputPanel = createOutputPanel()
+            mainPanel!!.leftComponent = leftPanel
+            mainPanel!!.rightComponent = outputPanel
+            mainPanel!!.dividerLocation = 900
+            mainPanel!!.resizeWeight = 0.7
+        } else {
+            // 两栏布局：文件树 + 编辑器
+            mainPanel!!.leftComponent = leftPanel
+            mainPanel!!.rightComponent = null
+            mainPanel!!.dividerLocation = 0
+            mainPanel!!.resizeWeight = 1.0
+        }
+
+        add(mainPanel, BorderLayout.CENTER)
+        revalidate()
+        repaint()
+    }
+
+    private fun isDevInsFile(file: File): Boolean {
+        val extension = file.extension.lowercase()
+        return extension in setOf("devin", "devins")
+    }
+
+    private fun updateUIForFileType(file: File) {
+        val isDevIns = isDevInsFile(file)
+
+        // 更新工具栏按钮可见性
+        compileButton.isVisible = isDevIns
+        clearButton.isVisible = isDevIns
+
+        // 更新编辑器标题
+        val editorScrollPane = sourceEditor.parent.parent as RTextScrollPane
+        val fileIcon = when {
+            isDevIns -> "📄"
+            file.extension.lowercase() in setOf("kt", "java") -> "☕"
+            file.extension.lowercase() in setOf("js", "ts") -> "🟨"
+            file.extension.lowercase() in setOf("py") -> "🐍"
+            file.extension.lowercase() in setOf("json", "yaml", "yml") -> "⚙️"
+            file.extension.lowercase() in setOf("md") -> "📝"
+            else -> "📄"
+        }
+
+        val title = if (isDevIns) "$fileIcon DevIns Source" else "$fileIcon ${file.name}"
+        editorScrollPane.border = TitledBorder(title)
+
+        // 更新布局
+        setupMainPanel(isDevIns)
+
+        // 重新绘制工具栏
+        (compileButton.parent as JToolBar).revalidate()
+        (compileButton.parent as JToolBar).repaint()
+    }
+
+    private fun openProject() {
+        val fileChooser = JFileChooser().apply {
+            fileSelectionMode = JFileChooser.DIRECTORIES_ONLY
+            dialogTitle = "Select Project Directory"
+            currentDirectory = File(System.getProperty("user.home"))
+        }
+
+        if (fileChooser.showOpenDialog(this) == JFileChooser.APPROVE_OPTION) {
+            val selectedDir = fileChooser.selectedFile
+            fileTreePanel.loadProject(selectedDir)
+            statusLabel.text = "Opened project: ${selectedDir.name}"
+        }
+    }
+
+    private fun openFileInEditor(file: File) {
+        try {
+            val content = file.readText()
+            sourceEditor.text = content
+            currentFile = file
+            title = "DevIns Editor - ${file.name}"
+            statusLabel.text = "Opened: ${file.name}"
+
+            // 根据文件扩展名设置语法高亮
+            when (file.extension.lowercase()) {
+                "devin", "devins" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_MARKDOWN
+                "md" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_MARKDOWN
+                "kt" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_KOTLIN
+                "java" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_JAVA
+                "js" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_JAVASCRIPT
+                "ts" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_TYPESCRIPT
+                "py" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_PYTHON
+                "json" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_JSON
+                "yaml", "yml" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_YAML
+                "xml" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_XML
+                "html" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_HTML
+                "css" -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_CSS
+                else -> sourceEditor.syntaxEditingStyle = SyntaxConstants.SYNTAX_STYLE_NONE
+            }
+
+            // 根据文件类型更新 UI
+            updateUIForFileType(file)
+
+        } catch (e: Exception) {
+            JOptionPane.showMessageDialog(
+                this,
+                "Failed to open file: ${e.message}",
+                "Error",
+                JOptionPane.ERROR_MESSAGE
+            )
+        }
+    }
 }