diff --git a/frontend/src/views/cross/java/Index.vue b/frontend/src/views/cross/java/Index.vue
index 982f344..30cca35 100644
--- a/frontend/src/views/cross/java/Index.vue
+++ b/frontend/src/views/cross/java/Index.vue
@@ -1,118 +1,102 @@
 <template>
-    <div id="app-cross-java">
-      <div class="one-block-1">
-        <span>
-          1. 基础控制
-        </span>
-      </div>  
-      <div class="one-block-2">
-        <a-space>
-          <a-button @click="create()"> 启动 </a-button>
-          <a-button @click="getUrl()"> 获取地址 </a-button>
-          <a-button @click="kill()"> kill </a-button>
-          <a-button @click="info()"> 查看 </a-button>
-        </a-space>
-      </div>
-      <div class="one-block-1">
-        <span>
-          2. 发送http请求
-        </span>
-      </div>  
-      <div class="one-block-2">
-        <a-space>
-          <a-button @click="request(1)"> 前端发送 </a-button>
-          <a-button @click="request(2)"> 主进程发送 </a-button>
-        </a-space>
-      </div>
-      <div class="one-block-1">
-        <span>
-          3. 多个服务
-        </span>
-      </div>  
-      <div class="one-block-2">
-        <a-space>
-          <a-button @click="create()"> 启动 </a-button>
-          <a-button @click="killAll()"> kill所有 </a-button>
-        </a-space>
-      </div>
+  <div id="app-cross-java">
+    <div class="one-block-1">
+      <span>
+        1. 基础控制
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="create()"> 启动 </a-button>
+        <a-button @click="getUrl()"> 获取地址 </a-button>
+        <a-button @click="kill()"> kill </a-button>
+        <a-button @click="info()"> 查看 </a-button>
+      </a-space>
     </div>
-  </template>
-  <script>
-  import { ipcApiRoute } from '@/api';
-  import { ipc } from '@/utils/ipcRenderer';
-  import axios from 'axios';
-  
-  export default {
-    data() {
-      return {
-        type: 1,
-        serverUrl: ''
-      };
-    },
-    methods: {
-      info() {
-        ipc.invoke(ipcApiRoute.cross.crossInfo, {}).then(res => {
-          console.log('res:', res);
-        }) 
-      },
-      getUrl() {
-        ipc.invoke(ipcApiRoute.cross.getCrossUrl, {name: 'javaapp'}).then(url => {
-          this.serverUrl = url;
-          this.$message.info(`服务地址: ${url}`);
-        }) 
-      },
-      kill() {
-        // name参数是 进程对象上的name，这里仅作为参照
-        ipc.invoke(ipcApiRoute.cross.killCrossServer, {type: 'one', name: 'javaapp'})
-      },
-      killAll() {
-        ipc.invoke(ipcApiRoute.cross.killCrossServer, {type: 'all', name: 'javaapp'})
-      },
-      create() {
-        ipc.invoke(ipcApiRoute.cross.createCrossServer, { program: 'java' })
-      },
-      request(type) {
-        if (type == 1 && this.serverUrl == "") {
-          this.$message.info("请先获取服务地址");
-          return
-        }
+    <div class="one-block-1">
+      <span>
+        2. 发送http请求
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="request(1)"> 前端发送 </a-button>
+        <a-button @click="request(2)"> 主进程发送 </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ipcApiRoute } from '@/api';
+import { ipc } from '@/utils/ipcRenderer';
+import axios from 'axios';
+import { ref } from 'vue';
+import { message } from 'ant-design-vue';
 
-        if (type == 1) {
-          const testApi = this.serverUrl + '/test1/get';
-          const cfg = {
-            method: 'get',
-            url: testApi,
-            params: { id: '1111111'},
-            timeout: 1000,
-          }
-          axios(cfg).then(res => {
-            console.log('res:', res);
-            const data = res.data || null;
-            this.$message.info(`服务返回: ${data}`);
-          })
-        } else {
-          ipc.invoke(ipcApiRoute.cross.requestApi, {name: 'javaapp', urlPath: '/test1/get', params: { id: '1111111'}}).then(res => {
-            console.log('res:', res);
-            const data = res || null;
-            this.$message.info(`服务返回: ${data}`);
-          }) 
-        }
-      }    
-    }
-  };
-  </script>
-  <style lang="less" scoped>
-  #app-cross-java {
-    padding: 0px 10px;
-    text-align: left;
-    width: 100%;
-    .one-block-1 {
-      font-size: 16px;
-      padding-top: 10px;
-    }
-    .one-block-2 {
-      padding-top: 10px;
-    }
+const serverUrl = ref('');
+
+function info() {
+  ipc.invoke(ipcApiRoute.cross.crossInfo, {}).then(res => {
+    console.log('res:', res);
+  }) 
+}
+
+function getUrl() {
+  ipc.invoke(ipcApiRoute.cross.getCrossUrl, {name: 'javaapp'}).then(url => {
+    serverUrl.value = url;
+    message.info(`服务地址: ${url}`);
+  }) 
+}
+
+function kill() {
+  // name参数是 进程对象上的name，这里仅作为参照
+  ipc.invoke(ipcApiRoute.cross.killCrossServer, {type: 'one', name: 'javaapp'})
+}
+
+function create() {
+  ipc.invoke(ipcApiRoute.cross.createCrossServer, { program: 'java' })
+}
+
+function request(type) {
+  if (type == 1 && serverUrl.value == "") {
+    message.info("请先获取服务地址");
+    return
   }
-  </style>
+
+  if (type == 1) {
+    const testApi = serverUrl.value + '/test1/get';
+    const cfg = {
+      method: 'get',
+      url: testApi,
+      params: { id: '1111111'},
+      timeout: 1000,
+    }
+    axios(cfg).then(res => {
+      console.log('res:', res);
+      const data = res.data || null;
+      message.info(`服务返回: ${data}`);
+    })
+  } else {
+    ipc.invoke(ipcApiRoute.cross.requestApi, {name: 'javaapp', urlPath: '/test1/get', params: { id: '1111111'}}).then(res => {
+      console.log('res:', res);
+      const data = res || null;
+      message.info(`服务返回: ${data}`);
+    }) 
+  }
+}  
+</script>
+<style lang="less" scoped>
+#app-cross-java {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>
   
\ No newline at end of file
diff --git a/frontend/src/views/cross/python/Index.vue b/frontend/src/views/cross/python/Index.vue
index e879d04..1983c55 100644
--- a/frontend/src/views/cross/python/Index.vue
+++ b/frontend/src/views/cross/python/Index.vue
@@ -1,117 +1,101 @@
 <template>
-    <div id="app-cross-python">
-      <div class="one-block-1">
-        <span>
-          1. 基础控制
-        </span>
-      </div>  
-      <div class="one-block-2">
-        <a-space>
-          <a-button @click="create()"> 启动 </a-button>
-          <a-button @click="getUrl()"> 获取地址 </a-button>
-          <a-button @click="kill()"> kill </a-button>
-          <a-button @click="info()"> test </a-button>
-        </a-space>
-      </div>
-      <div class="one-block-1">
-        <span>
-          2. 发送http请求
-        </span>
-      </div>  
-      <div class="one-block-2">
-        <a-space>
-          <a-button @click="request(1)"> 前端发送 </a-button>
-          <a-button @click="request(2)"> 主进程发送 </a-button>
-        </a-space>
-      </div>
-      <div class="one-block-1">
-        <span>
-          3. 多个服务
-        </span>
-      </div>  
-      <div class="one-block-2">
-        <a-space>
-          <a-button @click="create()"> 启动 </a-button>
-          <a-button @click="killAll()"> kill all </a-button>
-        </a-space>
-      </div>
+  <div id="app-cross-python">
+    <div class="one-block-1">
+      <span>
+        1. 基础控制
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="create()"> 启动 </a-button>
+        <a-button @click="getUrl()"> 获取地址 </a-button>
+        <a-button @click="kill()"> kill </a-button>
+        <a-button @click="info()"> test </a-button>
+      </a-space>
     </div>
-  </template>
-  <script>
-  import { ipcApiRoute } from '@/api';
-  import { ipc } from '@/utils/ipcRenderer';
-  import axios from 'axios';
-  
-  export default {
-    data() {
-      return {
-        type: 1,
-        serverUrl: ''
-      };
-    },
-    methods: {
-      info() {
-        ipc.invoke(ipcApiRoute.cross.crossInfo, {}).then(res => {
-          console.log('res:', res);
-        }) 
-      },
-      getUrl() {
-        ipc.invoke(ipcApiRoute.cross.getCrossUrl, {name: 'pyapp'}).then(url => {
-          this.serverUrl = url;
-          this.$message.info(`服务地址: ${url}`);
-        }) 
-      },
-      kill() {
-        // name参数是 进程对象上的name，这里仅作为参照
-        ipc.invoke(ipcApiRoute.cross.killCrossServer, {type: 'one', name: 'pyapp'})
-      },
-      killAll() {
-        ipc.invoke(ipcApiRoute.cross.killCrossServer, {type: 'all', name: 'pyapp'})
-      },
-      create() {
-        ipc.invoke(ipcApiRoute.cross.createCrossServer, { program: 'python' })
-      },
-      request(type) {
-        if (type == 1 && this.serverUrl == "") {
-          this.$message.info("请先获取服务地址");
-          return
-        }
-        if (type == 1) {
-          const testApi = this.serverUrl + '/api/hello';
-          const cfg = {
-            method: 'get',
-            url: testApi,
-            params: { id: '111'},
-            timeout: 1000,
-          }
-          axios(cfg).then(res => {
-            console.log('res:', res);
-            const data = res.data || null;
-            this.$message.info(`服务返回: ${JSON.stringify(data)}`);
-          })
-        } else {
-          ipc.invoke(ipcApiRoute.cross.requestApi, {name: 'pyapp', urlPath: '/api/hello'}).then(res => {
-            console.log('res:', res);
-            const data = res || null;
-            this.$message.info(`服务返回: ${JSON.stringify(data)}`);
-          }) 
-        }
-      }    
-    }
-  };
-  </script>
-  <style lang="less" scoped>
-  #app-cross-python {
-    padding: 0px 10px;
-    text-align: left;
-    width: 100%;
-    .one-block-1 {
-      font-size: 16px;
-      padding-top: 10px;
-    }
-    .one-block-2 {
-      padding-top: 10px;
-    }
+    <div class="one-block-1">
+      <span>
+        2. 发送http请求
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="request(1)"> 前端发送 </a-button>
+        <a-button @click="request(2)"> 主进程发送 </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ipcApiRoute } from '@/api';
+import { ipc } from '@/utils/ipcRenderer';
+import axios from 'axios';
+import { ref } from 'vue';
+import { message } from 'ant-design-vue';
+
+const serverUrl = ref('');
+
+function info() {
+  ipc.invoke(ipcApiRoute.cross.crossInfo, {}).then(res => {
+    console.log('res:', res);
+  }) 
+}
+
+function getUrl() {
+  ipc.invoke(ipcApiRoute.cross.getCrossUrl, {name: 'pyapp'}).then(url => {
+    serverUrl.value = url;
+    message.info(`服务地址: ${url}`);
+  }) 
+}
+
+function kill() {
+  // name参数是 进程对象上的name，这里仅作为参照
+  ipc.invoke(ipcApiRoute.cross.killCrossServer, {type: 'one', name: 'pyapp'})
+}
+
+function create() {
+  ipc.invoke(ipcApiRoute.cross.createCrossServer, { program: 'python' })
+}
+
+function request(type) {
+  if (type == 1 && serverUrl.value == "") {
+    message.info("请先获取服务地址");
+    return
   }
-  </style>
+  if (type == 1) {
+    const testApi = serverUrl.value + '/api/hello';
+    const cfg = {
+      method: 'get',
+      url: testApi,
+      params: { id: '111'},
+      timeout: 1000,
+    }
+    axios(cfg).then(res => {
+      console.log('res:', res);
+      const data = res.data || null;
+      message.info(`服务返回: ${JSON.stringify(data)}`);
+    })
+  } else {
+    ipc.invoke(ipcApiRoute.cross.requestApi, {name: 'pyapp', urlPath: '/api/hello'}).then(res => {
+      console.log('res:', res);
+      const data = res || null;
+      message.info(`服务返回: ${JSON.stringify(data)}`);
+    }) 
+  }
+}
+</script>
+<style lang="less" scoped>
+#app-cross-python {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>
   
\ No newline at end of file