feat(docs): add usecases and workflow documentation #81

Add usecases.md and workflow.md files to the docs folder. The usecases.md file contains information about the use cases of the application, while the workflow.md file explains the workflow design rules. The workflow.md file also includes a dataflow design with four steps: functional bootstrap, request transform/data validation, process IPC/RPC calling, and output transform/render. This documentation will provide a better understanding of the application's functionality and workflow.

Author: phodal

docs/usecases/usecases.md

@@ -1,12 +1,19 @@
 ---
 layout: default
-title: Usecases
+title: Workflow
 nav_order: 6
 has_children: true
-permalink: /usecases
+permalink: /workflow
 ---
 
-TODO: Usecases
+> AutoDev Workflow (#[81](https://github.com/unit-mesh/auto-dev/issues/81))
+
+Dataflow design
+
+1. Function bootstrap
+2. Request Transform / Data validation, IO Handing.
+3. Process IPC/RPC Calling
+4. Output Transform / Render
 
 {: .no_toc }
 

docs/workflow/usecases.md

@@ -0,0 +1,12 @@
+---
+layout: default
+title: Usecases
+nav_order: 7
+has_children: true
+permalink: /usecases
+---
+
+TODO: Usecases
+
+{: .no_toc }
+

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

@@ -3,12 +3,15 @@ package cc.unitmesh.ide.javascript.flow
 import cc.unitmesh.devti.flow.TaskFlow
 
 /**
+ * FrontendFlow is an interface that represents the flow of tasks in a frontend application.
+ * It provides methods for retrieving routes, components, design system components, remote calls, and state management.
  *
- * 1. Finding Function bootstrap, like the main function in java, ReactDom.render in React
- * 2. IO Handing
- * 3. Transform data, like State in React, Vuex in Vue
- * 4. Processing calling, like the fetch in React, the axios in Vue
- * 5. Output Transform, like the render in React, the template in Vue
+ * Based on our workflow design rules: [Workflow](http://ide.unitmesh.cc/workflow)
+ *
+ * 1. Functional bootstrap
+ * 2. Request Transform / Data validation, IO Handing.
+ * 3. Process IPC/RPC Calling
+ * 4. Output Transform / Render
  */
 interface FrontendFlow : TaskFlow<String> {
     var userTask: String
@@ -26,7 +29,8 @@ interface FrontendFlow : TaskFlow<String> {
     fun getComponents(): List<DsComponent>
 
     /**
-     * Get the design system components, like the Ant Design in React, the Element in Vue
+     * Get the design system components, like the Ant Design in React.
+     * Which will load the design system components from the remote
      * @return list of design system components
      */
     fun getDesignSystemComponents(): List<DsComponent>
@@ -38,7 +42,7 @@ interface FrontendFlow : TaskFlow<String> {
     fun sampleRemoteCall(): String
 
     /**
-     * Get the state management, like the Vuex in Vue, the Redux in React, maybe Empty
+     * Get the state management as a sample, like the Vuex in Vue, the Redux in React, maybe Empty
      * @return list of state management
      */
     fun sampleStateManagement(): String?