diff --git a/.browserslistrc b/.browserslistrc
index 214388f..256c3b8 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,3 +1,3 @@
-> 1%
-last 2 versions
-not dead
+> 1%
+last 2 versions
+not dead
diff --git a/.eslintrc.js b/.eslintrc.js
index fdf9906..d2669b2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,12 @@ module.exports = {
     parser: '@babel/eslint-parser',
   },
   rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        endofLine: 'auto',
+      },
+    ],
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
diff --git a/.gitignore b/.gitignore
index 403adbc..978f3df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,23 +1,23 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierignore b/.prettierignore
index 76add87..a0270fb 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,2 @@
-node_modules
+node_modules
 dist
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index f03c717..73c841c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,4 +4,5 @@
   "singleQuote": true,
   "semi": false,
   "printWidth": 120
+
 }
diff --git a/LICENSE b/LICENSE
index 76e0c3b..2bcf850 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 琴理工作室
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 琴理工作室
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 1250f92..e722d9c 100644
--- a/README.md
+++ b/README.md
@@ -29,4 +29,5 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ### 编辑器
-https://github.com/FE-Mars/monaco-editor-vue
\ No newline at end of file
+
+https://github.com/FE-Mars/monaco-editor-vue
diff --git a/src/App.vue b/src/App.vue
index 884d55f..300b051 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,20 @@
 <template>
   <div id="app">
+    <div>
+      <div>
+        <AllButton />
+      </div>
+    </div>
     <router-view />
-    <MonacoEditor
-      width="800"
-      height="500"
-      theme="vs-dark"
-      language="javascript"
-      :options="options"
-      @change="onChange"
-    ></MonacoEditor>
   </div>
 </template>
 <script>
-import MonacoEditor from 'monaco-editor-vue'
+import AllButton from './views/AllButton.vue'
+
 export default {
   name: 'App',
   components: {
-    MonacoEditor,
+    AllButton,
   },
   data() {
     return {
diff --git a/src/assets/img.jpg b/src/assets/img.jpg
new file mode 100644
index 0000000..e2f49fb
Binary files /dev/null and b/src/assets/img.jpg differ
diff --git a/src/components/MyAdd.vue b/src/components/MyAdd.vue
new file mode 100644
index 0000000..9bbf241
--- /dev/null
+++ b/src/components/MyAdd.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div><AllButton /></div>
+    <div class="waibian">
+      <div><img src="@/assets/img.jpg" class="imgs" /></div>
+      <div>链接:<input type="text" class="lianjie" :value="url" /></div>
+      <div>密码:<input type="text" class="mima" :value="secret" /></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MyAdd',
+  data() {
+    return {
+      url: JSON.parse(localStorage.getItem('URL')),
+      secret: JSON.parse(localStorage.getItem('SECRET')),
+    }
+  },
+}
+</script>
+<style>
+.imgs {
+  width: 600px;
+  height: 400px;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 68c8b6f..35b63ea 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,22 +1,40 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import MyFile from '../views/MyFile.vue'
+import MyAdd from '../components/MyAdd.vue'
+import ShowData from '../views/ShowData.vue'
+import MyUpdate from '../views/MyUpdate.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView,
+    redirect: '/myfile',
   },
   {
-    path: '/about',
-    name: 'about',
+    path: '/myfile',
+    name: 'myfile',
+    component: MyFile,
+  },
+  {
+    path: '/myadd',
+    name: 'myadd',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
+    component: MyAdd,
+  },
+
+  {
+    path: '/MyUpdate',
+    name: 'MyUpdate',
+    component: MyUpdate,
+  },
+  {
+    path: '/showdata',
+    name: 'showdata',
+    component: ShowData,
   },
 ]
 
diff --git a/src/store/bus.js b/src/store/bus.js
new file mode 100644
index 0000000..b0230b5
--- /dev/null
+++ b/src/store/bus.js
@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/AllButton.vue b/src/views/AllButton.vue
new file mode 100644
index 0000000..0ac2c4d
--- /dev/null
+++ b/src/views/AllButton.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-upload
+      class="upload-demo"
+      action="https://jsonplaceholder.typicode.com/posts/"
+      :on-change="handleChange"
+      :file-list="fileList"
+    >
+      <div class="updata">
+        <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
+      </div>
+    </el-upload>
+
+    <div class="search">
+      <el-button type="primary" icon="el-icon-search" name="first" @click="querySort">修改</el-button>
+    </div>
+    <div class="file">
+      <el-button type="primary" icon="el-icon-message" name="second" @click="file">文件</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      fileList: [],
+    }
+  },
+  methods: {
+    handleChange(file, fileList) {
+      this.fileList = fileList.slice(-3)
+    },
+    querySort() {
+      this.$router.push({ path: '/MyUpdate/' })
+    },
+    file() {
+      this.$router.push({ path: '/ShowData/' })
+    },
+  },
+}
+</script>
+
+<style>
+.button {
+  width: 80px;
+  height: 500px;
+  border-color: black;
+}
+.updata {
+  margin-left: -700px;
+  margin-top: 150px;
+}
+.search {
+  position: relative;
+  margin-left: -700px;
+  margin-top: 40px;
+}
+.file {
+  margin-top: 35px;
+  margin-left: -700px;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index 5515f22..0000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld,
-  },
-}
-</script>
diff --git a/src/views/MyFile.vue b/src/views/MyFile.vue
new file mode 100644
index 0000000..682bc25
--- /dev/null
+++ b/src/views/MyFile.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="app">
+    <div class="waibian">
+      <input type="text" class="neibian" />
+
+      <el-col :span="12">
+        <div class="sub-title"></div>
+        <el-autocomplete
+          class="inline-input"
+          v-model="state1"
+          :fetch-suggestions="querySearch"
+          placeholder="json"
+          @select="handleSelect"
+        ></el-autocomplete>
+      </el-col>
+
+      <div class="tijiao">
+        <el-button
+          type="primary"
+          plain
+          prop="tijiao"
+          @click="
+            submitForm()
+            jump()
+            go()
+          "
+          >提交</el-button
+        >
+      </div>
+    </div>
+    <MonacoEditor
+      width="555"
+      height="410"
+      class="mona"
+      theme="vs-dark"
+      language="javascript"
+      v-model="content"
+      :options="options"
+      @change="onChange"
+    ></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import MonacoEditor from 'monaco-editor-vue'
+import bus from '@/store/bus'
+
+export default {
+  name: 'App',
+  components: {
+    MonacoEditor,
+  },
+  data() {
+    return {
+      restaurants: [],
+      state1: '',
+      content: '',
+    }
+  },
+  methods: {
+    async submitForm() {
+      const { data: res } = await axios.post(
+        'https://mock.apifox.cn/m1/1111612-0-default/meta?apifoxResponseId=56847483',
+        {
+          content: this.content,
+        }
+      )
+      console.log(res)
+      console.log(res.data.url)
+      console.log(res.data.secret)
+      this.url = res.data.url
+      this.secret = res.data.secret
+      localStorage.setItem('URL', JSON.stringify(this.url))
+      localStorage.setItem('SECRET', JSON.stringify(this.secret))
+      if (res.code === 200) {
+        alert('提交失败！')
+      } else {
+        alert('提交成功！')
+      }
+    },
+    jump() {
+      this.$router.push({ path: '/MyAdd/' })
+    },
+    go() {
+      bus.$emit('toMyUpdate', this.options.value)
+    },
+
+    querySearch(queryString, cb) {
+      var restaurants = this.restaurants
+      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter(queryString) {
+      return (restaurant) => {
+        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      }
+    },
+    loadAll() {
+      return [{ value: 'yaml' }, { value: 'toml' }, { value: 'sh' }, { value: 'json' }]
+    },
+    handleSelect(item) {
+      console.log(item)
+    },
+  },
+  mounted() {
+    this.restaurants = this.loadAll()
+  },
+}
+</script>
+
+<style>
+.waibian {
+  height: 550px;
+  width: 600px;
+  border: 0.1em solid rgb(0, 0, 0);
+  margin-left: 480px;
+  margin-top: -200px;
+}
+.neibian {
+  margin: 0 auto;
+  height: 400px;
+  width: 550px;
+  border: 0.1em solid rgb(0, 0, 0);
+  margin-top: 20px;
+  margin-left: -2.5px;
+}
+.inline-input {
+  margin-top: 55px;
+  margin-left: 55px;
+}
+.tijiao {
+  margin-left: 450px;
+  margin-top: 50px;
+}
+.mona {
+  margin-left: 503px;
+  margin-top: -540px;
+}
+</style>
diff --git a/src/views/MyUpdate.vue b/src/views/MyUpdate.vue
new file mode 100644
index 0000000..688ab51
--- /dev/null
+++ b/src/views/MyUpdate.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="waibians">
+      <div>
+        <div class="jiazai">
+          <input type="text" v-model="secret" />
+        </div>
+        <div class="get">
+          <el-button type="primary" class="get" @click="get()">加载</el-button>
+        </div>
+        <div>
+          <input type="text" class="neibians" prop="content" id="content" />
+        </div>
+        <div class="dele">
+          <el-button type="primary" plain prop="tijiao" @click="update()">提交</el-button>
+        </div>
+        <div class="tijiaos">
+          <el-button type="primary" plain prop="tijiao" @click="dele()" id="dele">删除</el-button>
+        </div>
+      </div>
+      <MonacoEditor
+        width="555"
+        height="305"
+        class="monaz"
+        theme="vs-dark"
+        language="javascript"
+        v-model="content"
+        :options="options"
+        @change="onChange"
+      ></MonacoEditor>
+    </div>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from 'monaco-editor-vue'
+import axios from 'axios'
+import bus from '@/store/bus'
+export default {
+  name: 'App',
+  components: {
+    MonacoEditor,
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    bus.$on('toMyUpdate', (data) => {
+      this.options.value = data
+    })
+  },
+  methods: {
+    async get() {
+      const { data: res } = await axios.get('https://mock.apifox.cn/m1/1111612-0-default/meta', {
+        params: {
+          secret: this.secret,
+        },
+      })
+      console.log(res)
+      console.log(res.data.content)
+    },
+    async dele() {
+      const { data: res } = await axios.delete('https://mock.apifox.cn/m1/1111612-0-default/meta', {
+        params: {
+          secret: this.secret,
+        },
+      })
+      console.log(res)
+    },
+    myAxios(axiosConfig) {
+      const service = axios.create({
+        baseURL: 'https://mock.apifox.cn/m1/1111612-0-default/meta?apifoxResponseId=56847483', // 设置统一的请求前缀
+        timeout: 10000, // 设置统一的超时时长
+      })
+      return service(axiosConfig)
+    },
+
+    loginAPI() {
+      return this.myAxios({
+        url: 'https://mock.apifox.cn/m1/1111612-0-default/meta?apifoxResponseId=56847483',
+        method: 'put',
+        data: {
+          serect: this.serect,
+          content: this.content,
+        },
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+    },
+
+    async update() {
+      const res = await this.loginAPI(this.ruleForm)
+      if (res.code === 200) {
+        alert('修改失败！')
+      } else {
+        alert('修改成功！')
+      }
+    },
+  },
+}
+</script>
+<style>
+.jiazai {
+  margin-left: -300px;
+  margin-top: 50px;
+}
+.get {
+  margin-top: -30px;
+  margin-left: 150px;
+}
+
+.waibians {
+  height: 550px;
+  width: 600px;
+  border: 0.1em solid rgb(0, 0, 0);
+  margin-left: 480px;
+  margin-top: -250px;
+}
+.neibians {
+  margin: 0 auto;
+  height: 300px;
+  width: 550px;
+  border: 0.1em solid rgb(0, 0, 0);
+  margin-left: -2.5px;
+  margin-top: 35px;
+}
+.monaz {
+  margin-left: 20.5px;
+  margin-top: -385px;
+}
+.tijiaos {
+  margin-left: 350px;
+  margin-top: -35px;
+}
+.dele {
+  margin-left: -250px;
+  margin-top: 35px;
+}
+</style>
diff --git a/src/views/ShowData.vue b/src/views/ShowData.vue
new file mode 100644
index 0000000..65c03d7
--- /dev/null
+++ b/src/views/ShowData.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <div class="waibian"></div>
+  </div>
+</template>