diff --git a/package.json b/package.json
index 57912ffe..aaa3fd66 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
+    "js-yaml": "^4.1.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
     "normalize.css": "7.0.0",
diff --git a/src/views/deploy/app.vue b/src/views/deploy/app.vue
index 9c63775b..8ead89db 100644
--- a/src/views/deploy/app.vue
+++ b/src/views/deploy/app.vue
@@ -1,17 +1,124 @@
 <template>
-  <div class="app-container">
-    me
+  <div class="dashboard-editor-container">
+    <el-button class="edit-yaml-button" type="primary" @click="openYamlEditorDialog">编辑 YAML</el-button>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="cluster" label="Cluster" />
+      <el-table-column prop="namespace" label="Namespace" />
+      <el-table-column prop="name" label="Name" />
+      <el-table-column prop="status" label="Status" />
+      <el-table-column prop="ip" label="IP" />
+      <el-table-column prop="node" label="Node" />
+      <el-table-column prop="ready" label="Ready" />
+      <el-table-column prop="restarts" label="Restarts" />
+      <el-table-column prop="age" label="Age" />
+    </el-table>
+    <!-- YAML 编辑器弹框 -->
+    <el-dialog
+      title="编辑 YAML"
+      :visible.sync="yamlEditorVisible"
+      width="50%"
+      @close="closeYamlEditorDialog"
+    >
+      <div class="editor-container">
+        <textarea
+          v-model="yamlContent"
+          style="width: 100%; height: 400px;"
+          placeholder="编辑 YAML 内容"
+        />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeYamlEditorDialog">取消</el-button>
+        <el-button type="primary" @click="saveYamlChanges">部署</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-
+import { API_URL } from '@/config/APIconfig'
 export default {
-  name: 'Service',
+  name: 'DashboardAdmin',
   data() {
     return {
-      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+      tableData: [], // 初始为空数组，将在 mounted 时获取数据
+      yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
+      yamlContent: '' // YAML 编辑器中的内容
+    }
+  },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
+  methods: {
+    fetchTableData() {
+      fetch(API_URL + '/pod/show', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          // 假设 data 是包含 cluster_a 和 cluster_b 的结构，结合两者数据
+          const combinedData = [
+            ...data.cluster_a.map(item => ({ ...item, cluster: 'Cluster A' })),
+            ...data.cluster_b.map(item => ({ ...item, cluster: 'Cluster B' }))
+          ]
+
+          // 将 JSON 数据转换为表格所需格式
+          this.tableData = combinedData.map(node => ({
+            cluster: node.cluster,
+            namespace: node.NAMESPACE,
+            name: node.NAME,
+            status: node.STATUS,
+            ip: node.IP,
+            node: node.NODE,
+            ready: node.READY,
+            restarts: node.RESTARTS,
+            age: node.AGE
+          }))
+        })
+        .catch(error => console.error('Error fetching table data:', error))
+    },
+    openYamlEditorDialog() {
+      // 打开 YAML 编辑器弹框
+      this.yamlEditorVisible = true
+    },
+    closeYamlEditorDialog() {
+      // 关闭 YAML 编辑器弹框
+      this.yamlEditorVisible = false
+    },
+    saveYamlChanges() {
+      // 保存 YAML 数据，无需转换为 JSON
+      console.log('保存的 YAML 数据:', this.yamlContent)
+      this.closeYamlEditorDialog() // 关闭弹框
     }
   }
 }
 </script>
+
+  <style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+  </style>
diff --git a/src/views/deploy/service.vue b/src/views/deploy/service.vue
index 9c63775b..41f013a4 100644
--- a/src/views/deploy/service.vue
+++ b/src/views/deploy/service.vue
@@ -1,17 +1,140 @@
 <template>
-  <div class="app-container">
-    me
+  <div class="dashboard-editor-container">
+    <!-- 左上角的按钮 -->
+    <el-button class="edit-yaml-button" type="primary" @click="openYamlEditorDialog">编辑 YAML</el-button>
+
+    <!-- 表格展示 -->
+    <el-table :data="tableData" border style="width: 100%" :fit="true">
+      <el-table-column prop="cluster" label="Cluster" />
+      <el-table-column prop="namespace" label="Namespace" />
+      <el-table-column prop="name" label="Name" />
+      <el-table-column prop="type" label="Type" />
+      <el-table-column prop="clusterIp" label="Cluster IP" />
+      <el-table-column prop="externalIp" label="External IP" />
+      <el-table-column prop="ports" label="Ports" />
+      <el-table-column prop="age" label="Age" />
+    </el-table>
+
+    <!-- YAML 编辑器弹框 -->
+    <el-dialog
+      title="编辑 YAML"
+      :visible.sync="yamlEditorVisible"
+      width="50%"
+      @close="closeYamlEditorDialog"
+    >
+      <div class="editor-container">
+        <textarea
+          v-model="yamlContent"
+          style="width: 100%; height: 400px;"
+          placeholder="编辑 YAML 内容"
+        />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeYamlEditorDialog">取消</el-button>
+        <el-button type="primary" @click="saveYamlChanges">部署</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { API_URL } from '@/config/APIconfig'
 
 export default {
-  name: 'Service',
+  name: 'DashboardAdmin',
   data() {
     return {
-      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+      tableData: [], // 初始为空数组，将在 mounted 时获取数据
+      yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
+      yamlContent: '' // YAML 编辑器中的内容
+    }
+  },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
+  methods: {
+    fetchTableData() {
+      fetch(API_URL + '/service/show', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          // 假设 data 是包含 cluster_a 和 cluster_b 的结构，结合两者数据
+          const combinedData = [
+            ...data.cluster_a.map(item => ({ ...item, cluster: 'Cluster A' })),
+            ...data.cluster_b.map(item => ({ ...item, cluster: 'Cluster B' }))
+          ]
+
+          // 将 JSON 数据转换为表格所需格式
+          this.tableData = combinedData.map(service => ({
+            cluster: service.cluster,
+            namespace: service.NAMESPACE,
+            name: service.NAME,
+            type: service.TYPE,
+            clusterIp: service['CLUSTER-IP'],
+            externalIp: service['EXTERNAL-IP'],
+            ports: service['PORT(S)'],
+            age: service.AGE
+          }))
+
+          // 转换为 YAML 格式
+          // this.yamlContent = yaml.dump(combinedData)
+        })
+        .catch(error => console.error('Error fetching table data:', error))
+    },
+    openYamlEditorDialog() {
+      // 打开 YAML 编辑器弹框
+      this.yamlEditorVisible = true
+    },
+    closeYamlEditorDialog() {
+      // 关闭 YAML 编辑器弹框
+      this.yamlEditorVisible = false
+    },
+    saveYamlChanges() {
+      // 保存 YAML 数据，无需转换为 JSON
+      console.log('保存的 YAML 数据:', this.yamlContent)
+      this.closeYamlEditorDialog() // 关闭弹框
     }
   }
 }
 </script>
+
+  <style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .edit-yaml-button {
+      top: 16px;
+      left: 16px;
+    }
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+
+  .editor-container {
+    position: relative;
+    height: 100%;
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+  </style>