diff --git a/.eslintrc.js b/.eslintrc.js
index c977505478d..bd03f8edfc7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -69,6 +69,7 @@ module.exports = {
       'newIsCap': true,
       'capIsNew': false
     }],
+    'vue/no-unused-components': 'off',
     'new-parens': 2,
     'no-array-constructor': 2,
     'no-caller': 2,
diff --git a/package.json b/package.json
index 02f68e23764..aaa3fd6695f 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",
@@ -35,13 +36,16 @@
     "script-loader": "0.7.2",
     "sortablejs": "1.8.4",
     "tui-editor": "1.3.3",
+    "vis-network": "^9.1.9",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
-    "xlsx": "0.14.1"
+    "xlsx": "0.14.1",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",
diff --git a/src/assets/custom-theme/topology.png b/src/assets/custom-theme/topology.png
new file mode 100644
index 00000000000..8ccaf628888
Binary files /dev/null and b/src/assets/custom-theme/topology.png differ
diff --git a/src/config/APIconfig.js b/src/config/APIconfig.js
new file mode 100644
index 00000000000..561c2976878
--- /dev/null
+++ b/src/config/APIconfig.js
@@ -0,0 +1,2 @@
+// src/config/apiConfig.js
+export const API_URL = 'http://localhost:3000'
diff --git a/src/router/index.js b/src/router/index.js
index 2be959d2957..a657eec16ff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,10 +7,10 @@ Vue.use(Router)
 import Layout from '@/layout'
 
 /* Router Modules */
-import componentsRouter from './modules/components'
+// import componentsRouter from './modules/components'
 import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
+// import nestedRouter from './modules/nested'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -79,46 +79,32 @@ export const constantRoutes = [
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: 'dashboard', affix: true }
       }
     ]
   },
   {
-    path: '/documentation',
+    path: '/grafana',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
+        component: () => import('@/views/grafana/index'),
+        name: 'Grafana',
+        meta: { title: '算力可视化', icon: 'chart', affix: true }
       }
     ]
   },
   {
-    path: '/guide',
+    path: '/schedule',
     component: Layout,
-    redirect: '/guide/index',
+    redirect: '/schedule/index',
     children: [
       {
         path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
-      }
-    ]
-  },
-  {
-    path: '/profile',
-    component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: { title: 'Profile', icon: 'user', noCache: true }
+        component: () => import('@/views/schedule/index'),
+        name: 'Schedule',
+        meta: { title: '调度决策', icon: 'guide', noCache: true }
       }
     ]
   }
@@ -129,256 +115,18 @@ export const constantRoutes = [
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
-  {
-    path: '/permission',
-    component: Layout,
-    redirect: '/permission/page',
-    alwaysShow: true, // will always show the root menu
-    name: 'Permission',
-    meta: {
-      title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
-    },
-    children: [
-      {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
-        meta: {
-          title: 'Page Permission',
-          roles: ['admin'] // or you can only set roles in sub nav
-        }
-      },
-      {
-        path: 'directive',
-        component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
-        meta: {
-          title: 'Directive Permission'
-          // if do not set roles, means: this page does not require permission
-        }
-      },
-      {
-        path: 'role',
-        component: () => import('@/views/permission/role'),
-        name: 'RolePermission',
-        meta: {
-          title: 'Role Permission',
-          roles: ['admin']
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/icon',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/icons/index'),
-        name: 'Icons',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
-      }
-    ]
-  },
-
   /** when your routing map is too long, you can split it into small modules **/
-  componentsRouter,
   chartsRouter,
-  nestedRouter,
   tableRouter,
-
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
-    meta: {
-      title: 'Example',
-      icon: 'el-icon-s-help'
-    },
-    children: [
-      {
-        path: 'create',
-        component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
-      },
-      {
-        path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
-        hidden: true
-      },
-      {
-        path: 'list',
-        component: () => import('@/views/example/list'),
-        name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
-      }
-    ]
-  },
-
-  {
-    path: '/tab',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/tab/index'),
-        name: 'Tab',
-        meta: { title: 'Tab', icon: 'tab' }
-      }
-    ]
-  },
-
-  {
-    path: '/error',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
-    meta: {
-      title: 'Error Pages',
-      icon: '404'
-    },
-    children: [
-      {
-        path: '401',
-        component: () => import('@/views/error-page/401'),
-        name: 'Page401',
-        meta: { title: '401', noCache: true }
-      },
-      {
-        path: '404',
-        component: () => import('@/views/error-page/404'),
-        name: 'Page404',
-        meta: { title: '404', noCache: true }
-      }
-    ]
-  },
-
   {
-    path: '/error-log',
-    component: Layout,
-    children: [
-      {
-        path: 'log',
-        component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
-      }
-    ]
-  },
-
-  {
-    path: '/excel',
-    component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
-    meta: {
-      title: 'Excel',
-      icon: 'excel'
-    },
-    children: [
-      {
-        path: 'export-excel',
-        component: () => import('@/views/excel/export-excel'),
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
-      },
-      {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/select-excel'),
-        name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
-      },
-      {
-        path: 'export-merge-header',
-        component: () => import('@/views/excel/merge-header'),
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
-      },
-      {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/upload-excel'),
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
-      }
-    ]
-  },
-
-  {
-    path: '/zip',
-    component: Layout,
-    redirect: '/zip/download',
-    alwaysShow: true,
-    name: 'Zip',
-    meta: { title: 'Zip', icon: 'zip' },
-    children: [
-      {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
-      }
-    ]
-  },
-
-  {
-    path: '/pdf',
-    component: Layout,
-    redirect: '/pdf/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
-      }
-    ]
-  },
-  {
-    path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
-    hidden: true
-  },
-
-  {
-    path: '/theme',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/theme/index'),
-        name: 'Theme',
-        meta: { title: 'Theme', icon: 'theme' }
-      }
-    ]
-  },
-
-  {
-    path: '/clipboard',
+    path: '/icon',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
-        meta: { title: 'Clipboard', icon: 'clipboard' }
-      }
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'External Link', icon: 'link' }
+        component: () => import('@/views/icons/index'),
+        name: 'Icons',
+        meta: { title: '服务访问', icon: 'link', noCache: true }
       }
     ]
   },
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index 29684dec0ed..7c823a0f0a5 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -3,32 +3,38 @@
 import Layout from '@/layout'
 
 const chartsRouter = {
-  path: '/charts',
+  path: '/route',
   component: Layout,
   redirect: 'noRedirect',
-  name: 'Charts',
+  name: 'Route',
   meta: {
-    title: 'Charts',
-    icon: 'chart'
+    title: '路由控制',
+    icon: 'tree'
   },
   children: [
     {
-      path: 'keyboard',
-      component: () => import('@/views/charts/keyboard'),
-      name: 'KeyboardChart',
-      meta: { title: 'Keyboard Chart', noCache: true }
+      path: 'show_paths',
+      component: () => import('@/views/route/show_paths'),
+      name: 'ShowPaths',
+      meta: { title: '查看最短路径', noCache: true }
     },
     {
-      path: 'line',
-      component: () => import('@/views/charts/line'),
-      name: 'LineChart',
-      meta: { title: 'Line Chart', noCache: true }
+      path: 'show_sid',
+      component: () => import('@/views/route/show_sid'),
+      name: 'ShowSID',
+      meta: { title: '查看SID', noCache: true }
     },
     {
-      path: 'mix-chart',
-      component: () => import('@/views/charts/mix-chart'),
-      name: 'MixChart',
-      meta: { title: 'Mix Chart', noCache: true }
+      path: 'show_policy',
+      component: () => import('@/views/route/show_policy.vue'),
+      name: 'ShowPolicy',
+      meta: { title: '路由策略管理', noCache: true }
+    },
+    {
+      path: 'show_steer',
+      component: () => import('@/views/route/show_steer'),
+      name: 'ShowSteer',
+      meta: { title: '引导策略管理', noCache: true }
     }
   ]
 }
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
index ec28c527c82..f87def564d3 100644
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@@ -3,38 +3,26 @@
 import Layout from '@/layout'
 
 const tableRouter = {
-  path: '/table',
+  path: '/deploy',
   component: Layout,
-  redirect: '/table/complex-table',
-  name: 'Table',
+  redirect: '/deploy/app',
+  name: 'Deploy',
   meta: {
-    title: 'Table',
-    icon: 'table'
+    title: '算力请求',
+    icon: 'edit'
   },
   children: [
     {
-      path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
+      path: 'app',
+      component: () => import('@/views/deploy/app.vue'),
+      name: 'DeployApp',
+      meta: { title: '应用部署' }
     },
     {
-      path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
-      meta: { title: 'Drag Table' }
-    },
-    {
-      path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
-    },
-    {
-      path: 'complex-table',
-      component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
-      meta: { title: 'Complex Table' }
+      path: 'service',
+      component: () => import('@/views/deploy/service.vue'),
+      name: 'DeployService',
+      meta: { title: '服务部署' }
     }
   ]
 }
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8cb557be1f4..db5f2c35e9a 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,97 +1,73 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
+    <el-image style="width: 100%; height: 100%" :src="require('@/assets/custom-theme/topology.png')" fit="fill" />
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="cluster" label="所属集群" width="150" />
+      <el-table-column prop="name" label="Node 名称" width="150" />
+      <el-table-column prop="address" label="Node IP" />
+      <el-table-column prop="role" label="Role" />
+      <el-table-column prop="uuid" label="算力统一标识" />
+      <el-table-column prop="status" label="状态" width="100">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status === 'Ready' ? 'success' : 'danger'" disable-transitions>{{ scope.row.status
+          }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
+import { API_URL } from '@/config/APIconfig'
 export default {
   name: 'DashboardAdmin',
-  components: {
-    GithubCorner,
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
-  },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      tableData: [] // 初始为空数组，将在 mounted 时获取数据
     }
   },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+    fetchTableData() {
+      fetch(API_URL + '/dashboard/nodes', {
+        method: 'Get',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          // 转换数据为json并处理
+          console.log('looking handsome', data)
+
+          // 创建一个空数组来存储表格数据
+          const tableData = []
+
+          // 遍历 cluster_a 和 cluster_b 集群的数据
+          Object.keys(data).forEach(cluster => {
+            data[cluster].forEach(node => {
+              console.log(cluster)
+              // 将每个节点信息转换为表格所需格式
+              tableData.push({
+                cluster: cluster, // 当前集群名
+                name: node.NAME, // 节点名称
+                address: node.ADDRESS, // 节点 IP 地址
+                role: node.ROLES, // 节点角色
+                status: node.STATUS, // 节点状态
+                uuid: node.UUID.replace('uuid=', '') // 处理 UUID 去掉 "uuid=" 字符串
+              })
+            })
+          })
+
+          // 将转换后的数据赋值给表格的数据
+          this.tableData = tableData
+        })
+        .catch(error => console.error('Error fetching table data:', error))
     }
+
   }
 }
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1720ea8fae9..b8a132801cf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="dashboard-container">
     <component :is="currentRole" />
+
   </div>
 </template>
 
diff --git a/src/views/deploy/app.vue b/src/views/deploy/app.vue
new file mode 100644
index 00000000000..de385715899
--- /dev/null
+++ b/src/views/deploy/app.vue
@@ -0,0 +1,196 @@
+<template>
+  <div v-loading="loading" 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%" height="800">
+      <el-table-column prop="cluster" label="集群" />
+      <el-table-column prop="namespace" label="Namespace" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="status" label="状态" />
+      <el-table-column prop="ip" label="IP" />
+      <el-table-column prop="node" label="Node" />
+      <el-table-column prop="ready" label="就绪" />
+      <el-table-column prop="restarts" label="重启" />
+      <el-table-column prop="age" label="寿命" />
+    </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: 'DashboardAdmin',
+  data() {
+    return {
+      tableData: [], // 初始为空数组，将在 mounted 时获取数据
+      yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
+      yamlContent: `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: web
+  namespace: default
+  annotations:       # 记录回滚参数
+    kubernetes.io/change-cause: "web.v1-nginx-1.19"   #记录到revision中的内容，记录版本号
+spec:
+  replicas: 3 # Pod副本预期数量
+  revisionHistoryLimit: 10 # RS历史版本保存数量
+  selector:
+    matchLabels:
+      app: web
+  strategy:
+    rollingUpdate:
+      maxSurge: 25%             # 滚动更新过程最大pod副本数
+      maxUnavailable: 25%       # 滚动更新过程中最大不可用pod副本数，
+    type: RollingUpdate
+  template:
+    metadata:
+      labels:
+        app: web # Pod副本的标签
+    spec:
+      containers:
+      - name: web
+        image: nginx:1.16
+        readinessProbe:          # 存活检查,如果失败，将杀死容器，来重启
+          httpGet:
+            port: 80
+            path: /index.html
+          initialDelaySeconds: 10 # 启动容器后多少秒健康检查
+          periodSeconds: 10 # 以后间隔多少秒检查一次
+
+        livenessProbe:   # 就绪检查，失败就会剔除 service 
+          httpGet:
+            port: 80
+            path: /index.html`, // YAML 默认内容
+      loading: false
+    }
+  },
+  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() {
+      console.log('保存的 YAML 数据:', this.yamlContent)
+      this.loading = true
+      fetch(API_URL + '/pod/deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          yaml: this.yamlContent // 将 YAML 内容作为请求体中的 "yaml" 字段
+        })
+      })
+        .then(response => {
+          console.log('meme')
+          if (!response.ok) {
+            throw new Error('请求失败，状态码: ' + response.status)
+          }
+          return response.json() // 将响应解析为 JSON
+        })
+        .then(data => {
+          // 处理后端返回的数据
+          console.log('后端响应数据:', data)
+          if (!data.error) {
+            console.log('部署输出:', data.stdout)
+            this.$notify({
+              title: '调度成功',
+              message: '该应用已被调度到集群' + data.dst + '上\n' + data.stdout,
+              type: 'success'
+            })
+          } else if (data.error) {
+            console.error('部署错误:', data.error)
+            this.$notify.error({
+              title: '调度失败',
+              message: '调度失败'
+            })
+          }
+
+          this.fetchTableData()
+          this.loading = false
+        })
+        .catch(error => {
+          // 处理请求或解析中的任何错误
+          console.error('请求出错:', error)
+        })
+        .finally(() => {
+          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
new file mode 100644
index 00000000000..abb650d53da
--- /dev/null
+++ b/src/views/deploy/service.vue
@@ -0,0 +1,194 @@
+<template>
+  <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="集群" />
+      <el-table-column prop="namespace" label="Namespace" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="clusterIp" label="集群 IP" />
+      <el-table-column prop="externalIp" label="外部 IP" />
+      <el-table-column prop="ports" label="端口" />
+      <el-table-column prop="age" label="寿命" />
+    </el-table>
+
+    <!-- YAML 编辑器弹框 -->
+    <el-dialog title="编辑 YAML" :visible.sync="yamlEditorVisible" width="50%" @close="closeYamlEditorDialog">
+      <el-select v-model="value" placeholder="请选择">
+        <el-option v-for="item in ['a','b']" :key="item" :label="item" :value="item" />
+      </el-select>
+      <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: 'DashboardAdmin',
+  data() {
+    return {
+      tableData: [], // 初始为空数组，将在 mounted 时获取数据
+      yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
+      yamlContent: `apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: web
+  name: web
+spec:
+  type: NodePort # 服务类型
+  ports:
+  - port: 80 # Service端口
+    protocol: TCP # 协议
+    targetPort: 80 # 容器端口
+    nodePort: 30009  # 对外暴露的端口，可以指定
+  selector:
+    app: web # 指定关联Pod的标签`, // YAML 编辑器中的内容
+      loading: false,
+      value: ''
+    }
+  },
+  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() {
+      console.log('保存的 YAML 数据:', this.yamlContent)
+      console.log(this.value)
+      this.loading = true
+      fetch(API_URL + '/service/deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          dst: this.value,
+          yaml: this.yamlContent // 将 YAML 内容作为请求体中的 "yaml" 字段
+        })
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('请求失败，状态码: ' + response.status)
+          }
+          return response.json() // 将响应解析为 JSON
+        })
+        .then(data => {
+          // 处理后端返回的数据
+          console.log('后端响应数据:', data)
+          if (!data.error) {
+            console.log('部署输出:', data.stdout)
+            this.$notify({
+              title: '调度成功',
+              message: '该服务已被部署到集群' + this.value + '上\n' + data.stdout,
+              type: 'success'
+            })
+          } else if (data.error) {
+            console.error('部署错误:', data.error)
+            this.$notify.error({
+              title: '调度失败',
+              message: '调度失败'
+            })
+          }
+
+          this.fetchTableData()
+          this.loading = false
+        })
+        .catch(error => {
+          // 处理请求或解析中的任何错误
+          console.error('请求出错:', error)
+        })
+        .finally(() => {
+          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>
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
deleted file mode 100644
index 09f5951bc15..00000000000
--- a/src/views/documentation/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="app-container documentation-container">
-    <a class="document-btn" target="_blank" href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=demo_English_button">Java backend integration</a>
-    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
-    <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
-    <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
-    <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
-    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
-  </div>
-</template>
-
-<script>
-import DropdownMenu from '@/components/Share/DropdownMenu'
-
-export default {
-  name: 'Documentation',
-  components: { DropdownMenu },
-  data() {
-    return {
-      articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.documentation-container {
-  margin: 50px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .document-btn {
-    flex-shrink: 0;
-    display: block;
-    cursor: pointer;
-    background: black;
-    color: white;
-    height: 60px;
-    padding: 0 16px;
-    margin: 16px;
-    line-height: 60px;
-    font-size: 20px;
-    text-align: center;
-  }
-}
-</style>
diff --git a/src/views/grafana/index.vue b/src/views/grafana/index.vue
new file mode 100644
index 00000000000..8c4e07bef22
--- /dev/null
+++ b/src/views/grafana/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container documentation-container">
+    <iframe src="http://localhost:3030/d/rYdddlPWk/node-exporter-full" frameborder="0" name="popup" class="web" />
+  </div>
+</template>
+
+<script>
+import DropdownMenu from '@/components/Share/DropdownMenu'
+
+export default {
+  name: 'Documentation',
+  components: { DropdownMenu },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.documentation-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: 0px;
+
+  .document-btn {
+    flex-shrink: 0;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    padding: 0 16px;
+    margin: 16px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+  }
+
+  .web {
+    display: inline;
+    width: 100%;
+    height: 90vh;
+  }
+}
+</style>
diff --git a/src/views/icons/index.vue b/src/views/icons/index.vue
index 4c483db4ffa..debaf5dbcf6 100644
--- a/src/views/icons/index.vue
+++ b/src/views/icons/index.vue
@@ -1,101 +1,52 @@
 <template>
   <div class="icons-container">
-    <aside>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
-      </a>
-    </aside>
-    <el-tabs type="border-card">
-      <el-tab-pane label="Icons">
-        <div class="grid">
-          <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
-            <el-tooltip placement="top">
-              <div slot="content">
-                {{ generateIconCode(item) }}
-              </div>
-              <div class="icon-item">
-                <svg-icon :icon-class="item" class-name="disabled" />
-                <span>{{ item }}</span>
-              </div>
-            </el-tooltip>
-          </div>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="Element-UI Icons">
-        <div class="grid">
-          <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
-            <el-tooltip placement="top">
-              <div slot="content">
-                {{ generateElementIconCode(item) }}
-              </div>
-              <div class="icon-item">
-                <i :class="'el-icon-' + item" />
-                <span>{{ item }}</span>
-              </div>
-            </el-tooltip>
-          </div>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
+    <div ref="terminalContainer" style="height:90vh; width: 100%;" />
   </div>
 </template>
 
 <script>
-import clipboard from '@/utils/clipboard'
-import svgIcons from './svg-icons'
-import elementIcons from './element-icons'
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
 
 export default {
-  name: 'Icons',
-  data() {
-    return {
-      svgIcons,
-      elementIcons
-    }
+  name: 'TerminalComponent',
+  mounted() {
+    this.initTerminal()
   },
   methods: {
-    generateIconCode(symbol) {
-      return `<svg-icon icon-class="${symbol}" />`
-    },
-    generateElementIconCode(symbol) {
-      return `<i class="el-icon-${symbol}" />`
-    },
-    handleClipboard(text, event) {
-      clipboard(text, event)
+    initTerminal() {
+      const terminal = new Terminal()
+      const fitAddon = new FitAddon()
+
+      terminal.loadAddon(fitAddon)
+      terminal.open(this.$refs.terminalContainer)
+      fitAddon.fit()
+
+      // 连接到 WebSocket 服务器
+      const socket = new WebSocket('ws://localhost:2999')
+
+      socket.onopen = () => {
+        console.log('WebSocket 连接已建立')
+      }
+
+      socket.onmessage = (event) => {
+        // 将服务器的响应显示在终端中
+        terminal.write(event.data)
+      }
+
+      terminal.onData(data => {
+        // 将终端的输入发送到服务器
+        socket.send(data)
+      })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
 .icons-container {
   margin: 10px 20px 0;
   overflow: hidden;
-
-  .grid {
-    position: relative;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  }
-
-  .icon-item {
-    margin: 20px;
-    height: 85px;
-    text-align: center;
-    width: 100px;
-    float: left;
-    font-size: 30px;
-    color: #24292e;
-    cursor: pointer;
-  }
-
-  span {
-    display: block;
-    font-size: 16px;
-    margin-top: 10px;
-  }
-
-  .disabled {
-    pointer-events: none;
-  }
 }
 </style>
diff --git a/src/views/route/add_policy.vue b/src/views/route/add_policy.vue
new file mode 100644
index 00000000000..7862c97edfe
--- /dev/null
+++ b/src/views/route/add_policy.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="add-policy">
+    <h2>添加SRv6路由策略</h2>
+
+    <!-- 输入表单 -->
+    <form @submit.prevent="submitPolicy">
+      <div class="form-group">
+        <label for="router">路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bsid">绑定 SID (BSID)</label>
+        <input id="bsid" v-model="bsid" type="text" required placeholder="fe00::1a">
+      </div>
+
+      <div class="form-group">
+        <label for="sids">SIDs (逗号分隔)</label>
+        <input id="sids" v-model="sids" type="text" required placeholder="fc00:1::a,fc00:2::a">
+      </div>
+
+      <button type="submit">添加路由</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>Error: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { API_URL } from '@/config/APIconfig'
+export default {
+  data() {
+    return {
+      router: '', // 路由器选择
+      bsid: '', // BSID
+      sids: '', // SIDs
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitPolicy() {
+      try {
+        const data = {
+          bsid: this.bsid,
+          sids: this.sids
+        }
+
+        const response = await axios.post(API_URL + `/route/add_policy?router=${this.router}`, data, {
+          headers: { 'Content-Type': 'application/json' }
+        })
+
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化结果信息
+        this.error = null
+      } catch (error) {
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input, .form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message, .error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>
diff --git a/src/views/route/del_policy.vue b/src/views/route/del_policy.vue
new file mode 100644
index 00000000000..6ba3e3d132a
--- /dev/null
+++ b/src/views/route/del_policy.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="del-policy">
+    <h2>删除 SRv6 策略</h2>
+
+    <!-- 表单 -->
+    <form @submit.prevent="submitDelPolicy">
+      <div class="form-group">
+        <label for="router">选择路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bsid">BSID</label>
+        <input
+          id="bsid"
+          v-model="bsid"
+          type="text"
+          required
+          placeholder="请输入 Binding SID，如 fe00:1::1"
+        >
+      </div>
+
+      <button type="submit">删除策略</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>错误: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { API_URL } from '@/config/APIconfig'
+export default {
+  data() {
+    return {
+      router: '', // 选择的路由器
+      bsid: '', // Binding SID
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitDelPolicy() {
+      try {
+        // 删除请求需要的 body 数据
+        const data = {
+          bsid: this.bsid
+        }
+
+        // 发送 DELETE 请求
+        const response = await axios.delete(
+          API_URL + `/route/del_policy?router=${this.router}`,
+          {
+            headers: { 'Content-Type': 'application/json' },
+            data
+          }
+        )
+
+        // 处理返回结果
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化返回结果
+        this.error = null
+      } catch (error) {
+        // 处理错误
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.del-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message,
+.error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>
diff --git a/src/views/route/del_steer.vue b/src/views/route/del_steer.vue
new file mode 100644
index 00000000000..83ee6f2afe5
--- /dev/null
+++ b/src/views/route/del_steer.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="del-steer-policy">
+    <h2>删除引导策略</h2>
+
+    <!-- 表单 -->
+    <form @submit.prevent="submitDelSteerPolicy">
+      <div class="form-group">
+        <label for="router">选择路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="ip_prefix">目标IP</label>
+        <input
+          id="ip_prefix"
+          v-model="ip_prefix"
+          type="text"
+          required
+          placeholder="请输入目标 IP，如 10.10.0.0/24"
+        >
+      </div>
+
+      <button type="submit">删除引导策略</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>错误: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      router: '', // 选择的路由器
+      ip_prefix: '', // IP 前缀
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitDelSteerPolicy() {
+      try {
+        // 删除请求需要的 body 数据
+        const data = {
+          ip_prefix: this.ip_prefix
+        }
+
+        // 发送 DELETE 请求
+        const response = await axios.delete(
+          API_URL + `/route/del_steer?router=${this.router}`,
+          {
+            headers: { 'Content-Type': 'application/json' },
+            data
+          }
+        )
+
+        // 处理返回结果
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化返回结果
+        this.error = null
+      } catch (error) {
+        // 处理错误
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.del-steer-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message,
+.error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>
diff --git a/src/views/route/show_paths.vue b/src/views/route/show_paths.vue
new file mode 100644
index 00000000000..ccc0d309b64
--- /dev/null
+++ b/src/views/route/show_paths.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="show-paths">
+    <h2>最短路径信息</h2>
+    <!-- 检查是否在加载状态 -->
+    <div v-if="loading">加载中...</div>
+
+    <!-- 如果有路径数据则显示 -->
+    <div v-else>
+      <ul v-if="paths.length > 0">
+        <li v-for="(path, index) in paths" :key="index">{{ path }}</li>
+      </ul>
+
+      <!-- 如果没有路径数据则显示消息 -->
+      <div v-else>
+        <p>未找到</p>
+      </div>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>加载路径错误: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+import axios from 'axios'
+
+export default {
+  name: 'ShowPaths',
+  data() {
+    return {
+      paths: [],
+      loading: false,
+      error: null
+    }
+  },
+  mounted() {
+    // 组件挂载时请求路径数据
+    this.fetchPaths()
+  },
+  methods: {
+    // 请求 API 以获取路径信息
+    fetchPaths() {
+      this.loading = true
+      this.error = null
+      axios
+        .get(API_URL + '/route/show_paths')
+        .then((response) => {
+          // 检查响应中是否有 paths 数据
+          if (response.data && response.data.paths) {
+            this.paths = response.data.paths
+          } else {
+            this.error = 'No paths data found in the response.'
+          }
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching paths.'
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.show-paths {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/route/show_policy.vue b/src/views/route/show_policy.vue
new file mode 100644
index 00000000000..713570c95bb
--- /dev/null
+++ b/src/views/route/show_policy.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="policy-management">
+    <div class="header">
+      <h2>路由策略管理</h2>
+      <el-button type="primary" @click="openAddPolicyDialog">添加策略</el-button>
+    </div>
+
+    <div class="router-selector">
+      <label for="router-select">选择路由器: </label>
+      <el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
+        <el-option label="r0" value="r0" />
+        <el-option label="r3" value="r3" />
+        <el-option label="r6" value="r6" />
+      </el-select>
+    </div>
+
+    <el-table :data="policies" border style="width: 100%" height="400">
+      <el-table-column label="BSID" prop="BSID" />
+      <el-table-column label="行为" prop="Behavior" />
+      <el-table-column label="类型" prop="Type" />
+      <el-table-column label="FIB 表" prop="FIB_table" />
+      <el-table-column label="Segment 列表" prop="Segment_Lists" />
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.BSID)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加策略弹窗 -->
+    <el-dialog
+      title="添加SRv6路由策略"
+      :visible.sync="isAddPolicyDialogVisible"
+      width="400px"
+      @close="resetForm"
+    >
+      <el-form ref="policyForm" :model="policyForm" label-width="100px">
+        <el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
+          <el-select v-model="policyForm.router" placeholder="选择路由器">
+            <el-option label="r0" value="r0" />
+            <el-option label="r3" value="r3" />
+            <el-option label="r6" value="r6" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
+          <el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
+        </el-form-item>
+
+        <el-form-item label="SID列表" prop="sids" :rules="[{ required: true, message: '请输入SID', trigger: 'blur' }]">
+          <el-input v-model="policyForm.sids" placeholder="fc00:1::a,fc00:2::a(逗号分隔)" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitPolicy">添加路由</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { API_URL } from '@/config/APIconfig'
+
+export default {
+  name: 'PolicyManagement',
+  data() {
+    return {
+      selectedRouter: 'r0', // 默认路由器
+      policies: [], // 存储策略信息
+      error: null,
+      loading: false,
+      isAddPolicyDialogVisible: false, // 控制弹窗显示
+      policyForm: {
+        router: '',
+        bsid: '',
+        sids: ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchPolicies()
+  },
+  methods: {
+    // 获取策略信息
+    fetchPolicies() {
+      axios.get(`${API_URL}/route/show_policy?router=${this.selectedRouter}`)
+        .then(response => {
+          if (response.data.policies) {
+            this.policies = response.data.policies
+          }
+        })
+        .catch(error => {
+          console.error('获取策略数据失败:', error)
+        })
+    },
+    // 删除策略
+    deletePolicy(bsid) {
+      axios.delete(`${API_URL}/route/del_policy?router=${this.selectedRouter}`, {
+        data: {
+          bsid: bsid // 将 bsid 放在请求体中
+        }
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('删除成功')
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('删除失败')
+          }
+        })
+        .catch(error => {
+          console.error('删除策略失败:', error)
+          this.$message.error('删除失败')
+        })
+    },
+    // 打开添加策略弹窗
+    openAddPolicyDialog() {
+      this.isAddPolicyDialogVisible = true
+    },
+    // 提交添加策略
+    submitPolicy() {
+      axios.post(`${API_URL}/route/add_policy?router=${this.policyForm.router}`, {
+        bsid: this.policyForm.bsid,
+        sids: this.policyForm.sids
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('添加成功')
+            this.isAddPolicyDialogVisible = false
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('添加失败')
+          }
+        })
+        .catch(error => {
+          console.error('添加策略失败:', error)
+          this.$message.error('添加失败')
+        })
+    },
+    // 重置表单
+    resetForm() {
+      this.policyForm.bsid = ''
+      this.policyForm.sids = ''
+      this.policyForm.router = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.policy-management {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+.el-table {
+  margin-top: 20px;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+
+.el-button {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/route/show_sid.vue b/src/views/route/show_sid.vue
new file mode 100644
index 00000000000..e461a4a0a3a
--- /dev/null
+++ b/src/views/route/show_sid.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="show-sid">
+    <h2>SID信息</h2>
+
+    <!-- 下拉选择路由器 -->
+    <div class="router-selector">
+      <label for="router">选择路由器:</label>
+      <select v-model="selectedRouter" @change="fetchSIDInfo">
+        <option value="r0">r0</option>
+        <option value="r3">r3</option>
+        <option value="r6">r6</option>
+      </select>
+    </div>
+
+    <!-- 显示加载提示 -->
+    <div v-if="loading">加载SID信息...</div>
+
+    <!-- 列表形式展示 SID 信息 -->
+    <ul v-if="!loading && sidData.length > 0" class="sid-list">
+      <li v-for="(sid, index) in sidData" :key="index">
+        {{ sid }}
+      </li>
+    </ul>
+
+    <!-- 如果没有 SID 数据则显示消息 -->
+    <div v-else-if="!loading && sidData.length === 0">
+      <p>No SID information available for the selected router.</p>
+    </div>
+
+    <!-- 错误信息 -->
+    <div v-if="error" class="error-message">
+      <p>Error loading SID information: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+import axios from 'axios'
+
+export default {
+  name: 'ShowSID',
+  data() {
+    return {
+      selectedRouter: 'r0', // 默认选择 r0
+      sidData: [],
+      loading: false,
+      error: null
+    }
+  },
+  mounted() {
+    // 组件挂载时请求默认路由器的 SID 信息
+    this.fetchSIDInfo()
+  },
+  methods: {
+    // 请求 API 以获取 SID 信息
+    fetchSIDInfo() {
+      this.loading = true
+      this.error = null
+      axios
+        .get(API_URL + `/route/show_sid`, { params: { router: this.selectedRouter }})
+        .then((response) => {
+          if (response.data && response.data.localsids) {
+            this.sidData = response.data.localsids // 保存 SID 数据
+          } else {
+            this.sidData = []
+            this.error = 'No SID data found in the response.'
+          }
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching SID data.'
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.show-sid {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+.router-selector {
+  margin-bottom: 20px;
+}
+
+ul.sid-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+ul.sid-list li {
+  background-color: #ffffff;
+  margin-bottom: 5px;
+  padding: 5px;
+  border: 1px solid #ffffff;
+}
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/route/show_steer.vue b/src/views/route/show_steer.vue
new file mode 100644
index 00000000000..b49ee7ece1c
--- /dev/null
+++ b/src/views/route/show_steer.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="steer-management">
+    <div class="header">
+      <h2>引导策略管理</h2>
+      <el-button type="primary" @click="openAddPolicyDialog">添加引导</el-button>
+    </div>
+
+    <div class="router-selector">
+      <label for="router-select">选择路由器: </label>
+      <el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
+        <el-option label="r0" value="r0" />
+        <el-option label="r3" value="r3" />
+        <el-option label="r6" value="r6" />
+      </el-select>
+    </div>
+
+    <el-table :data="policies" border style="width: 100%" height="400">
+      <el-table-column label="BSID" prop="BSID" />
+      <el-table-column label="目标IP" prop="Traffic" />
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.Traffic)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加策略弹窗 -->
+    <el-dialog
+      title="添加SRv6引导策略"
+      :visible.sync="isAddPolicyDialogVisible"
+      width="400px"
+      @close="resetForm"
+    >
+      <el-form ref="policyForm" :model="policyForm" label-width="100px">
+        <el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
+          <el-select v-model="policyForm.router" placeholder="选择路由器">
+            <el-option label="r0" value="r0" />
+            <el-option label="r3" value="r3" />
+            <el-option label="r6" value="r6" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
+          <el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
+        </el-form-item>
+
+        <el-form-item label="目标IP" prop="sids" :rules="[{ required: true, message: '请输入IP', trigger: 'blur' }]">
+          <el-input v-model="policyForm.ip" placeholder="10.0.10.0/24" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitPolicy">添加路由</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { API_URL } from '@/config/APIconfig'
+
+export default {
+  name: 'PolicyManagement',
+  data() {
+    return {
+      selectedRouter: 'r0', // 默认路由器
+      policies: [], // 存储策略信息
+      error: null,
+      loading: false,
+      isAddPolicyDialogVisible: false, // 控制弹窗显示
+      policyForm: {
+        router: '',
+        bsid: '',
+        ip: ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchPolicies()
+  },
+  methods: {
+    // 获取策略信息
+    fetchPolicies() {
+      axios.get(`${API_URL}/route/show_steer?router=${this.selectedRouter}`)
+        .then(response => {
+          if (response.data.steer) {
+            this.policies = response.data.steer
+          }
+        })
+        .catch(error => {
+          console.error('获取引导策略数据失败:', error)
+        })
+    },
+    // 删除策略
+    deletePolicy(ip) {
+      axios.delete(`${API_URL}/route/del_steer?router=${this.selectedRouter}`, {
+        data: {
+          ip_prefix: ip
+        }
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('删除成功')
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('删除失败')
+          }
+        })
+        .catch(error => {
+          console.error('删除引导失败:', error)
+          this.$message.error('删除失败')
+        })
+    },
+    // 打开添加策略弹窗
+    openAddPolicyDialog() {
+      this.isAddPolicyDialogVisible = true
+    },
+    // 提交添加策略
+    submitPolicy() {
+      axios.post(`${API_URL}/route/steer?router=${this.policyForm.router}`, {
+        bsid: this.policyForm.bsid,
+        ip_prefix: this.policyForm.ip
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('添加成功')
+            this.isAddPolicyDialogVisible = false
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('添加失败')
+          }
+        })
+        .catch(error => {
+          console.error('添加引导策略失败:', error)
+          this.$message.error('添加失败')
+        })
+    },
+    // 重置表单
+    resetForm() {
+      this.policyForm.bsid = ''
+      this.policyForm.ip = ''
+      this.policyForm.router = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.steer-management {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+.el-table {
+  margin-top: 20px;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+
+.el-button {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/route/steer.vue b/src/views/route/steer.vue
new file mode 100644
index 00000000000..6f187f9aa82
--- /dev/null
+++ b/src/views/route/steer.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="steer-policy">
+    <h2>更新引导策略</h2>
+
+    <!-- 输入表单 -->
+    <form @submit.prevent="submitSteerPolicy">
+      <div class="form-group">
+        <label for="router">路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bsid">绑定SID (BSID)</label>
+        <input id="bsid" v-model="bsid" type="text" required placeholder="fe00::1a">
+      </div>
+
+      <div class="form-group">
+        <label for="ip_prefix">目标IP</label>
+        <input id="ip_prefix" v-model="ip_prefix" type="text" required placeholder="10.10.0.0/24">
+      </div>
+
+      <button type="submit">添加引导策略</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>Error: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      router: '', // 路由器选择
+      bsid: '', // BSID
+      ip_prefix: '', // IP Prefix
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitSteerPolicy() {
+      try {
+        const data = {
+          bsid: this.bsid,
+          ip_prefix: this.ip_prefix
+        }
+
+        const response = await axios.post(API_URL + `/route/steer?router=${this.router}`, data, {
+          headers: { 'Content-Type': 'application/json' }
+        })
+
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化结果信息
+        this.error = null
+      } catch (error) {
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.steer-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input, .form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message, .error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>
diff --git a/src/views/schedule/index.vue b/src/views/schedule/index.vue
new file mode 100644
index 00000000000..f823825d5de
--- /dev/null
+++ b/src/views/schedule/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="schedule-decision">
+    <h2>调度决策</h2>
+
+    <!-- 表格展示平均资源和评分 -->
+    <table class="decision-table">
+      <thead>
+        <tr>
+          <th>集群</th>
+          <th>平均空闲CPU (%)</th>
+          <th>平均空闲内存 (Mb)</th>
+          <th>平均空闲存储 (Mb)</th>
+          <th>分数</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(resource, index) in averageResources" :key="index" :class="{ best: clusters[index] === bestCluster }">
+          <td>{{ clusters[index] }}</td>
+          <td>{{ resource[0].toFixed(2) }}</td>
+          <td>{{ resource[1].toFixed(0).toLocaleString() }}</td>
+          <td>{{ resource[2].toFixed(0).toLocaleString() }}</td>
+          <td>{{ scores[index].toFixed(2) }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- 最佳集群展示 -->
+    <div class="best-cluster">
+      <h3>最佳集群: {{ bestCluster }}</h3>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>Error loading schedule data: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+import axios from 'axios'
+
+export default {
+  name: 'ScheduleDecision',
+  data() {
+    return {
+      clusters: ['hosta', 'hostb'],
+      averageResources: [],
+      scores: [],
+      bestCluster: '',
+      error: null
+    }
+  },
+  mounted() {
+    this.fetchScheduleDecision()
+  },
+  methods: {
+    fetchScheduleDecision() {
+      axios
+        .get(API_URL + '/schedule')
+        .then((response) => {
+          const data = response.data
+          this.averageResources = data.average_resource || []
+          this.scores = data.scores || []
+          this.bestCluster = data.best_cluster || ''
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching schedule data.'
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.schedule-decision {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+table.decision-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+table.decision-table th, table.decision-table td {
+  padding: 10px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+
+table.decision-table tr.best {
+  background-color: #e0f7fa;
+}
+
+.best-cluster h3 {
+  color: #00796b;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
index 5a4dd363e53..e60b82aff60 100644
--- a/src/views/table/dynamic-table/index.vue
+++ b/src/views/table/dynamic-table/index.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="app-container">
-    <div style="margin:0 0 5px 20px">
-      Fixed header, sorted by header order,
-    </div>
-    <fixed-thead />
-
-    <div style="margin:30px 0 5px 20px">
-      Not fixed header, sorted by click order
-    </div>
-    <unfixed-thead />
+    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
+      <i class="el-icon-upload" />
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div slot="tip" class="el-upload__tip">只能上传yaml文件，且不超过500kb</div>
+    </el-upload>
   </div>
 </template>
 
@@ -18,7 +14,11 @@ import UnfixedThead from './components/UnfixedThead'
 
 export default {
   name: 'DynamicTable',
-  components: { FixedThead, UnfixedThead }
+  components: { FixedThead, UnfixedThead },
+  data() {
+    return {
+      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+    }
+  }
 }
 </script>
-
diff --git a/vue.config.js b/vue.config.js
index 33a634836ee..7a5f89a48d3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -27,7 +27,7 @@ module.exports = {
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,
   productionSourceMap: false,
   devServer: {
     port: port,
@@ -36,6 +36,13 @@ module.exports = {
       warnings: false,
       errors: true
     },
+    proxy: {
+      '/grafana': {
+        target: 'http://localhost:3030', // 替换为服务器 B 的域名或 IP 地址
+        changeOrigin: true,
+        pathRewrite: { '^/grafana': '' } // 如果服务器 B 的接口不以 /api 开头，去掉前缀
+      }
+    },
     before: require('./mock/mock-server.js')
   },
   configureWebpack: {