From 467058a0244757668a822b124bf010dd70b7e0ce Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Tue, 7 Dec 2021 00:51:22 +0800
Subject: [PATCH] add

---
 src/pagesUI/editor/data.ts    | 16 +++++++++++-----
 src/pagesUI/editor/editor.vue |  2 +-
 src/pagesUI/editor/files.vue  | 33 ++++++++++++++++++++++++++++-----
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/pagesUI/editor/data.ts b/src/pagesUI/editor/data.ts
index 8f991b5..472d16f 100644
--- a/src/pagesUI/editor/data.ts
+++ b/src/pagesUI/editor/data.ts
@@ -1,16 +1,22 @@
 import { reactive } from "vue"
 
 interface IFile{
-    filename: "",
-    code: ""
+    filename: string,
+    code: string
 }
 
 interface IData{
-    filelist: IFile[]
+    state: {
+        filelist: IFile[]
+    }
 }
 
 const data = reactive<IData>({
-    filelist: []
+    state: {
+        filelist: []
+    }
 })
 
-export default data
\ No newline at end of file
+export default function useState(){
+    return data.state
+}
\ No newline at end of file
diff --git a/src/pagesUI/editor/editor.vue b/src/pagesUI/editor/editor.vue
index 5897289..e1ca90c 100644
--- a/src/pagesUI/editor/editor.vue
+++ b/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>
diff --git a/src/pagesUI/editor/files.vue b/src/pagesUI/editor/files.vue
index 8bc67b3..60dff2d 100644
--- a/src/pagesUI/editor/files.vue
+++ b/src/pagesUI/editor/files.vue
@@ -1,13 +1,36 @@
 <template>
-    <form action="/" :onSubmit="onSubmit">
-        <input type="text" placeholder="请输入文件名" />
-        <input type="submit" />
-    </form>
+    <div class="files">
+        {{ state.filelist }}
+        <form action="/" :onSubmit="onSubmit">
+            <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>