add

src/pagesUI/editor/data.ts

@@ -1,16 +1,22 @@
 import { reactive } from "vue"
 
 interface IFile{
-    filename: "",
+    filename: string,
-    code: ""
+    code: string
 }
 
 interface IData{
-    filelist: IFile[]
+    state: {
+        filelist: IFile[]
+    }
 }
 
 const data = reactive<IData>({
-    filelist: []
+    state: {
+        filelist: []
+    }
 })
 
-export default data
+export default function useState(){
+    return data.state
+}

src/pagesUI/editor/editor.vue

@@ -8,7 +8,7 @@
                 <img class="ui-monaco-logo" src="/static/logo.png" alt="" />
                 <AdjustWidth></AdjustWidth>
             </div>
-            <div class="ui-preview">asdsa</div>
+            <div class="ui-preview" draggable="true">asdsa</div>
         </div>
     </div>
 </template>

src/pagesUI/editor/files.vue

@@ -1,13 +1,36 @@
 <template>
-    <form action="/" :onSubmit="onSubmit">
+    <div class="files">
-        <input type="text" placeholder="请输入文件名" />
+        {{ state.filelist }}
-        <input type="submit" />
+        <form action="/" :onSubmit="onSubmit">
-    </form>
+            <input class="input" v-model="filename" type="text" placeholder="请输入文件名" />
+            <input class="submit" type="submit" value="添加" />
+        </form>
+    </div>
 </template>
 
 <script lang="ts" setup>
+import useState from "./data"
+import { ref } from "vue"
+
+const state = useState()
+const filename = ref("")
+
 function onSubmit(e: Event) {
     e.preventDefault()
-    console.log(123)
+    state.filelist.push({
+        filename: filename.value,
+        code: "",
+    })
+    filename.value = ""
 }
 </script>
+
+<style lang="less" scoped>
+.input {
+    border: 0;
+    outline: 0;
+    font-size: 20px;
+    height: 50px;
+    line-height: 50px;
+}
+</style>