feat(harmonyos): update ArkUiFlow design method and add ArkUiLayoutType and ArkUiComponentType

Author: phodal

exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/AutoArkUiAction.kt

@@ -3,9 +3,7 @@ package cc.unitmesh.harmonyos.actions
 import cc.unitmesh.devti.gui.sendToChatPanel
 import cc.unitmesh.devti.intentions.action.base.ChatBaseIntention
 import cc.unitmesh.devti.llms.LlmFactory
-import cc.unitmesh.harmonyos.actions.auto.AutoArkUiContext
-import cc.unitmesh.harmonyos.actions.auto.AutoArkUiFlow
-import cc.unitmesh.harmonyos.actions.auto.AutoArkUiTask
+import cc.unitmesh.harmonyos.actions.auto.*
 import com.intellij.openapi.editor.Editor
 import com.intellij.openapi.progress.ProgressManager
 import com.intellij.openapi.progress.impl.BackgroundableProcessIndicator
@@ -26,7 +24,11 @@ class AutoArkUiAction : ChatBaseIntention() {
         if (editor == null || file == null) return
         val selectedText = editor.selectionModel.selectedText ?: return
 
-        val context = AutoArkUiContext(selectedText)
+        val context = AutoArkUiContext(
+            selectedText,
+            layoutOverride = ArkUiLayoutType.overview(),
+            componentOverride = ArkUiComponentType.overview(),
+        )
 
         sendToChatPanel(project) { contentPanel, _ ->
             val llmProvider = LlmFactory().create(project)

exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/auto/ArkUiComponentType.kt

@@ -1,6 +1,6 @@
 package cc.unitmesh.harmonyos.actions.auto
 
-enum class ArkUiComponentType(description: String, example: String) {
+enum class ArkUiComponentType(val description: String, val example: String) {
     Button(
         "可快速创建不同样式的按钮。", "Button('Ok', { type: ButtonType.Normal, stateEffect: true }) \n" +
                 "  .borderRadius(8) \n" +
@@ -150,5 +150,21 @@ enum class ArkUiComponentType(description: String, example: String) {
                 "      })\n" +
                 "      return true\n" +
                 "    })"
-    )
+    );
+
+    companion object {
+        fun overview(): String {
+            return ArkUiComponentType.values().joinToString("\n") {
+                it.name + ":" + it.description
+            }
+        }
+
+        fun tryFormat(it: String): String? {
+            return try {
+                valueOf(it).example
+            } catch (e: Exception) {
+                null
+            }
+        }
+    }
 }

exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/auto/LayoutType.kt renamed to exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/auto/ArkUiLayoutType.kt

@@ -1,6 +1,6 @@
 package cc.unitmesh.harmonyos.actions.auto
 
-enum class LayoutType(val description: String, val example: String) {
+enum class ArkUiLayoutType(val description: String, val example: String) {
     FlexLayout(
         "弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。",
         "Column({ space: 5 }) {\n" +
@@ -100,5 +100,21 @@ enum class LayoutType(val description: String, val example: String) {
                 "    .borderRadius(15)\n" +
                 "  }.width('100%').height('100%').backgroundColor('#CFD0CF')\n" +
                 "}"
-    )
+    );
+
+    companion object {
+        fun overview(): String {
+            return ArkUiLayoutType.values().joinToString("\n") {
+                 it.name + ":" + it.description
+            }
+        }
+
+        fun tryFormat(name: String): String? {
+            return try {
+                valueOf(name).example
+            } catch (e: IllegalArgumentException) {
+                null
+            }
+        }
+    }
 }

exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/auto/AutoArkUiContext.kt

@@ -4,6 +4,5 @@ data class AutoArkUiContext(
     val requirement: String,
     val layoutOverride: String,
     val componentOverride: String,
-    val layouts: List<String> = emptyList(),
-    val components: List<String> = emptyList(),
+    var elements: List<String> = emptyList(),
 )

exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/auto/AutoArkUiFlow.kt

@@ -33,7 +33,7 @@ class AutoArkUiFlow(val panel: ChatCodingPanel, val llm: LLMProvider, val contex
 
 
     override fun design(context: Any): List<String> {
-        val componentList = context as List<ArkUiComponentType>
+        val componentList = context as List<String>
         val stepTwoPrompt = generateStepTwoPrompt(componentList)
 
         panel.addMessage(stepTwoPrompt, true, stepTwoPrompt)
@@ -45,11 +45,14 @@ class AutoArkUiFlow(val panel: ChatCodingPanel, val llm: LLMProvider, val contex
         }.let { listOf(it) }
     }
 
-    private fun generateStepTwoPrompt(selectedComponents: List<ArkUiComponentType>): String {
+    private fun generateStepTwoPrompt(selectedComponents: List<String>): String {
         val templateRender = TemplateRender("genius/harmonyos")
         val template = templateRender.getTemplate("arkui-design.vm")
 
-//        context.pages = selectedComponents.map { it.format() }
+        context.elements = selectedComponents.mapNotNull {
+            ArkUiLayoutType.tryFormat(it) ?: ArkUiComponentType.tryFormat(it)
+        }
+
         templateRender.context = context
 
         val prompter = templateRender.renderTemplate(template)

exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/auto/AutoArkUiTask.kt

@@ -22,6 +22,7 @@ class AutoArkUiTask(
 
         indicator.fraction = 0.6
         indicator.text = AutoDevBundle.message("autopage.generate.design")
+        flow.design(componentNames)
 
         indicator.fraction = 0.8
 

exts/ext-harmonyos/src/main/resources/genius/harmonyos/arkui-design.vm

@@ -0,0 +1,34 @@
+You are a professional Legacy System migration expert, specif in frontend.
+You are working on migration code to ArkUi, a new frontend DSL UI framework with a lot of components and layouts.
+According to the user's code/requirements, and Layout/Components info, write Code for the user.
+
+- ArkUi Layout/Components Infos: ${context.elements}
+
+For example:
+
+- User requirements: "a ArkUi Hello, World"
+// component info: Row({ space: 35 }) { /*...*/}.width('90%')
+// component info: Button('Ok', { type: ButtonType.Normal, stateEffect: true }),
+- Answer:
+```TypeScript
+Row() {
+  Column() {
+    Text(this.message)
+      .fontSize(50)
+      .fontWeight(FontWeight.Bold)
+  }
+  .width('100%')
+}
+.height('100%')
+```
+
+----
+
+Here are the requirements:
+
+```markdown
+${context.requirement}
+```
+
+Please write your code with Markdown syntax, no explanation is needed:
+

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/AutoPageTask.kt

@@ -29,6 +29,5 @@ class AutoPageTask(
         flow.design(filterComponents)
 
         indicator.fraction = 0.8
-
     }
 }