From 0c2a0a2c3394b5f289ed5f0520e074cced08fba3 Mon Sep 17 00:00:00 2001
From: jipengfei01 <jipengfei01@corp.netease.com>
Date: Thu, 13 Jul 2023 20:24:44 +0800
Subject: [PATCH] feat: refactor routing and menu, as well as fix #6

---
 package-lock.json                             | 158 ++++
 package.json                                  |   3 +
 src/App.vue                                   |   6 +
 src/api/alert.ts                              |  21 +-
 .../CPUutilizationChart.vue                   |  94 ---
 .../DiskPerformanceBPSReadChart.vue           | 117 ---
 .../DiskPerformanceBPSWriteChart.vue          | 121 ---
 .../DiskPerformanceIOPSReadChart.vue          | 115 ---
 .../DiskPerformanceIOPSWriteChart.vue         | 110 ---
 .../MemoryUtilizationChart.vue                |  94 ---
 .../NetworkTrafficReceiveChart.vue            | 111 ---
 .../NetworkTrafficTransmitChart.vue           | 115 ---
 src/components/TrendChartTimePicker/index.vue |   6 +-
 src/{constant.ts => constants/http.ts}        |   0
 src/constants/permission.ts                   |   5 +
 src/constants/site.ts                         |  12 +
 src/hooks/useTitle.ts                         |  24 +
 src/layout/components/Card.vue                |  26 -
 src/layout/components/Header.vue              |  78 +-
 src/layout/components/Menu.vue                | 115 +++
 src/layout/components/Nav.vue                 | 626 ---------------
 .../components/common/IntervalPicker.vue      |  58 --
 src/layout/components/common/TimeSelector.vue |  23 -
 src/layout/components/common/TopBar.vue       | 137 ----
 src/layout/constants.ts                       |  11 +
 src/layout/index.vue                          |  61 +-
 src/layout/index2.vue                         |  37 +
 src/model/alert.ts                            |  20 +
 src/router/index.ts                           | 302 ++++---
 src/store/alertPage/alertMessage.ts           |  44 +-
 src/store/blockStorageManagement/block.ts     |  18 +
 src/store/eventBus.ts                         |   7 -
 src/store/user.ts                             |  27 +-
 src/utils/_fetch.ts                           |   7 +-
 src/utils/functions.ts                        |  33 +-
 src/utils/index.ts                            |   7 +
 src/utils/nProgress.ts                        |  18 +
 src/utils/router.ts                           |  19 +
 src/views/alertPage/alert-config.vue          |  22 +-
 src/views/alertPage/edit-modal.vue            | 271 ++++---
 src/views/alertPage/index.vue                 |   6 +-
 src/views/alertPage/system-log.vue            | 356 +++++----
 src/views/clusterManagement/ServerDetail.vue  |  32 +-
 .../clusterManagement/ServerManagement.vue    |  92 +--
 src/views/storageBlock/SnapshotManagement.vue | 324 ++++----
 src/views/storageBlock/VolumeManagement.vue   | 752 +++++++++++-------
 .../modals/CreateSnapshotModal.vue            | 169 ++--
 .../storageBlock/modals/VolumeCreateModal.vue | 706 ++++++++--------
 .../modals/VolumeNamespaceModal.vue           | 154 ++--
 src/views/storagePool/index.vue               |   3 +-
 src/views/users/ChangeEmail.vue               | 350 ++++----
 src/views/users/PersonalInfo.vue              |  93 +--
 types/index.d.ts                              |   5 +
 types/router.ts                               |  19 +
 54 files changed, 2636 insertions(+), 3504 deletions(-)
 delete mode 100644 src/charts/cluster-management/CPUutilizationChart.vue
 delete mode 100644 src/charts/cluster-management/DiskPerformanceBPSReadChart.vue
 delete mode 100644 src/charts/cluster-management/DiskPerformanceBPSWriteChart.vue
 delete mode 100644 src/charts/cluster-management/DiskPerformanceIOPSReadChart.vue
 delete mode 100644 src/charts/cluster-management/DiskPerformanceIOPSWriteChart.vue
 delete mode 100644 src/charts/cluster-management/MemoryUtilizationChart.vue
 delete mode 100644 src/charts/cluster-management/NetworkTrafficReceiveChart.vue
 delete mode 100644 src/charts/cluster-management/NetworkTrafficTransmitChart.vue
 rename src/{constant.ts => constants/http.ts} (100%)
 create mode 100644 src/constants/permission.ts
 create mode 100644 src/constants/site.ts
 create mode 100644 src/hooks/useTitle.ts
 delete mode 100644 src/layout/components/Card.vue
 create mode 100644 src/layout/components/Menu.vue
 delete mode 100644 src/layout/components/Nav.vue
 delete mode 100644 src/layout/components/common/IntervalPicker.vue
 delete mode 100644 src/layout/components/common/TimeSelector.vue
 delete mode 100644 src/layout/components/common/TopBar.vue
 create mode 100644 src/layout/constants.ts
 create mode 100644 src/layout/index2.vue
 delete mode 100644 src/store/eventBus.ts
 create mode 100644 src/utils/nProgress.ts
 create mode 100644 src/utils/router.ts
 create mode 100644 types/router.ts

diff --git a/package-lock.json b/package-lock.json
index ce35810..4002a40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/diff": "^5.0.3",
+        "@vueuse/core": "^10.2.1",
         "axios": "^1.2.2",
         "dayjs": "^1.11.7",
         "diff": "^5.1.0",
@@ -17,6 +18,7 @@
         "less": "^4.1.3",
         "md5": "^2.3.0",
         "normalize.css": "^8.0.1",
+        "nprogress": "^0.2.0",
         "pinia": "^2.0.30",
         "postcss-preset-env": "^7.8.3",
         "qs": "^6.11.1",
@@ -36,6 +38,7 @@
         "@types/js-cookie": "^3.0.3",
         "@types/js-md5": "^0.7.0",
         "@types/node": "^18.11.18",
+        "@types/nprogress": "^0.2.0",
         "@types/qs": "^6.9.7",
         "@types/url-parse": "^1.4.8",
         "@typescript-eslint/eslint-plugin": "^5.60.1",
@@ -2334,6 +2337,12 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -2361,6 +2370,11 @@
       "integrity": "sha512-zqqcGKyNWgTLFBxmaexGUKQyWqeG7HjXj20EuQJSJWwXe54BjX0ihIo5cJB9yAQzH8dNugJ9GvkBYMjPXs/PJw==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.60.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz",
@@ -3052,6 +3066,89 @@
         "@vue/language-core": "1.8.1"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+      "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.2.1",
+        "@vueuse/shared": "10.2.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+      "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+      "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -7899,6 +7996,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -12998,6 +13100,12 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
+      "dev": true
+    },
     "@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -13025,6 +13133,11 @@
       "integrity": "sha512-zqqcGKyNWgTLFBxmaexGUKQyWqeG7HjXj20EuQJSJWwXe54BjX0ihIo5cJB9yAQzH8dNugJ9GvkBYMjPXs/PJw==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.60.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz",
@@ -13542,6 +13655,46 @@
         "@vue/language-core": "1.8.1"
       }
     },
+    "@vueuse/core": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+      "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.2.1",
+        "@vueuse/shared": "10.2.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+      "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ=="
+    },
+    "@vueuse/shared": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+      "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+      "requires": {
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+          "requires": {}
+        }
+      }
+    },
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -17331,6 +17484,11 @@
         }
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
diff --git a/package.json b/package.json
index d0190ce..6ba2f87 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@types/diff": "^5.0.3",
+    "@vueuse/core": "^10.2.1",
     "axios": "^1.2.2",
     "dayjs": "^1.11.7",
     "diff": "^5.1.0",
@@ -27,6 +28,7 @@
     "less": "^4.1.3",
     "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
     "pinia": "^2.0.30",
     "postcss-preset-env": "^7.8.3",
     "qs": "^6.11.1",
@@ -46,6 +48,7 @@
     "@types/js-cookie": "^3.0.3",
     "@types/js-md5": "^0.7.0",
     "@types/node": "^18.11.18",
+    "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.7",
     "@types/url-parse": "^1.4.8",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
diff --git a/src/App.vue b/src/App.vue
index f3627e8..1a86bd3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,12 @@
 </template>
 <script setup lang="ts">
 import { NConfigProvider, NMessageProvider, zhCN } from 'naive-ui'
+
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+
+userStore.getUserInfo()
 const themeColor = 'rgba(22, 125, 255, 0.8)'
 const themeOverrides = {
   common: {
diff --git a/src/api/alert.ts b/src/api/alert.ts
index d148cfe..f5aeff6 100644
--- a/src/api/alert.ts
+++ b/src/api/alert.ts
@@ -1,4 +1,8 @@
-import type { AlertMsgData, GetAlertMsgsParams } from '@/model/alert'
+import type {
+  AlertMsgData,
+  GetAlertMsgsParams,
+  PostAlertConfig,
+} from '@/model/alert'
 import type { Res } from '@/utils/_fetch'
 import _fetch from '@/utils/_fetch'
 
@@ -13,7 +17,7 @@ export const getAlertMessageApi = (data: GetAlertMsgsParams) => {
 
 //获取用户未读告警数量
 export const getUnreadAlertMessageApi = () => {
-  return _fetch<Res<{ result: any }>>({
+  return _fetch<Res<number>>({
     method: 'GET',
     url: `/curvebs?method=alert.unread.num.get`,
   })
@@ -60,7 +64,7 @@ export const updateAlertCandidateApi = (data: Object) => {
 }
 
 //更新告警配置
-export const updateAlertRuleApi = (data: Object) => {
+export const updateAlertRuleApi = (data: PostAlertConfig) => {
   return _fetch<Res<{ result: any }>>({
     method: 'POST',
     url: `/curvebs?method=alert.conf.update`,
@@ -70,17 +74,8 @@ export const updateAlertRuleApi = (data: Object) => {
 
 //获取告警联系人候选人
 export const getAlertCandidateApi = () => {
-  return _fetch<Res<{ result: any }>>({
+  return _fetch<Res<string[]>>({
     method: 'GET',
     url: `/curvebs?method=alert.candidate.get`,
   })
 }
-
-//更新告警联系人
-export const updateAlertUserApi = (data: Object) => {
-  return _fetch<Res<{ result: any }>>({
-    method: 'POST',
-    url: `/curvebs?method=alert.user.update`,
-    data,
-  })
-}
diff --git a/src/charts/cluster-management/CPUutilizationChart.vue b/src/charts/cluster-management/CPUutilizationChart.vue
deleted file mode 100644
index 987258d..0000000
--- a/src/charts/cluster-management/CPUutilizationChart.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div ref="main" style="width: 100%; height: 400px"></div>
-</template>
-  
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, toRefs, watch } from 'vue'
-import { useServerStore } from '@/store/clusterManagement/server'
-import router from "@/router"
-
-const serverStore = useServerStore()
-const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
-
-//获取概览数据从接口
-
-const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-
-
-
-const drawChart = (() => {
-  function timestampToTime(timestamp: number) {
-    const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-    const year = dateObj.getFullYear() // 获取年，
-    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-    const minutes = pad(dateObj.getMinutes()) // 获取分
-    const seconds = pad(dateObj.getSeconds()) // 获取秒
-    return hours + ':' + minutes + ':' + seconds
-  }
-
-  function pad(str: any) {
-    return +str >= 10 ? str : '0' + str
-  }
-
-  const timeStamp: Array<string> = [];
-  const cpuUtilizationArray: Array<number> = []
-
-  let cpuUtilization = fullServerDetail.value.cpuUtilization;
-  cpuUtilization.forEach(item => {
-    let convertedTime = timestampToTime(item.timestamp)
-    timeStamp.push(convertedTime);
-    let percentageValue = +item.value;
-    let val = percentageValue.toFixed(2);
-    cpuUtilizationArray.push(val)
-  })
-
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(main.value);
-  // 指定图表的配置项和数据
-  var option = {
-    title: { text: "cpu使用率" },
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      data: ['cpu使用率']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: timeStamp
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: '{value} % '
-      }
-    },
-    series: [
-      {
-        name: 'cpu使用率',
-        type: 'line',
-        data: cpuUtilizationArray
-      },
-    ]
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-})
-
-watch(fullServerDetail, (newVal) => {
-  drawChart();
-})
-
-</script>
\ No newline at end of file
diff --git a/src/charts/cluster-management/DiskPerformanceBPSReadChart.vue b/src/charts/cluster-management/DiskPerformanceBPSReadChart.vue
deleted file mode 100644
index f548dcb..0000000
--- a/src/charts/cluster-management/DiskPerformanceBPSReadChart.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div ref="main" style="width: 100%; height: 400px"></div>
-</template>
-  
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, toRefs, watch } from 'vue'
-import { useServerStore } from '@/store/clusterManagement/server'
-import router from "@/router"
-
-const serverStore = useServerStore()
-const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
-
-//获取概览数据从接口
-
-const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-
-const drawChart = (() => {
-  function timestampToTime(timestamp: number) {
-    const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-    const year = dateObj.getFullYear() // 获取年，
-    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-    const minutes = pad(dateObj.getMinutes()) // 获取分
-    const seconds = pad(dateObj.getSeconds()) // 获取秒
-    return hours + ':' + minutes + ':' + seconds
-  }
-
-  function pad(str: any) {
-    return +str >= 10 ? str : '0' + str
-  }
-
-  const timeStamp: Array<string> = [];
-
-  // const hostName = router.currentRoute.value.query.q;
-  // const params = { hostName }
-
-  let diskPerformance = fullServerDetail.value.diskPerformance;
-  //获取timestamp并将其存入相应数组
-  let timeItem = Object.values(diskPerformance);
-  timeItem[0].forEach(item => {
-    let convertedTime = timestampToTime(item.timestamp);
-    timeStamp.push(convertedTime)
-  })
-
-  // 获取键值
-  const keys = []
-  for (let key in diskPerformance) {
-    keys.push(key);
-  }
-  //获取数据数组
-  const diskPerformanceData = []
-  timeItem.forEach(item => {
-    let valueData = [];
-    item.forEach(valueItem => {
-      let val = valueItem.readBPS / (1024 * 1024);
-      val = val.toFixed(2);
-      valueData.push(val)
-    })
-    diskPerformanceData.push(valueData)
-  })
-
-  //整理出图标里需要的数据数组
-  const charDiskPerformanceData = []
-  for (let i = 0; i < keys.length; i++) {
-    charDiskPerformanceData.push(
-      {
-        name: keys[i],
-        type: 'line',
-        data: diskPerformanceData[i]
-      },
-    );
-  }
-
-
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(main.value);
-  // 指定图表的配置项和数据
-  var option = {
-    title: { text: "磁盘读带宽" },
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-    data: keys,
-    bottom: '2px'
-  },
-    grid: {
-      left: '3%',
-      right: '4%',
-      containLabel: true
-    },
-
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: timeStamp
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: '{value} MB/s'
-      }
-    },
-    series: charDiskPerformanceData
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-})
-
-watch(fullServerDetail, (newVal) => {
-  drawChart();
-})
-</script>
\ No newline at end of file
diff --git a/src/charts/cluster-management/DiskPerformanceBPSWriteChart.vue b/src/charts/cluster-management/DiskPerformanceBPSWriteChart.vue
deleted file mode 100644
index a97cce2..0000000
--- a/src/charts/cluster-management/DiskPerformanceBPSWriteChart.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <div ref="main" style="width: 100%; height: 400px"></div>
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, toRefs, watch } from 'vue'
-import {useServerStore} from '@/store/clusterManagement/server'
-import { reduce } from "lodash";
-import router from "@/router"
-
-const serverStore = useServerStore()
-const { getServerDetail } = serverStore
-const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
-
-//获取概览数据从接口
-
-const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-
-const drawChart = (() => {
-  function timestampToTime(timestamp: number) {
-    const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-    const year = dateObj.getFullYear() // 获取年，
-    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-    const minutes = pad(dateObj.getMinutes()) // 获取分
-    const seconds = pad(dateObj.getSeconds()) // 获取秒
-    return hours + ':' + minutes + ':' + seconds
-  }
-
-  function pad(str: any) {
-    return +str >= 10 ? str : '0' + str
-  }
-
-  const timeStamp: Array<string> = [];
-
-const hostName = router.currentRoute.value.query.q; 
-const params = {hostName}
-     
-    let diskPerformance = fullServerDetail.value.diskPerformance; 
-    //获取timestamp并将其存入相应数组
-    let timeItem = Object.values(diskPerformance);
-    timeItem[0].forEach(item => {
-      let convertedTime = timestampToTime(item.timestamp);
-      timeStamp.push(convertedTime)
-    })
-
-  // 获取键值
-  const keys = []
-  for(let key in diskPerformance) {
-    keys.push(key);
-  }
-
-  //获取数据数组
-  const diskPerformanceData = []
-  timeItem.forEach(item => {
-      let valueData = [];
-      item.forEach(valueItem => {     
-        let val = valueItem.writeBPS/(1024*1024);
-          val = val.toFixed(2);
-          valueData.push(val)
-      })
-      diskPerformanceData.push(valueData)
-  })
-
-  //整理出图标里需要的数据数组
-  const charDiskPerformanceData = []
-  for(let i = 0; i<keys.length; i++) {
-      charDiskPerformanceData.push(
-          {
-          name: keys[i],
-          type: 'line',
-          data: diskPerformanceData[i]
-        },
-  );
-  }
-
-
-    // 基于准备好的dom，初始化echarts实例
-    var myChart = echarts.init(main.value);
-    // 指定图表的配置项和数据
-    var option = {
-      title: { text: "磁盘写带宽" },
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-    data: keys,
-    bottom: '2px'
-  },
-      grid: {
-        left: '3%',
-        right: '4%',
-        containLabel: true
-      },
-   
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: timeStamp
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-    formatter: '{value} MB/s'
-  }
-      },
-      series: charDiskPerformanceData
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
-
-  })
-
-
-  watch(fullServerDetail, (newVal) => {
-  drawChart();
-})
-</script>
\ No newline at end of file
diff --git a/src/charts/cluster-management/DiskPerformanceIOPSReadChart.vue b/src/charts/cluster-management/DiskPerformanceIOPSReadChart.vue
deleted file mode 100644
index eb97e76..0000000
--- a/src/charts/cluster-management/DiskPerformanceIOPSReadChart.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <div ref="main" style="width: 100%; height: 400px"></div>
-  </template>
-  
-  <script setup lang="ts">
-  import * as echarts from "echarts";
-  import { ref, toRefs, watch } from 'vue'
-  import {useServerStore} from '@/store/clusterManagement/server'
-  
-  const serverStore = useServerStore()
-  const state = serverStore.state;
-  const { fullServerDetail } = toRefs(state);
-  
-  //获取概览数据从接口
-  
-  const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-  
-  const drawChart = (() => {
-    function timestampToTime(timestamp: number) {
-      const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-      const year = dateObj.getFullYear() // 获取年，
-      const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-      const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-      const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-      const minutes = pad(dateObj.getMinutes()) // 获取分
-      const seconds = pad(dateObj.getSeconds()) // 获取秒
-      return hours + ':' + minutes + ':' + seconds
-    }
-  
-    function pad(str: any) {
-      return +str >= 10 ? str : '0' + str
-    }
-  
-    const timeStamp: Array<string> = [];
-  
-          let diskPerformance = fullServerDetail.value.diskPerformance;
-      //获取timestamp并将其存入相应数组
-      let timeItem = Object.values(diskPerformance);
-      timeItem[0].forEach(item => {
-        let convertedTime = timestampToTime(item.timestamp);
-        timeStamp.push(convertedTime)
-      })
-  
-    // 获取键值
-    const keys = []
-    for(let key in diskPerformance) {
-      keys.push(key);
-    }
-  
-    //获取数据数组
-    const diskPerformanceData = []
-    timeItem.forEach(item => {
-        let valueData = [];
-        item.forEach(valueItem => {     
-          let val = +valueItem.readIOPS;
-          val = val.toFixed(2);
-            valueData.push(val)
-        })
-        diskPerformanceData.push(valueData)
-    })
-  
-    //整理出图标里需要的数据数组
-    const charDiskPerformanceData = []
-    for(let i = 0; i<keys.length; i++) {
-        charDiskPerformanceData.push(
-            {
-            name: keys[i],
-            type: 'line',
-            data: diskPerformanceData[i]
-          },
-    );
-    }
-  
-  
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(main.value);
-      // 指定图表的配置项和数据
-      var option = {
-        title: { text: "磁盘读IOPS" },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-    data: keys,
-    bottom: '2px'
-  },
-        grid: {
-          left: '3%',
-          right: '4%',
-          containLabel: true
-        },
-     
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: timeStamp
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-      formatter: '{value} io/s'
-    }
-        },
-        series: charDiskPerformanceData
-      };
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-  
-    })
-
-    watch(fullServerDetail, (newVal) => { 
-  drawChart();
-})
-  // })
-  </script>
\ No newline at end of file
diff --git a/src/charts/cluster-management/DiskPerformanceIOPSWriteChart.vue b/src/charts/cluster-management/DiskPerformanceIOPSWriteChart.vue
deleted file mode 100644
index 0a74540..0000000
--- a/src/charts/cluster-management/DiskPerformanceIOPSWriteChart.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div ref="main" style="width: 100%; height: 400px"></div>
-</template>
-  
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, watch, toRefs } from 'vue'
-import { useServerStore } from '@/store/clusterManagement/server'
-
-const serverStore = useServerStore()
-const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
-
-//获取概览数据从接口
-
-const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-
-const drawChart = (() => {
-  function timestampToTime(timestamp: number) {
-    const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-    const year = dateObj.getFullYear() // 获取年，
-    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-    const minutes = pad(dateObj.getMinutes()) // 获取分
-    const seconds = pad(dateObj.getSeconds()) // 获取秒
-    return hours + ':' + minutes + ':' + seconds
-  }
-
-  function pad(str: any) {
-    return +str >= 10 ? str : '0' + str
-  }
-
-  const timeStamp: Array<string> = [];
-  let diskPerformance = fullServerDetail.value.diskPerformance;
-  //获取timestamp并将其存入相应数组
-  let timeItem = Object.values(diskPerformance);
-  timeItem[0].forEach(item => {
-    let convertedTime = timestampToTime(item.timestamp);
-    timeStamp.push(convertedTime)
-  })
-
-  // 获取键值
-  const keys = []
-  for (let key in diskPerformance) {
-    keys.push(key);
-  }
-
-  //获取数据数组
-  const diskPerformanceData = []
-  timeItem.forEach(item => {
-    let valueData = [];
-    item.forEach(valueItem => {
-      let val = +valueItem.writeIOPS;
-      val = val.toFixed(2);
-      valueData.push(val)
-    })
-    diskPerformanceData.push(valueData)
-  })
-
-  //整理出图标里需要的数据数组
-  const charDiskPerformanceData = []
-  for (let i = 0; i < keys.length; i++) {
-    charDiskPerformanceData.push(
-      {
-        name: keys[i],
-        type: 'line',
-        data: diskPerformanceData[i]
-      },
-    );
-  }
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(main.value);
-  // 指定图表的配置项和数据
-  var option = {
-    title: { text: "磁盘写IOPS" },
-    tooltip: {
-      trigger: 'axis'
-    },
-  legend: {
-    data: keys,
-    bottom: '2px'
-  },
-    grid: {
-      left: '3%',
-      right: '4%',
-      containLabel: true
-    },
-
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: timeStamp
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: '{value} io/s'
-      }
-    },
-    series: charDiskPerformanceData
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-})
-
-watch(fullServerDetail, (newVal) => { 
-  drawChart();
-})
-</script>
\ No newline at end of file
diff --git a/src/charts/cluster-management/MemoryUtilizationChart.vue b/src/charts/cluster-management/MemoryUtilizationChart.vue
deleted file mode 100644
index 524cf3b..0000000
--- a/src/charts/cluster-management/MemoryUtilizationChart.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div ref="main" style="width: 100%; height: 400px"></div>
-</template>
-  
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, toRefs, watch } from 'vue'
-import { useServerStore } from '@/store/clusterManagement/server'
-import router from "@/router"
-
-const serverStore = useServerStore()
-const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
-
-//获取概览数据从接口
-
-const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-
-const drawChart = (() => {
-  function timestampToTime(timestamp: number) {
-    const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-    const year = dateObj.getFullYear() // 获取年，
-    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-    const minutes = pad(dateObj.getMinutes()) // 获取分
-    const seconds = pad(dateObj.getSeconds()) // 获取秒
-    return hours + ':' + minutes + ':' + seconds
-  }
-
-  function pad(str: any) {
-    return +str >= 10 ? str : '0' + str
-  }
-
-  const timeStamp: Array<string> = [];
-  const memUtilizationArray: Array<number> = []
-
-    let memUtilization = fullServerDetail.value.memUtilization;
-    memUtilization.forEach(item => {
-      let convertedTime = timestampToTime(item.timestamp)
-      timeStamp.push(convertedTime);
-      let itemValue = +item.value;
-      let val = itemValue.toFixed(2);
-      memUtilizationArray.push(val);
-    })
-
-    // 基于准备好的dom，初始化echarts实例
-    var myChart = echarts.init(main.value);
-    // 指定图表的配置项和数据
-    var option = {
-      title: { text: "内存使用率" },
-      color: ['#2596be'],
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: ['内存使用率']
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: timeStamp
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          formatter: '{value} % '
-        }
-      },
-
-      series: [
-        {
-          name: '内存使用率',
-          type: 'line',
-          data: memUtilizationArray
-        },
-      ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
-
-  })
-
-  watch(fullServerDetail, (newVal) => { 
-  drawChart();
-})
-
-</script>
\ No newline at end of file
diff --git a/src/charts/cluster-management/NetworkTrafficReceiveChart.vue b/src/charts/cluster-management/NetworkTrafficReceiveChart.vue
deleted file mode 100644
index 40433f9..0000000
--- a/src/charts/cluster-management/NetworkTrafficReceiveChart.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div ref="main" style="width: 100%; height: 400px"></div>
-</template>
-
-<script setup lang="ts">
-import * as echarts from 'echarts'
-import { onMounted, ref, toRefs, watch } from 'vue'
-
-import router from '@/router'
-import { useServerStore } from '@/store/clusterManagement/server'
-
-const serverStore = useServerStore()
-const state = serverStore.state
-const { fullServerDetail } = toRefs(state)
-
-//获取概览数据从接口
-
-const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-
-const drawChart = () => {
-  function timestampToTime(timestamp: number) {
-    const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-    const year = dateObj.getFullYear() // 获取年，
-    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours()) // 获取时, pad函数用来补0
-    const minutes = pad(dateObj.getMinutes()) // 获取分
-    const seconds = pad(dateObj.getSeconds()) // 获取秒
-    return hours + ':' + minutes + ':' + seconds
-  }
-
-  function pad(str: any) {
-    return +str >= 10 ? str : '0' + str
-  }
-
-  const timeStamp: Array<string> = []
-
-  let trafficReceive = fullServerDetail.value.networkTraffic.receive
-  //获取timestamp并将其存入相应数组
-  let timeItem = Object.values(trafficReceive)
-  timeItem[0].forEach(item => {
-    let convertedTime = timestampToTime(item.timestamp)
-    timeStamp.push(convertedTime)
-  })
-
-  // 获取键值
-  const keys = []
-  let legendKeys = []
-  for (let key in trafficReceive) {
-    keys.push(key)
-  }
-  //获取数据数组
-  const receiveData = []
-  timeItem.forEach(item => {
-    let valueData = []
-    item.forEach(valueItem => {
-      let val = valueItem.value / (1024 * 8 * 1024)
-      val = val.toFixed(2)
-      valueData.push(val)
-    })
-    receiveData.push(valueData)
-  })
-
-  //整理出图标里需要的数据数组
-  const charReceiveData = []
-  for (let i = 0; i < keys.length; i++) {
-    charReceiveData.push({
-      name: keys[i],
-      type: 'line',
-      data: receiveData[i],
-    })
-  }
-
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(main.value)
-  // 指定图表的配置项和数据
-  var option = {
-    title: { text: '网络下行带宽' },
-    tooltip: {
-      trigger: 'axis',
-    },
-    legend: {
-      data: keys,
-      bottom: 0,
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      containLabel: true,
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: timeStamp,
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: '{value} MB/s',
-      },
-    },
-    series: charReceiveData,
-  }
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option)
-}
-
-watch(fullServerDetail, newVal => {
-  drawChart()
-})
-</script>
diff --git a/src/charts/cluster-management/NetworkTrafficTransmitChart.vue b/src/charts/cluster-management/NetworkTrafficTransmitChart.vue
deleted file mode 100644
index e77c95e..0000000
--- a/src/charts/cluster-management/NetworkTrafficTransmitChart.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <div ref="main" style="width: 100%; height: 400px"></div>
-  </template>
-  
-  <script setup lang="ts">
-  import * as echarts from "echarts";
-  import { ref, toRefs, watch } from 'vue'
-  import {useServerStore} from '@/store/clusterManagement/server'
-
-  const serverStore = useServerStore()
-  const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
-  
-  //获取概览数据从接口
-  
-  const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
-  
-  const drawChart = (() => {
-    function timestampToTime(timestamp: number) {
-      const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
-      const year = dateObj.getFullYear() // 获取年，
-      const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
-      const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-      const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
-      const minutes = pad(dateObj.getMinutes()) // 获取分
-      const seconds = pad(dateObj.getSeconds()) // 获取秒
-      return hours + ':' + minutes + ':' + seconds
-    }
-  
-    function pad(str: any) {
-      return +str >= 10 ? str : '0' + str
-    }
-  
-    const timeStamp: Array<string> = [];
-  
-      let trafficTransmit = fullServerDetail.value.networkTraffic.transmit;
-      //获取timestamp并将其存入相应数组
-      let timeItem = Object.values(trafficTransmit); 
-      timeItem[0].forEach(item => {
-        let convertedTime = timestampToTime(item.timestamp);
-        timeStamp.push(convertedTime)
-      })
-
-    // 获取键值
-    const keys = []
-    for(let key in trafficTransmit) {
-      keys.push(key);
-    }
-
-    //获取数据数组
-    const receiveData = []
-    timeItem.forEach(item => {
-        let valueData = [];
-        item.forEach(valueItem => {   
-          let val = valueItem.value/(8*1024*1024);
-          val = val.toFixed(2);      
-            valueData.push(val)
-        })
-        receiveData.push(valueData)
-    })
-
-    //整理出图标里需要的数据数组
-    const charTransmitData = []
-    for(let i = 0; i<keys.length; i++) {
-        charTransmitData.push(
-            {
-            name: keys[i],
-            type: 'line',
-            data: receiveData[i]
-          },
-    );
-    }
-
-
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(main.value);
-      // 指定图表的配置项和数据
-      var option = {
-        title: { text: "网络上行带宽" },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: keys,
-          bottom: 0,
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          containLabel: true
-        },
-     
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: timeStamp
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-      formatter: '{value} MB/s'
-    }
-        },
-        series: charTransmitData
-      };
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-  
-    })
-  
-  
-    watch(fullServerDetail, (newVal) => { 
-  drawChart();
-    })
-  </script>
\ No newline at end of file
diff --git a/src/components/TrendChartTimePicker/index.vue b/src/components/TrendChartTimePicker/index.vue
index 7d54dd5..fc7149f 100644
--- a/src/components/TrendChartTimePicker/index.vue
+++ b/src/components/TrendChartTimePicker/index.vue
@@ -1,12 +1,12 @@
 <template>
   <NSpace>
     <!-- 考虑限制时间跨度 -->
-    <n-date-picker
+    <NDatePicker
       v-model:value="state.range"
       type="datetimerange"
       :is-date-disabled="checkIsDateDisabled"
     />
-    <n-select
+    <NSelect
       v-model:value="state.interval"
       placeholder="采样时间间隔"
       :options="options"
@@ -29,7 +29,7 @@ const props = withDefaults(
   }>(),
   {
     onChange: () => {},
-    dateSubtractValue: 1,
+    dateSubtractValue: 0.5, // 默认半个小时
     intervalIndex: 2,
     options: () => [
       {
diff --git a/src/constant.ts b/src/constants/http.ts
similarity index 100%
rename from src/constant.ts
rename to src/constants/http.ts
diff --git a/src/constants/permission.ts b/src/constants/permission.ts
new file mode 100644
index 0000000..f1bac6e
--- /dev/null
+++ b/src/constants/permission.ts
@@ -0,0 +1,5 @@
+export enum Permission {
+  ADMIN = 7,
+  USER = 6, // 读写
+  VISITOR = 4, // 只读
+}
diff --git a/src/constants/site.ts b/src/constants/site.ts
new file mode 100644
index 0000000..73de7a3
--- /dev/null
+++ b/src/constants/site.ts
@@ -0,0 +1,12 @@
+export const SITE_TITLE = 'Curve Console'
+export const MIN_PAGE_WIDTH = 1650
+export const DEBOUNCE_WAIT = 200
+// export const animates = [
+//   { value: 'zoom-fade', label: '渐变' },
+//   { value: 'zoom-out', label: '闪现' },
+//   { value: 'fade-slide', label: '滑动' },
+//   { value: 'fade', label: '消退' },
+//   { value: 'fade-bottom', label: '底部消退' },
+//   { value: 'fade-scale', label: '缩放消退' },
+// ]
+export const SITE_TRANSITION_TYPE = 'zoom-fade'
diff --git a/src/hooks/useTitle.ts b/src/hooks/useTitle.ts
new file mode 100644
index 0000000..8d4abce
--- /dev/null
+++ b/src/hooks/useTitle.ts
@@ -0,0 +1,24 @@
+import { useTitle as usePageTitle } from '@vueuse/core'
+import { unref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { SITE_TITLE } from '@/constants/site'
+
+// 这里最好也有中英文切换
+const useTitle = () => {
+  const { currentRoute } = useRouter()
+
+  const pageTitle = usePageTitle()
+
+  watch(
+    () => currentRoute.value.path,
+    () => {
+      const route = unref(currentRoute)
+
+      const { title } = route?.meta || {}
+      pageTitle.value = title ? ` ${title} - ${SITE_TITLE} ` : `${SITE_TITLE}`
+    },
+    { immediate: true },
+  )
+}
+export default useTitle
diff --git a/src/layout/components/Card.vue b/src/layout/components/Card.vue
deleted file mode 100644
index 0edfa73..0000000
--- a/src/layout/components/Card.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <n-card title="集群" size="large">
-      集群内容
-    </n-card >
-  </template>
-<script lang="ts">
-import  { defineComponent } from 'vue';
-import {NCard} from "naive-ui"
-
- 
-   export default defineComponent({
-    components: {
-        NCard
-    },
-    setup() {
-       return {
-
-       }
-    }
-   })
- </script>
-  <style scoped>
-  .n-card {
-    max-width: 600px;
-  }
-  </style>
\ No newline at end of file
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index a6cf323..cbd0f82 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -1,31 +1,11 @@
 <template>
   <div class="m-nav">
     <div class="logo">
-      <router-link to="/dashboard"
+      <router-link to="/"
         ><img src="@/assets/pics/curve-logo1-nobg.png" alt=""
       /></router-link>
     </div>
-    <!-- 选择刷新时间 -->
-    <div v-if="logInStatusVal" class="time-settings">
-      <!-- <n-icon size="25" class="clock-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><g fill="none"><path d="M28.832 18.472c.248.18.433.436.528.728c.098.294.1.61.009.906a14.269 14.269 0 0 1-3.156 5.443a1.478 1.478 0 0 1-1.671.347l-1.955-.858a1.501 1.501 0 0 0-.68-.128a1.474 1.474 0 0 0-.66.2a1.472 1.472 0 0 0-.727 1.124l-.235 2.13a1.48 1.48 0 0 1-1.13 1.276c-2.076.495-4.24.495-6.316 0a1.484 1.484 0 0 1-1.125-1.27l-.235-2.126a1.483 1.483 0 0 0-.485-.94a1.5 1.5 0 0 0-1.58-.255l-1.955.859a1.477 1.477 0 0 1-1.668-.343a14.267 14.267 0 0 1-3.16-5.45a1.484 1.484 0 0 1 .536-1.632l1.725-1.275a1.488 1.488 0 0 0 0-2.4l-1.725-1.273a1.48 1.48 0 0 1-.536-1.623A14.249 14.249 0 0 1 5.79 6.467c.14-.151.31-.271.5-.351a1.5 1.5 0 0 1 1.17 0l1.947.858a1.493 1.493 0 0 0 2.073-1.206l.236-2.122a1.482 1.482 0 0 1 1.148-1.281a15.462 15.462 0 0 1 3.146-.362c1.052.012 2.1.133 3.127.362a1.476 1.476 0 0 1 1.147 1.284l.236 2.12a1.483 1.483 0 0 0 2.067 1.2l1.946-.857a1.483 1.483 0 0 1 1.674.346a14.231 14.231 0 0 1 3.157 5.44a1.476 1.476 0 0 1-.537 1.63l-1.72 1.273a1.48 1.48 0 0 0-.004 2.395l1.729 1.276zM16 20a4 4 0 1 0 0-8a4 4 0 0 0 0 8z" fill="currentColor"></path></g></svg>
-      </n-icon> -->
-      <!-- <n-tooltip trigger="hover" placement="bottom-end">
-        <template #trigger>
-        <n-icon size="25" class="refresh-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
-            <path
-              d="M256 48C141.31 48 48 141.32 48 256c0 114.86 93.14 208 208 208c114.69 0 208-93.31 208-208c0-114.87-93.13-208-208-208zm0 313a94 94 0 0 1 0-188h4.21l-14.11-14.1a14 14 0 0 1 19.8-19.8l40 40a14 14 0 0 1 0 19.8l-40 40a14 14 0 0 1-19.8-19.8l18-18c-2.38-.1-5.1-.1-8.1-.1a66 66 0 1 0 66 66a14 14 0 0 1 28 0a94.11 94.11 0 0 1-94 94z"
-              fill="currentColor"></path>
-          </svg>
-        </n-icon>
-      </template>
-      设置刷新时间:控制图表刷新的时间间隔
-      </n-tooltip> -->
-      <!-- <n-select size="small" placeholder="图表刷新间隔" :options="timeIntervalOption" v-model:value="timeIntervalVal"
-        @update:value="setTimeIntervalVal" /> -->
-    </div>
-    <n-divider vertical />
+
     <!-- 帮助 -->
     <n-dropdown trigger="hover" :options="options" @select="handleSelect">
       <div class="title">
@@ -55,7 +35,7 @@
       </n-icon>
     </div>
     <!-- 消息 -->
-    <div class="messages">
+    <!-- <div class="messages">
       <div
         @click="
           () => {
@@ -76,7 +56,7 @@
           </svg>
         </n-icon>
       </div>
-    </div>
+    </div> -->
     <!-- 用户信息 -->
     <div class="m-info">
       <n-dropdown
@@ -111,13 +91,10 @@
 
 <script setup lang="ts">
 import { Person } from '@vicons/ionicons5/'
-import { NDivider, NDropdown, NIcon, NModal } from 'naive-ui'
+import { NDropdown, NIcon, NModal } from 'naive-ui'
 import { ref, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 
-//为存在图表数据的store里的state设置时间间隔
-import { useDashboardStore } from '@/store/clusterOverview/dashboard'
-
 import { useUserStore } from '../../store/user'
 
 //需要使用的参数
@@ -127,9 +104,6 @@ const router = useRouter()
 const { permission, loggedIn } = toRefs(state)
 let logInStatusVal = loggedIn
 
-const dashboardStore = useDashboardStore()
-const { setTimeIntervalValInStore } = dashboardStore
-
 //用户退出登录
 const handleLogout = () => {
   userStore.handleLogout()
@@ -160,42 +134,6 @@ const handleSelect = (key: string | number) => {
   }
 }
 
-const timeIntervalOption = ref([
-  {
-    label: '关闭',
-    value: 0,
-  },
-  {
-    label: '10s',
-    value: 10,
-  },
-  {
-    label: '20s',
-    value: 20,
-  },
-  {
-    label: '40s',
-    value: 50,
-  },
-  {
-    label: '1分钟',
-    value: 60,
-  },
-  {
-    label: '3分钟',
-    value: 180,
-  },
-  {
-    label: '10分钟',
-    value: 600,
-  },
-])
-const timeIntervalVal = ref(0)
-
-const setTimeIntervalVal = () => {
-  setTimeIntervalValInStore(timeIntervalVal.value)
-}
-
 const showModal = ref(false)
 
 //展示公众号二维码
@@ -224,6 +162,10 @@ const adminOptions = [
     label: '用户列表',
     key: 'user-list',
   },
+  {
+    label: '个人设置',
+    key: 'personal-info',
+  },
   {
     label: '退出登录',
     key: 'log-out',
@@ -262,10 +204,10 @@ h1 {
 .m-nav {
   display: flex;
   background: #ffffff;
-  border-bottom: 1px solid #e5e6eb;
   align-items: center;
   column-gap: 16px;
   padding: 0 32px;
+  height: 64px;
 
   .logo {
     flex-grow: 1;
diff --git a/src/layout/components/Menu.vue b/src/layout/components/Menu.vue
new file mode 100644
index 0000000..7964bd8
--- /dev/null
+++ b/src/layout/components/Menu.vue
@@ -0,0 +1,115 @@
+<template>
+  <NMenu
+    v-model:value="state.selectedKey"
+    :options="state.options"
+    :collapsed-width="SiderEnum.MENU_COLLAPSED_WIDTH"
+    :indent="SiderEnum.MENU_INDENT"
+  />
+</template>
+
+<script setup lang="tsx">
+import type { MenuOption } from 'naive-ui'
+import { NBadge, NMenu, NSpace } from 'naive-ui'
+import { onMounted, onUnmounted, reactive, watch } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
+
+import type { Recordable } from '/#/index'
+import { SiderEnum } from '@/layout/constants'
+import { filterRoutes } from '@/router'
+import { useAlertStore } from '@/store/alertPage/alertMessage'
+import { useUserStore } from '@/store/user'
+import { getIsLeaf } from '@/utils/router'
+
+// menu组件内部通过provider和inject的模式，已经拿到了layoutSider内的collapsed值，所以如果不是想主动控制这个属性，就不用传这个props了
+const { getUnreadAlertMessage, state: alertState } = useAlertStore()
+const { hasPermission, state: userState } = useUserStore()
+const state = reactive({
+  selectedKey: '',
+  options: [] as RouteRecordRaw[],
+})
+
+const currentRoute = useRoute()
+let timer: NodeJS.Timer
+
+const updateMenu = () => {
+  const activeMenu: string = currentRoute.meta?.activeMenu || ''
+  state.selectedKey = activeMenu || (currentRoute.name as string)
+}
+
+const renderTitle = (name: string, title: string) => {
+  if (name !== 'AlertPage') return title
+  return (
+    <NSpace>
+      {title}
+      <NBadge value={alertState.count} max={99} />
+    </NSpace>
+  )
+}
+
+const mapEach = (route: RouteRecordRaw): any => {
+  const {
+    name,
+    children = [],
+    meta: { title, activeMenu, icon, permissions = [], hidden = false } = {},
+  } = route
+  if (hidden) return null // 过滤不用再menu中显示的路由
+  if (permissions.length && !hasPermission(permissions)) return null // 过滤没有权限的路由
+  if (title && !activeMenu) {
+    const isLeaf = children && getIsLeaf(children)
+    // 特殊处理告警配置
+    const labelTitle = renderTitle(name as string, title)
+    const to: RouteLocationRaw = {
+      name,
+    }
+    // 特殊处理卷管理
+    if (name === 'VolumeManagement') to.params = { path: '' }
+    const item: Recordable = {
+      key: name as string,
+      label: () =>
+        children?.length && !isLeaf ? (
+          labelTitle
+        ) : (
+          <RouterLink to={to}>{labelTitle}</RouterLink>
+        ),
+      icon,
+    }
+    // menu的叶子节点在router上很可能不准确，要手动覆盖children处理下
+    if (isLeaf) {
+      item.children = undefined
+      return item
+    } else {
+      return {
+        ...item,
+        children: gMenu(children),
+      }
+    }
+  }
+  return null as any as MenuOption
+}
+
+const gMenu = (routes: RouteRecordRaw[]) =>
+  routes.map(item => mapEach(item)).filter(item => item)
+
+watch(
+  () => currentRoute.fullPath,
+  updateMenu,
+  { immediate: true }, // 第一次进入项目时要执行选中一下
+)
+watch(
+  [() => userState.permission, () => alertState.count],
+  () => {
+    state.options = gMenu(filterRoutes[0].children!)
+  },
+  { immediate: true }, // 第一次进入项目时要执行选中一下
+)
+onMounted(() => {
+  getUnreadAlertMessage()
+  timer = setInterval(getUnreadAlertMessage, 30000)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
diff --git a/src/layout/components/Nav.vue b/src/layout/components/Nav.vue
deleted file mode 100644
index cdc6f64..0000000
--- a/src/layout/components/Nav.vue
+++ /dev/null
@@ -1,626 +0,0 @@
-<template>
-  <div class="m-side-bar" ref="side">
-    <div class="topBox"
-      style="display: flex; align-items: center; justify-content: flex-end; -webkit-margin-bottom-collapse: collapse;">
-      <n-icon position="fixed" class="collapseIcon" :class="{ rotate: isRotated }" ref="icon" size="30px"
-        @click="ToggleMenu">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
-          <path
-            d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"
-            fill="currentColor"></path>
-        </svg>
-      </n-icon>
-    </div>
-    <div class="menu-wrap">
-      <n-menu v-if="is_expanded" :options="menuOptions" />
-      <n-menu v-else :options="menuOptionsUncollapsed" />
-    </div>
-  </div>
-</template>
-
-<script lang="tsx" setup>
-import { h, ref, watch } from 'vue'
-import { NIcon, NMenu, NDropdown, tooltipDark } from 'naive-ui'
-import type { MenuOption } from 'naive-ui'
-import { RouterLink } from 'vue-router'
-import type { Component } from "vue";
-import eventBus from "@/store/eventBus"
-import {
-  PieChart,
-  Server,
-  Options,
-  HardwareChip,
-  SparklesOutline,
-  Link,
-} from '@vicons/ionicons5'
-import { useUserStore } from '../../store/user'
-import { useAlertStore } from '../../store/alertPage/alertMessage'
-
-const userStore = useUserStore()
-const alertStore = useAlertStore()
-const { getUserInfo } = userStore;
-const { getUnreadAlertMessage } = alertStore;
-const permissionStatus = ref(1);
-
-getUserInfo().then(res => {
-  permissionStatus.value = res.data.data.permission
-});
-
-function renderIcon(icon: Component) {
-  return () => h(NIcon, null, { default: () => h(icon) })
-}
-
-const side = ref(null);
-const isRotated = ref(false);
-const is_expanded = ref(true);
-const unreadAlertMessage = ref(0);
-
-const updateUnreadAlertMessage = () => {
-  getUnreadAlertMessage().then(res => {
-    unreadAlertMessage.value = res.data.data
-  })
-}
-
-updateUnreadAlertMessage();
-
-setInterval(updateUnreadAlertMessage, 30000);
-
-const ToggleMenu = () => {
-  is_expanded.value = !is_expanded.value
-  // localStorage.setItem("is_expanded", is_expanded.value);
-  if (!is_expanded.value) { side.value.style.width = "6vw"; }
-  else {
-    side.value.style.width = "16vw";
-  }
-  isRotated.value = !isRotated.value
-}
-const alertPageIcon = () => {
-  return (
-    <n-icon size='18'>
-      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 12H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1zm0-3H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1zm0-3H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1z" fill="currentColor"></path></svg>
-    </n-icon>
-  )
-}
-
-//展开时的菜单
-const menuOptions: MenuOption[] = ref([
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'Dashboard',
-          },
-        },
-        { default: () => is_expanded.value ? '集群概览' : '' },
-      ),
-    key: 'Dashboard',
-    icon: renderIcon(PieChart),
-  },
-  {
-    key: 'divider-1',
-    type: 'divider',
-    props: {
-      style: {
-        marginLeft: '32px'
-      }
-    }
-  },
-  {
-    label: "集群管理",
-    key: 'cluster',
-    icon: renderIcon(Server),
-    children: [
-      {
-        label: () =>
-          h(
-            RouterLink,
-            {
-              to: {
-                name: 'ClusterTopology',
-              },
-            },
-            { default: () => '集群拓扑' },
-          ),
-        key: 'ClusterTopology',
-      },
-      {
-        label: () =>
-          h(
-            RouterLink,
-            {
-              to: {
-                name: 'ServerManagement',
-              },
-            },
-            { default: () => '服务器管理' },
-          ),
-        key: 'ServerManagement',
-      },
-      {
-        label: () =>
-          h(
-            RouterLink,
-            {
-              to: {
-                name: 'DiskManagement',
-              },
-            },
-            { default: () => '硬盘管理' },
-          ),
-        key: 'DiskManagement',
-      },
-    ],
-  },
-  {
-    key: 'divider-1',
-    type: 'divider',
-    props: {
-      style: {
-        marginLeft: '32px'
-      }
-    }
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'StoragePool',
-          },
-        },
-        { default: () => '存储池管理' },
-      ),
-    key: 'StoragePool',
-    icon: renderIcon(Options),
-  },
-  {
-    key: 'divider-1',
-    type: 'divider',
-    props: {
-      style: {
-        marginLeft: '32px'
-      }
-    }
-  },
-  {
-    label: '块存储管理',
-    key: 'BlockStorage',
-    icon: renderIcon(HardwareChip),
-    children: [
-      {
-        label: () =>
-          h(
-            RouterLink,
-            {
-              to: {
-                name: 'VolumeManagement',
-              },
-            },
-            { default: () => '卷管理' },
-          ),
-        key: 'volumeManagement',
-      },
-      {
-        label: () =>
-          h(
-            RouterLink,
-            {
-              to: {
-                name: 'SnapshotManagement',
-              },
-            },
-            { default: () => '快照管理' },
-          ),
-        key: 'SnapshotManagement',
-      },
-    ],
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'Deployment',
-          },
-        },
-        { default: () => '集群部署' },
-      ),
-    key: 'Deployment',
-    icon: () => {
-      return (
-        <n-icon size='18' >
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path d="M704 446H320c-4.4 0-8 3.6-8 8v402c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8V454c0-4.4-3.6-8-8-8zm-328 64h272v117H376V510zm272 290H376V683h272v117z" fill="currentColor"></path><path d="M424 748a32 32 0 1 0 64 0a32 32 0 1 0-64 0zm0-178a32 32 0 1 0 64 0a32 32 0 1 0-64 0z" fill="currentColor"></path><path d="M811.4 368.9C765.6 248 648.9 162 512.2 162S258.8 247.9 213 368.8C126.9 391.5 63.5 470.2 64 563.6C64.6 668 145.6 752.9 247.6 762c4.7.4 8.7-3.3 8.7-8v-60.4c0-4-3-7.4-7-7.9c-27-3.4-52.5-15.2-72.1-34.5c-24-23.5-37.2-55.1-37.2-88.6c0-28 9.1-54.4 26.2-76.4c16.7-21.4 40.2-36.9 66.1-43.7l37.9-10l13.9-36.7c8.6-22.8 20.6-44.2 35.7-63.5c14.9-19.2 32.6-36 52.4-50c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.3c19.9 14 37.5 30.8 52.4 50c15.1 19.3 27.1 40.7 35.7 63.5l13.8 36.6l37.8 10c54.2 14.4 92.1 63.7 92.1 120c0 33.6-13.2 65.1-37.2 88.6c-19.5 19.2-44.9 31.1-71.9 34.5c-4 .5-6.9 3.9-6.9 7.9V754c0 4.7 4.1 8.4 8.8 8c101.7-9.2 182.5-94 183.2-198.2c.6-93.4-62.7-172.1-148.6-194.9z" fill="currentColor"></path></svg>
-        </n-icon>
-      )
-    },
-  },
-  {
-    label: () => {
-      return (
-        <div>
-          <RouterLink to='/alert-page'>监控信息</RouterLink>
-          {
-
-            unreadAlertMessage.value === 0 ? null
-              :
-              <span style={{
-                display: 'inline-block',
-                width: '23px',
-                height: '23px',
-                borderRadius: '50%',
-                backgroundColor: 'red',
-                textAlign: 'center',
-                lineHeight: '23px',
-                color: 'white',
-                fontSize: '9px',
-              }}>{unreadAlertMessage.value <= 99 ? unreadAlertMessage.value: '99+'}</span>
-          }
-        </div>
-      )
-    },
-    key: 'AlergPage',
-    icon: alertPageIcon,
-  },
-])
-
-
-//缩回时的菜单
-const menuOptionsUncollapsed: MenuOption[] = ref([
-  {
-    label: () => {
-      return (
-        <n-tooltip trigger="hover" placement="right">
-          {{
-            trigger: () => <router-link to={{ name: "Dashboard" }}></router-link>,
-            default: () => '集群概览'
-          }}
-        </n-tooltip>
-      )
-    },
-    key: 'dashboard',
-    icon: renderIcon(PieChart),
-  },
-  {
-    // label:"集群管理",
-    label: () => {
-      const options = [
-        {
-          label: () => {
-            return (
-              <router-link to={{ name: 'ClusterTopology' }}>
-                集群拓扑
-              </router-link>
-            )
-          }
-        },
-        {
-          label: () => {
-            return (
-              <router-link to={{ name: 'ServerManagement' }}>
-                服务器管理
-              </router-link>
-            )
-          }
-        },
-        {
-          label: () => {
-            return (
-              <router-link to={{ name: 'DiskManagement' }}>
-                硬盘管理
-              </router-link>
-            )
-          }
-        }
-      ]
-
-      return (
-        <n-dropdown trigger="hover" placement="right" options={options}>
-          <n-icon size="19">
-            <Server />
-          </n-icon>
-        </n-dropdown>
-      )
-    },
-    key: 'cluster',
-  },
-  {
-    label: () => {
-      return (
-        <n-tooltip trigger="hover" placement="right">
-          {{
-            trigger: () => <router-link to={{ name: "StoragePool" }}></router-link>,
-            default: () => '存储池管理'
-          }}
-        </n-tooltip>
-      )
-    },
-    key: 'storage-pool',
-    icon: renderIcon(Options),
-  },
-  {
-    label: () => {
-      const options = [
-        {
-          label: () => {
-            return (
-              <router-link to={{ name: 'VolumeManagement' }}>
-                卷管理
-              </router-link>
-            )
-          }
-        },
-        {
-          label: () => {
-            return (
-              <router-link to={{ name: 'SnapshotManagement' }}>
-                快照管理
-              </router-link>
-            )
-          }
-        }
-      ]
-      return (
-        <n-dropdown trigger="hover" placement="right" options={options}>
-          <n-icon size="19">
-            <HardwareChip />
-          </n-icon>
-        </n-dropdown>
-      )
-    },
-    key: 'block-storage',
-  },
-  {
-    key: 'Deployment',
-    label: () => {
-      return (
-        <router-link to={{ name: "Deployment" }}>
-          <n-icon size='19' >
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path d="M704 446H320c-4.4 0-8 3.6-8 8v402c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8V454c0-4.4-3.6-8-8-8zm-328 64h272v117H376V510zm272 290H376V683h272v117z" fill="currentColor"></path><path d="M424 748a32 32 0 1 0 64 0a32 32 0 1 0-64 0zm0-178a32 32 0 1 0 64 0a32 32 0 1 0-64 0z" fill="currentColor"></path><path d="M811.4 368.9C765.6 248 648.9 162 512.2 162S258.8 247.9 213 368.8C126.9 391.5 63.5 470.2 64 563.6C64.6 668 145.6 752.9 247.6 762c4.7.4 8.7-3.3 8.7-8v-60.4c0-4-3-7.4-7-7.9c-27-3.4-52.5-15.2-72.1-34.5c-24-23.5-37.2-55.1-37.2-88.6c0-28 9.1-54.4 26.2-76.4c16.7-21.4 40.2-36.9 66.1-43.7l37.9-10l13.9-36.7c8.6-22.8 20.6-44.2 35.7-63.5c14.9-19.2 32.6-36 52.4-50c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.3c19.9 14 37.5 30.8 52.4 50c15.1 19.3 27.1 40.7 35.7 63.5l13.8 36.6l37.8 10c54.2 14.4 92.1 63.7 92.1 120c0 33.6-13.2 65.1-37.2 88.6c-19.5 19.2-44.9 31.1-71.9 34.5c-4 .5-6.9 3.9-6.9 7.9V754c0 4.7 4.1 8.4 8.8 8c101.7-9.2 182.5-94 183.2-198.2c.6-93.4-62.7-172.1-148.6-194.9z" fill="currentColor"></path></svg>
-          </n-icon>
-        </router-link>
-      )
-    },
-  },
-  {
-    key: 'alert-message',
-    label: () => {
-      return (
-        <n-tooltip trigger="hover" placement="right">
-          {{
-            trigger: () => <router-link to="/alert-page"></router-link>,
-            default: () => '监控信息'
-          }}
-        </n-tooltip>
-      )
-    },
-    icon: alertPageIcon,
-  }
-])
-
-watch(permissionStatus, (newVal) => {
-
-
-  menuOptions.value.splice(-1, 0,
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'SystemLog',
-            },
-          },
-          { default: () => '系统操作日志' },
-        ),
-      key: 'SystemLog',
-      icon: () => {
-        return (
-          <n-icon size='18'>
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 3a9 9 0 1 1-8.963 8.183a1 1 0 1 1 1.992.18A6.962 6.962 0 0 0 7.05 16.95c.375.375.792.707 1.242.988A7 7 0 1 0 7.098 7.002l1.4.001a1 1 0 0 1 .116 1.994l-.116.006H4.496a1 1 0 0 1-.993-.883l-.007-.117v-4a1 1 0 0 1 1.994-.116l.006.117v1.774A8.983 8.983 0 0 1 12 3zm-.75 4a.75.75 0 0 1 .743.648L12 7.75V12h2.25a.75.75 0 0 1 .102 1.493l-.102.007h-3a.75.75 0 0 1-.743-.648l-.007-.102v-5a.75.75 0 0 1 .75-.75z" fill="currentColor"></path></g></svg>        </n-icon>
-        )
-      },
-    }
-  )
-
-  menuOptionsUncollapsed.value.splice(-1, 0,
-    {
-      label: () =>
-      {
-      return (
-        <n-tooltip trigger="hover" placement="right">
-          {{
-            trigger: () => <router-link to={{name: "SystemLog"}}></router-link>,
-            default: () => '系统操作日志'
-          }}
-        </n-tooltip>
-      )
-    },
-      key: 'SystemLog',
-      icon: () => {
-        return (
-          <n-icon size='18'>
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 3a9 9 0 1 1-8.963 8.183a1 1 0 1 1 1.992.18A6.962 6.962 0 0 0 7.05 16.95c.375.375.792.707 1.242.988A7 7 0 1 0 7.098 7.002l1.4.001a1 1 0 0 1 .116 1.994l-.116.006H4.496a1 1 0 0 1-.993-.883l-.007-.117v-4a1 1 0 0 1 1.994-.116l.006.117v1.774A8.983 8.983 0 0 1 12 3zm-.75 4a.75.75 0 0 1 .743.648L12 7.75V12h2.25a.75.75 0 0 1 .102 1.493l-.102.007h-3a.75.75 0 0 1-.743-.648l-.007-.102v-5a.75.75 0 0 1 .75-.75z" fill="currentColor"></path></g></svg>        </n-icon>
-        )
-      },
-    }
-  )
-
-
-
-
-  if (newVal === 7) {
-    menuOptions.value.push({
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'AlertConfig',
-            },
-          },
-          { default: () => '告警配置' },
-        ),
-      key: 'AlertConfig',
-      icon: () => {
-        return (
-          <n-icon size='18'>
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M20 12V2h2v10z" fill="currentColor"></path><path d="M24 12V2h2v10z" fill="currentColor"></path><path d="M28 12V2h2v10z" fill="currentColor"></path><path d="M16 20a3.912 3.912 0 0 1-4-4a3.912 3.912 0 0 1 4-4v-2a6 6 0 1 0 6 6h-2a3.912 3.912 0 0 1-4 4z" fill="currentColor"></path><path d="M28.893 18.454L26.098 16l-1.318 1.504l2.792 2.452l-2.36 4.088l-3.427-1.16a9.031 9.031 0 0 1-2.714 1.565L18.36 28h-4.72l-.71-3.55a9.095 9.095 0 0 1-2.695-1.572l-3.447 1.166l-2.36-4.088l2.725-2.395a8.926 8.926 0 0 1-.007-3.128l-2.718-2.39l2.36-4.087l3.427 1.16A9.03 9.03 0 0 1 12.93 7.55L13.64 4H16V2h-2.36a2 2 0 0 0-1.961 1.608l-.504 2.518a10.967 10.967 0 0 0-1.327.754l-2.42-.819a1.998 1.998 0 0 0-2.372.895l-2.36 4.088a2 2 0 0 0 .411 2.502l1.931 1.697C5.021 15.495 5 15.745 5 16c0 .258.01.513.028.766l-1.92 1.688a2 2 0 0 0-.413 2.502l2.36 4.088a1.998 1.998 0 0 0 2.374.895l2.434-.824a10.974 10.974 0 0 0 1.312.759l.503 2.518A2 2 0 0 0 13.64 30h4.72a2 2 0 0 0 1.961-1.608l.504-2.519a10.967 10.967 0 0 0 1.327-.753l2.419.818a1.998 1.998 0 0 0 2.373-.894l2.36-4.088a2 2 0 0 0-.411-2.502z" fill="currentColor"></path></svg>
-          </n-icon>
-        )
-      },
-    })
-
-    menuOptionsUncollapsed.value.push({
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'AlertConfig',
-            },
-          },
-        ),
-      key: 'AlertConfig',
-      icon: () => {
-        return (
-          <n-icon size='18'>
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M20 12V2h2v10z" fill="currentColor"></path><path d="M24 12V2h2v10z" fill="currentColor"></path><path d="M28 12V2h2v10z" fill="currentColor"></path><path d="M16 20a3.912 3.912 0 0 1-4-4a3.912 3.912 0 0 1 4-4v-2a6 6 0 1 0 6 6h-2a3.912 3.912 0 0 1-4 4z" fill="currentColor"></path><path d="M28.893 18.454L26.098 16l-1.318 1.504l2.792 2.452l-2.36 4.088l-3.427-1.16a9.031 9.031 0 0 1-2.714 1.565L18.36 28h-4.72l-.71-3.55a9.095 9.095 0 0 1-2.695-1.572l-3.447 1.166l-2.36-4.088l2.725-2.395a8.926 8.926 0 0 1-.007-3.128l-2.718-2.39l2.36-4.087l3.427 1.16A9.03 9.03 0 0 1 12.93 7.55L13.64 4H16V2h-2.36a2 2 0 0 0-1.961 1.608l-.504 2.518a10.967 10.967 0 0 0-1.327.754l-2.42-.819a1.998 1.998 0 0 0-2.372.895l-2.36 4.088a2 2 0 0 0 .411 2.502l1.931 1.697C5.021 15.495 5 15.745 5 16c0 .258.01.513.028.766l-1.92 1.688a2 2 0 0 0-.413 2.502l2.36 4.088a1.998 1.998 0 0 0 2.374.895l2.434-.824a10.974 10.974 0 0 0 1.312.759l.503 2.518A2 2 0 0 0 13.64 30h4.72a2 2 0 0 0 1.961-1.608l.504-2.519a10.967 10.967 0 0 0 1.327-.753l2.419.818a1.998 1.998 0 0 0 2.373-.894l2.36-4.088a2 2 0 0 0-.411-2.502z" fill="currentColor"></path></svg>
-          </n-icon>
-        )
-      },
-    })
-
-
-  }
-})
-
-watch(() => eventBus.message, (newVal) => {
-  if (newVal === 'alertReadUpdated') {
-    updateUnreadAlertMessage();
-  }
-})
-
-</script>
-
-<style scoped lang="scss">
-.nav {
-  width: 200px;
-  background-color: white;
-  border-right: 2px solid whitesmoke;
-  border-top: 2px solid whitesmoke;
-}
-
-// .collapseIcon {
-//   margin-right: 15px;
-//   margin-top: 10px;
-//   transition: transform 0.5s ease-in-out;
-// }
-
-.side-bar-bottom {
-  flex: 0 0 100px;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-.m-side-bar {
-  background: #fefefe;
-  border-right: 1px solid #e5e6eb;
-  display: flex;
-  flex-direction: column;
-  border-right: 2px solid whitesmoke;
-  border-top: 2px solid whitesmoke;
-  border-radius: 2%;
-  width: 200px;
-
-  position: relative;
-  width: 16vw;
-  height: 100%;
-  font-family: "Poppins", sans-serif;
-  transition: all 0.5s ease;
-
-  .topBox {
-    width: 100%;
-    height: 10%;
-    background: #fefefe;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-
-    span {
-      color: #fff;
-      font-size: 20px;
-      font-weight: 600;
-      transition: all 0.5s ease;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .collapseIcon {
-      cursor: pointer;
-      color: #000;
-      font-size: 28px;
-      min-width: 50px;
-      transition: transform 0.2s ease-in-out;
-
-      &.rotate {
-        transform: rotateY(180deg);
-        /* 旋转180度 */
-      }
-    }
-  }
-
-  .menu-wrap {
-    margin-top: 35px;
-    flex: 1 1 auto;
-    width: 100%;
-    transition: all 0.5s ease;
-  }
-}
-
-.menu-addition {
-  height: 50px;
-  line-height: 50px;
-  width: 100%;
-  padding: 0 30px;
-  position: relative;
-  color: rgba(0, 0, 0, 0.54);
-
-  &:after {
-    content: '';
-    display: block;
-    width: 160px;
-    height: 1px;
-    background: #dddee1;
-    position: absolute;
-    top: 0;
-    left: 20px;
-  }
-
-  .menu-item_icon {
-    font-size: 14px;
-    display: inline-block;
-    margin-right: 10px;
-  }
-
-  .menu-item_txt {
-    display: inline-block;
-    font-size: 14px;
-  }
-
-  .circle {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: red;
-    text-align: center;
-    line-height: 30px;
-    color: white;
-    font-size: 16px;
-  }
-}
-</style>
diff --git a/src/layout/components/common/IntervalPicker.vue b/src/layout/components/common/IntervalPicker.vue
deleted file mode 100644
index 998f16f..0000000
--- a/src/layout/components/common/IntervalPicker.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <n-select
-    v-model:value="intervalVal"
-    placeholder="采样时间间隔"
-    :options="options"
-    @update:value="handleUpdateValue"
-  />
-</template>
-
-<script setup lang="ts">
-import { NSelect } from 'naive-ui'
-import { isReactive, isRef, ref, toRefs, watch } from 'vue'
-
-import { useTimeRangeStore } from '@/store/timeRange'
-
-const options = ref([
-  {
-    label: '1分钟',
-    value: 60,
-  },
-  {
-    label: '30秒',
-    value: 30,
-  },
-  {
-    label: '15秒',
-    value: 15,
-  },
-  {
-    label: '5秒',
-    value: 5,
-  },
-  {
-    label: '1秒',
-    value: 1,
-  },
-])
-
-const timeRangeStore = useTimeRangeStore()
-const { timeRange, setTimeRange, setInterval } = timeRangeStore
-const { interval } = toRefs(timeRangeStore)
-
-const intervalVal = ref(interval.value)
-
-const handleUpdateValue = (val: number) => {
-  setInterval(val)
-}
-
-const range = ref<[number, number]>([0, 0])
-range.value[0] = timeRange.start
-range.value[1] = timeRange.end
-
-watch(range, newVal => {
-  setTimeRange(newVal)
-})
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/layout/components/common/TimeSelector.vue b/src/layout/components/common/TimeSelector.vue
deleted file mode 100644
index 785f80f..0000000
--- a/src/layout/components/common/TimeSelector.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <n-date-picker v-model:value="range" type="datetimerange" clearable />
-</template>
-
-<script setup lang="ts">
-import { NDatePicker } from 'naive-ui'
-import { ref, watch } from 'vue'
-
-import { useTimeRangeStore } from '@/store/timeRange'
-
-const timeRangeStore = useTimeRangeStore()
-const { timeRange, setTimeRange } = timeRangeStore
-
-const range = ref<[number, number]>([0, 0])
-range.value[0] = timeRange.start
-range.value[1] = timeRange.end
-
-watch(range, newVal => {
-  setTimeRange(newVal)
-})
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/layout/components/common/TopBar.vue b/src/layout/components/common/TopBar.vue
deleted file mode 100644
index 54ce7e5..0000000
--- a/src/layout/components/common/TopBar.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <div class="container">
-    <div class="select-wrapper">
-      <div class="text-prefix">集群</div>
-      <div class="select">
-        <n-select v-model:value="cluster" :options="options" />
-      </div>
-    </div>
-    <div class="time-selector-wrapper">
-      <div>
-        <n-tooltip
-          :style="{ maxWidth: '280px', fontSize: '10px' }"
-          placement="top-end"
-        >
-          <template #trigger>
-            <n-icon size="15">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                viewBox="0 0 512 512"
-              >
-                <path
-                  d="M256 64C150 64 64 150 64 256s86 192 192 192s192-86 192-192S362 64 256 64zm-6 304a20 20 0 1 1 20-20a20 20 0 0 1-20 20zm33.44-102C267.23 276.88 265 286.85 265 296a14 14 0 0 1-28 0c0-21.91 10.08-39.33 30.82-53.26C287.1 229.8 298 221.6 298 203.57c0-12.26-7-21.57-21.49-28.46c-3.41-1.62-11-3.2-20.34-3.09c-11.72.15-20.82 2.95-27.83 8.59C215.12 191.25 214 202.83 214 203a14 14 0 1 1-28-1.35c.11-2.43 1.8-24.32 24.77-42.8c11.91-9.58 27.06-14.56 45-14.78c12.7-.15 24.63 2 32.72 5.82C312.7 161.34 326 180.43 326 203.57c0 33.83-22.61 49.02-42.56 62.43z"
-                  fill="currentColor"
-                ></path>
-              </svg>
-            </n-icon>
-          </template>
-          <p>
-            左侧选项为选择样本的采样范围，默认为最近1h内;
-            右侧选项为选择样本的采样间隔，默认为15秒
-          </p>
-        </n-tooltip>
-      </div>
-      <div>
-        <TimeSelector />
-      </div>
-      <div>
-        <IntervalPicker class="interval-picker" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { NSelect } from 'naive-ui'
-import { ref, toRef, watch } from 'vue'
-
-import { useClusterSelectorStore } from '@/store/clusterSelector'
-import { useDeploymentStore } from '@/store/deployment/deployment'
-
-import IntervalPicker from './IntervalPicker.vue'
-import TimeSelector from './TimeSelector.vue'
-
-//需要使用的store
-const deploymentStore = useDeploymentStore()
-const clusterSelectorStore = useClusterSelectorStore()
-const { deployClusterList, deployClusterCheckout } = deploymentStore
-const { pickCluster } = clusterSelectorStore
-const currentCluster = toRef(clusterSelectorStore, 'currentCluster')
-
-//需要使用的变量
-const cluster = ref('')
-const options = ref([])
-cluster.value = currentCluster.value
-//需要使用的方法
-const getClusterList = () => {
-  deployClusterList().then(res => {
-    if (res.status === 200) {
-      let arr = res.data.data
-      arr.forEach((itm: Object, index: number) => {
-        options.value.push({
-          label: itm.Name,
-          value: itm.Name,
-        })
-      })
-      cluster.value = options.value[0].value
-    }
-  })
-}
-
-getClusterList()
-
-watch(
-  cluster,
-  newVal => {
-    pickCluster(newVal)
-  },
-  { immediate: true },
-)
-watch(currentCluster, newVal => {
-  deployClusterCheckout({ name: newVal })
-})
-</script>
-
-<style scoped lang="scss">
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0px 10px 15px 10px;
-  background-color: #f5f5f5;
-}
-
-.select-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.text-prefix {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 5px;
-  padding: 3px 8px;
-  height: 24px;
-  border-radius: 4px;
-  background-color: #3366ff;
-  color: #fff;
-}
-
-.select {
-  width: 200px;
-}
-
-.time-selector-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: auto;
-
-  .interval-picker {
-    width: 100px;
-    flex-shrink: 1;
-  }
-}
-</style>
diff --git a/src/layout/constants.ts b/src/layout/constants.ts
new file mode 100644
index 0000000..31ca28a
--- /dev/null
+++ b/src/layout/constants.ts
@@ -0,0 +1,11 @@
+export enum SiderEnum {
+  WIDTH = 240,
+  COLLAPSED_WIDTH = 68,
+  MENU_COLLAPSED_WIDTH = 68,
+
+  /* 菜单每级缩进 */
+  MENU_INDENT = 24,
+
+  PRODUCT_COLLAPSED_WIDTH = 100,
+  PRODUCT_WIDTH = 180,
+}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index a7a7ab1..b10b1cb 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,37 +1,38 @@
 <template>
-  <div>
-    <Header class="header" />
-    <div class="container">
-      <Main class="main" />
-      <Nav v-if="notUserCheck()" class="nav" />
-    </div>
-  </div>
+  <NLayout class="container">
+    <NLayoutHeader class="header" bordered>
+      <Header />
+    </NLayoutHeader>
+    <NLayout has-sider>
+      <NLayoutSider
+        collapse-mode="width"
+        :collapsed-width="SiderEnum.COLLAPSED_WIDTH"
+        :width="SiderEnum.WIDTH"
+        show-trigger="bar"
+        bordered
+        :on-update:collapsed="updateCollapsed"
+      >
+        <!-- <Project :collapsed="state.collapsed" /> -->
+        <Menu />
+      </NLayoutSider>
+      <NLayoutContent>
+        <Main />
+      </NLayoutContent>
+    </NLayout>
+  </NLayout>
 </template>
 <script setup lang="ts">
-import { notUserCheck } from '../utils/functions'
+import { NLayout, NLayoutContent, NLayoutHeader, NLayoutSider } from 'naive-ui'
+import { reactive } from 'vue'
+
 import Header from './components/Header.vue'
 import Main from './components/Main.vue'
-import Nav from './components/Nav.vue'
-</script>
-<style scoped lang="postcss">
-.header {
-  height: var(--header-height);
-  border-bottom: 1px solid rgb(229, 229, 229);
-  box-shadow: 0 6px 16px rgb(0 0 0 / 5%);
-}
-
-.container {
-  display: flex;
-  flex-direction: row;
-  min-height: calc(100vh - var(--header-height));
-}
-
-.main {
-  flex: 1 1 auto;
-}
+import Menu from './components/Menu.vue'
+import { SiderEnum } from './constants'
 
-.nav {
-  flex-shrink: 0;
-  order: -1;
+const state = reactive({ collapsed: false })
+const updateCollapsed = (collapsed: boolean) => {
+  state.collapsed = collapsed
 }
-</style>
+</script>
+<!-- <style scoped lang="postcss"></style> -->
diff --git a/src/layout/index2.vue b/src/layout/index2.vue
new file mode 100644
index 0000000..a7a7ab1
--- /dev/null
+++ b/src/layout/index2.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Header class="header" />
+    <div class="container">
+      <Main class="main" />
+      <Nav v-if="notUserCheck()" class="nav" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { notUserCheck } from '../utils/functions'
+import Header from './components/Header.vue'
+import Main from './components/Main.vue'
+import Nav from './components/Nav.vue'
+</script>
+<style scoped lang="postcss">
+.header {
+  height: var(--header-height);
+  border-bottom: 1px solid rgb(229, 229, 229);
+  box-shadow: 0 6px 16px rgb(0 0 0 / 5%);
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100vh - var(--header-height));
+}
+
+.main {
+  flex: 1 1 auto;
+}
+
+.nav {
+  flex-shrink: 0;
+  order: -1;
+}
+</style>
diff --git a/src/model/alert.ts b/src/model/alert.ts
index 6467ec0..d48b801 100644
--- a/src/model/alert.ts
+++ b/src/model/alert.ts
@@ -20,3 +20,23 @@ export interface GetAlertMsgsParams {
   level?: string
   content?: string
 }
+
+export interface AlertItem {
+  alertUsers: string[]
+  desc: string
+  enable: boolean
+  interval: number
+  level: string
+  name: string
+  rule: string
+  times: number
+}
+
+export interface PostAlertConfig {
+  name: string
+  enable: boolean
+  interval: number
+  times: number
+  rule: string
+  alertUsers: string[]
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index d1a613b..2e678b8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,19 @@
+import { CloudServerOutlined } from '@vicons/antd'
+import {
+  ChannelAlert28Regular,
+  ErrorCircleSettings16Regular,
+  TextGrammarSettings24Regular,
+} from '@vicons/fluent'
+import { HardwareChip, Options, PieChart, Server } from '@vicons/ionicons5'
+import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHistory } from 'vue-router'
 
+import { Permission } from '@/constants/permission'
 import Layout from '@/layout/index.vue'
+import { renderIcon } from '@/utils'
+import NProgress from '@/utils/nProgress'
+// 路由跳转请使用 name 字段.
+import { getRouteFilterCmp } from '@/utils/router'
 import AlertConfig from '@/views/alertPage/alert-config.vue'
 import AlertPage from '@/views/alertPage/index.vue'
 import SystemLog from '@/views/alertPage/system-log.vue'
@@ -17,16 +30,16 @@ import StoragePool from '@/views/storagePool/index.vue'
 import StoragePoolDetail from '@/views/storagePool/StoragePoolDetail.vue'
 import AdminEditUser from '@/views/users/admin/AdminEditUser.vue'
 import AdminManageUser from '@/views/users/admin/AdminManageUser.vue'
-import ChangePassword from '@/views/users/ChangePassword.vue'
-//详情页
-import MessageDetail from '@/views/users/message/MessageDetail.vue'
-import MessagePage from '@/views/users/message/MessagePage.vue'
+// import ChangePassword from '@/views/users/ChangePassword.vue'
+// //详情页
+// import MessageDetail from '@/views/users/message/MessageDetail.vue'
+// import MessagePage from '@/views/users/message/MessagePage.vue'
 import PersonalInfo from '@/views/users/PersonalInfo.vue'
 import Login from '@/views/users/UserLogin.vue'
-
-const routes = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
+    name: 'index',
     component: Layout, // 布局组件作为一级路由
     redirect: '/dashboard',
     children: [
@@ -35,142 +48,227 @@ const routes = [
         name: 'Dashboard',
         component: Dashboard,
         meta: {
-          title: 'Dashboard',
-          icon: 'dashboard',
-          affix: true,
+          title: '集群概览',
+          icon: renderIcon(PieChart),
         },
       },
-      //集群管理下的页面
       {
-        path: 'cluster-topology',
-        name: 'ClusterTopology',
-        component: ClusterTopology,
+        path: 'cluster-management',
+        name: 'ClusterManagement',
+        redirect: '/cluster-management/cluster-topology',
         meta: {
-          title: 'Dashboard',
-          icon: 'dashboard',
-          affix: true,
+          title: '集群管理',
+          icon: renderIcon(Server),
         },
-      },
-      {
-        path: 'server-management',
-        name: 'ServerManagement',
-        component: ServerManagement,
-      },
-      {
-        path: 'disk-management',
-        name: 'DiskManagement',
-        component: DiskManagement,
-      },
-      {
-        path: 'storage-pool',
-        name: 'StoragePool',
-        component: StoragePool,
-      },
-      //存储块管理下的页面
-      {
-        path: 'volume-management',
-        name: 'VolumeManagement',
-        redirect: '/volume-management/',
         children: [
           {
-            path: ':path*',
-            name: 'pathVolumeManagement',
-            component: VolumeManagement,
+            path: 'cluster-topology',
+            name: 'ClusterTopology',
+            component: ClusterTopology,
+            meta: {
+              title: '集群拓扑',
+            },
+          },
+          {
+            path: 'server-management',
+            name: 'ServerManagement',
+            component: ServerManagement,
+            meta: {
+              title: '服务器管理',
+            },
+          },
+          {
+            path: 'server-detail',
+            name: 'ServerDetail',
+            component: ServerDetail,
+            meta: {
+              activeMenu: 'ServerManagement',
+              title: '服务器管理',
+            },
+          },
+          {
+            path: 'disk-management',
+            name: 'DiskManagement',
+            component: DiskManagement,
+            meta: {
+              title: '硬盘管理',
+            },
           },
         ],
       },
       {
-        path: 'snapshot-management',
-        name: 'SnapshotManagement',
-        component: SnapshotManagement,
-      },
-      {
-        path: 'login',
-        name: 'Login',
-        component: Login,
-      },
-      {
-        path: 'change-password',
-        name: 'ChangePassword',
-        component: ChangePassword,
-      },
-      {
-        path: 'personal-info',
-        name: 'PersonalInfo',
-        component: PersonalInfo,
-      },
-      {
-        path: 'message-page',
-        name: 'MessagePage',
-        component: MessagePage,
-      },
-      //详情页
-      {
-        path: 'message-detail/:id',
-        name: 'MessageDetail',
-        component: MessageDetail,
+        path: 'storage-pool',
+        name: 'StoragePool',
+        component: StoragePool,
+        meta: {
+          icon: renderIcon(Options),
+          title: '存储池管理',
+        },
       },
       {
         path: 'storagepool-detail/:id',
         name: 'StoragePoolDetail',
         component: StoragePoolDetail,
+        meta: {
+          activeMenu: 'StoragePool',
+          title: '存储池管理',
+        },
       },
       {
-        path: 'volume-detail',
-        name: 'VolumeDetail',
+        path: 'storage-block',
+        name: 'StorageBlock',
+        redirect: '/storage-block/volume-management/',
+        meta: {
+          title: '块存储管理',
+          icon: renderIcon(HardwareChip),
+        },
         children: [
           {
-            path: '/:path*',
-            name: 'pathVolumeDetail',
+            path: 'volume-management/:path*',
+            name: 'VolumeManagement',
+            component: VolumeManagement,
+            meta: {
+              title: '卷管理',
+            },
+          },
+          {
+            path: 'volume-detail/:path*',
+            name: 'VolumeDetail',
             component: VolumeDetail,
+            meta: {
+              title: 'VolumeDetail',
+              activeMenu: 'VolumeManagement',
+            },
+          },
+          {
+            path: 'snapshot-management',
+            name: 'SnapshotManagement',
+            component: SnapshotManagement,
+            meta: {
+              title: '快照管理',
+            },
           },
         ],
       },
       {
-        path: 'server-detail/',
-        query: { q: 'keyword' },
-        name: 'ServerDetail',
-        component: ServerDetail,
+        path: 'deployment',
+        name: 'Deployment',
+        component: Deployment,
+        meta: {
+          title: '集群部署',
+          icon: renderIcon(CloudServerOutlined),
+          permissions: [Permission.ADMIN],
+          // 这里需要权限
+        },
+      },
+      {
+        path: 'system-log/',
+        name: 'SystemLog',
+        component: SystemLog,
+        meta: {
+          title: '系统操作日志',
+          icon: renderIcon(TextGrammarSettings24Regular),
+        },
       },
       {
         path: 'alert-page/',
         name: 'AlertPage',
         component: AlertPage,
+        meta: {
+          title: '监控信息',
+          icon: renderIcon(ChannelAlert28Regular),
+        },
       },
       {
         path: 'alert-config/',
         name: 'AlertConfig',
         component: AlertConfig,
+        meta: {
+          title: '告警配置',
+          // 这里也需要权限
+          icon: renderIcon(ErrorCircleSettings16Regular),
+          permissions: [Permission.ADMIN],
+        },
       },
       {
-        path: 'system-log/',
-        name: 'SystemLog',
-        component: SystemLog,
+        path: '/admin',
+        name: 'Admin',
+        redirect: '/admin/manage-user',
+        meta: {
+          hidden: true,
+        },
+        children: [
+          {
+            path: 'manage-user',
+            name: 'AdminManageUser',
+            component: AdminManageUser,
+            meta: {
+              hidden: true,
+              title: 'AdminManageUser',
+            },
+          },
+          {
+            path: 'edit-user',
+            name: 'AdminEditUser',
+            component: AdminEditUser,
+            meta: {
+              hidden: true,
+              title: 'AdminEditUser',
+            },
+          },
+        ],
       },
       {
-        path: 'deployment',
-        name: 'Deployment',
-        component: Deployment,
+        path: '/personal-info',
+        name: 'PersonalInfo',
+        component: PersonalInfo,
+        meta: {
+          hidden: true,
+          title: 'PersonalInfo',
+        },
       },
     ],
   },
+  // --------------------- 以下为不需要再nav展示的路由 ---------------------
+
   {
-    path: '/admin',
-    name: 'Admin',
-    component: Layout,
-    children: [
-      {
-        path: 'manage-user',
-        name: 'AdminManageUser',
-        component: AdminManageUser,
-      },
-      {
-        path: 'edit-user',
-        name: 'AdminEditUser',
-        component: AdminEditUser,
-      },
-    ],
+    path: '/login',
+    name: 'Login',
+    component: Login,
+    meta: {
+      hidden: true,
+      title: 'Login',
+    },
   },
+
+  // {
+  //   path: '/change-password',
+  //   name: 'ChangePassword',
+  //   component: ChangePassword,
+  //   meta: {
+  //     hidden: true,
+  //     title: 'ChangePassword',
+  //   },
+  // },
+
+  // {
+  //   path: '/message-page',
+  //   name: 'MessagePage',
+  //   component: MessagePage,
+  //   meta: {
+  //     hidden: true,
+  //     title: 'MessagePage',
+  //   },
+  // },
+  // {
+  //   path: '/message-detail/:id',
+  //   name: 'MessageDetail',
+  //   component: MessageDetail,
+  //   meta: {
+  //     hidden: true,
+  //     title: 'MessageDetail',
+  //   },
+  // },
 ]
 
 const router = createRouter({
@@ -181,5 +279,11 @@ const router = createRouter({
 // router.beforeEach((to, from) => {
 //   const userStore = useUserStore()
 // })
-
+router.beforeEach(() => {
+  NProgress.start()
+})
+router.afterEach(() => {
+  NProgress.done()
+})
 export default router
+export const filterRoutes = getRouteFilterCmp(routes)
diff --git a/src/store/alertPage/alertMessage.ts b/src/store/alertPage/alertMessage.ts
index e26f83b..2e6e9bd 100644
--- a/src/store/alertPage/alertMessage.ts
+++ b/src/store/alertPage/alertMessage.ts
@@ -2,14 +2,11 @@ import { defineStore } from 'pinia'
 import { reactive } from 'vue'
 
 import {
-  getAlertCandidateApi,
   getAlertConfigApi,
   getAlertReadIdUpdateApi,
   getSystemLogApi,
   getUnreadAlertMessageApi,
   updateAlertCandidateApi,
-  updateAlertRuleApi,
-  updateAlertUserApi,
 } from '@/api/alert'
 
 // state类型
@@ -38,12 +35,8 @@ export const useAlertStore = defineStore('alert', () => {
 
   const getUnreadAlertMessage = async () => {
     const [err, res] = await getUnreadAlertMessageApi()
-    if (err) {
-      console.log('请求报错啦', err)
-      return err
-    } else if (res.status === 200) {
-      return res
-    }
+    if (err) return console.log('请求报错啦', err)
+    state.count = res.data.data
   }
 
   const getAlertReadIdUpdate = async (data: object) => {
@@ -76,36 +69,6 @@ export const useAlertStore = defineStore('alert', () => {
     }
   }
 
-  const getAlertCandidate = async () => {
-    const [err, res] = await getAlertCandidateApi()
-    if (err) {
-      console.log('请求报错啦', err)
-      return err
-    } else if (res.status === 200) {
-      return res
-    }
-  }
-
-  const updateAlertUser = async (data: object) => {
-    const [err, res] = await updateAlertUserApi(data)
-    if (err) {
-      console.log('请求报错啦', err)
-      return err
-    } else if (res.status === 200) {
-      return res
-    }
-  }
-
-  const updateAlertRule = async (data: object) => {
-    const [err, res] = await updateAlertRuleApi(data)
-    if (err) {
-      console.log('请求报错啦', err)
-      return err
-    } else if (res.status === 200) {
-      return res
-    }
-  }
-
   return {
     state,
     getSystemLog,
@@ -113,8 +76,5 @@ export const useAlertStore = defineStore('alert', () => {
     getAlertReadIdUpdate,
     getAlertConfig,
     updateAlertCandidate,
-    getAlertCandidate,
-    updateAlertUser,
-    updateAlertRule,
   }
 })
diff --git a/src/store/blockStorageManagement/block.ts b/src/store/blockStorageManagement/block.ts
index 066d3a6..f0e8362 100644
--- a/src/store/blockStorageManagement/block.ts
+++ b/src/store/blockStorageManagement/block.ts
@@ -10,6 +10,7 @@ import {
   deleteSnapshotApi,
   deleteVolumeApi,
   expandVolumeApi,
+  getVolumeDetailApi,
   getVolumeListApi,
   lazyCloneVolumeApi,
   recoverVolumeApi,
@@ -45,6 +46,22 @@ export const useBlockStore = defineStore('block', () => {
     }
   }
 
+  //获取卷信息（detail）
+  const getVolumeDetail = async (data: any) => {
+    const [err, res] = await getVolumeDetailApi(data)
+    if (err) {
+      console.log('请求报错喽', err)
+      return err
+    } else if (res.status === 200) {
+      if (res.data.data === null) {
+        return res
+      } else {
+        state.volumePerformance = res.data.data.performance
+        return res
+      }
+    }
+  }
+
   //删除卷
   const deleteVolume = async (data: any) => {
     const [err, res] = await deleteVolumeApi(data)
@@ -187,5 +204,6 @@ export const useBlockStore = defineStore('block', () => {
     createVolumeNamespace,
     deleteSnapshot,
     cancelSnapshot,
+    getVolumeDetail,
   }
 })
diff --git a/src/store/eventBus.ts b/src/store/eventBus.ts
deleted file mode 100644
index 3c9b06f..0000000
--- a/src/store/eventBus.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {reactive} from "vue"
-
-const eventBus = reactive({
-    message:""
-})
-
-export default eventBus
\ No newline at end of file
diff --git a/src/store/user.ts b/src/store/user.ts
index e3c74dc..bd63da8 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -1,21 +1,23 @@
-import { reactive } from 'vue'
+import Cookies from 'js-cookie'
 import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+import type { RouteMeta } from 'vue-router'
+
 import {
-  loginApi,
-  logoutApi,
-  resetPasswordApi,
-  changePasswordApi,
-  adminDeleteUserApi,
   adminAddUserApi,
+  adminChangeUserPermissionApi,
+  adminDeleteUserApi,
   adminEditUserApi,
   adminGetUserApi,
-  getUserInfoApi,
   changeAccountApi,
-  adminChangeUserPermissionApi,
+  changePasswordApi,
+  getUserInfoApi,
+  loginApi,
+  logoutApi,
+  resetPasswordApi,
 } from '@/api/user'
+import { tokenKey } from '@/constants/http'
 import router from '@/router'
-import Cookies from 'js-cookie'
-import { tokenKey } from '@/constant'
 
 // state类型
 export const useUserStore = defineStore('user', () => {
@@ -33,6 +35,10 @@ export const useUserStore = defineStore('user', () => {
     userDeletedFlag: false,
   })
 
+  const hasPermission = (permissions: RouteMeta['permissions']) => {
+    return permissions?.includes(state.permission)
+  }
+
   //用户登录
   const loginUser = async (data: any) => {
     const [err, res] = await loginApi(data)
@@ -182,6 +188,7 @@ export const useUserStore = defineStore('user', () => {
 
   return {
     state,
+    hasPermission,
     handleLogout,
     resetPassword,
     loginUser,
diff --git a/src/utils/_fetch.ts b/src/utils/_fetch.ts
index 9325c68..73be83b 100644
--- a/src/utils/_fetch.ts
+++ b/src/utils/_fetch.ts
@@ -6,7 +6,7 @@ import md5 from 'js-md5'
 import { stringify } from 'qs'
 import urlParse from 'url-parse'
 
-import { signKey, timestampKey, tokenKey } from '@/constant'
+import { signKey, timestampKey, tokenKey } from '@/constants/http'
 
 import type { LiteralUnion, Recordable } from './index'
 
@@ -167,7 +167,10 @@ export class Fetch {
       const res = await fetchFn()
       return Promise.resolve([null, res])
     } catch (err: any) {
-      if (err.response.status === 401) {
+      if (
+        err.response.status === 401 &&
+        window.location.pathname !== '/login'
+      ) {
         window.location.href = '/login'
       }
       return Promise.resolve([err, null])
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index ed2c0d1..4d7f5e4 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -25,25 +25,27 @@ export const getEChartsFormatter = (start: number, end: number) => {
   return '{yyyy}-{MM}-{dd}\n{HH}:{mm}:{ss}'
 }
 
-const divisor = 1024 * 1024
-export const fixNum = (numString: string | number) =>
-  +(+numString / divisor).toFixed(2)
+const divisorMap = {
+  Mb: (1024 * 1024) / 8,
+  MB: 1024 * 1024,
+}
+type FixType = undefined | 'Mb' | 'MB'
+export const fixNum = (numString: string | number, fixType: FixType = 'MB') =>
+  +(+numString / divisorMap[fixType!]).toFixed(2)
 
 export const gEchartsSeriesData = (
   data: { [name: string]: RangeItem[] },
-  needFix = false,
+  fixType?: FixType,
   type = 'line',
 ) =>
-  Object.entries(data).map(([key, value]) => {
-    return {
-      type,
-      name: key,
-      data: value.map<[number, number]>(({ timestamp, value }) => [
-        timestamp * 1000,
-        !needFix ? Number(Number(value).toFixed(2)) : fixNum(value),
-      ]),
-    }
-  })
+  Object.entries(data).map(([key, value]) => ({
+    type,
+    name: key,
+    data: value.map<[number, number]>(({ timestamp, value }) => [
+      timestamp * 1000,
+      fixType ? fixNum(value, fixType) : Number(Number(value).toFixed(2)),
+    ]),
+  }))
 
 export const gEchartsSeriesDataByPerformance = (performanceList: {
   [key: string]: PerformanceItem[]
@@ -59,10 +61,9 @@ export const gEchartsSeriesDataByPerformance = (performanceList: {
     list.forEach(({ timestamp, readBPS, readIOPS, writeBPS, writeIOPS }) => {
       const time = timestamp * 1000
       void [readBPS, readIOPS, writeBPS, writeIOPS].forEach((item, index) => {
-        console.log(name, readBPS)
         data[index].push([
           time,
-          index % 2 ? Number(Number(item).toFixed(2)) : fixNum(item),
+          index % 2 ? Number(Number(item).toFixed(2)) : fixNum(item, 'MB'),
         ])
       })
     })
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3a3795d..fbc2118 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,12 @@
+import { NIcon } from 'naive-ui'
+import type { Component } from 'vue'
+import { h } from 'vue'
 export type LiteralUnion<T extends U, U = string> =
   | T
   | (U & { neverKey?: never }) // 单词枚举联合类型,如果是u&{}，我的编辑器会把后者识别成string,导致整体识别成string
 
 export type Recordable<T = any> = Record<string, T>
+
+export function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
diff --git a/src/utils/nProgress.ts b/src/utils/nProgress.ts
new file mode 100644
index 0000000..9320eb8
--- /dev/null
+++ b/src/utils/nProgress.ts
@@ -0,0 +1,18 @@
+import 'nprogress/nprogress.css'
+
+import NProgress from 'nprogress'
+
+NProgress.configure({
+  // 动画方式
+  easing: 'ease',
+  // 递增进度条的速度
+  speed: 500,
+  // 是否显示加载ico
+  showSpinner: false,
+  // 自动递增间隔
+  trickleSpeed: 200,
+  // 初始化时的最小百分比
+  minimum: 0.3,
+})
+
+export default NProgress
diff --git a/src/utils/router.ts b/src/utils/router.ts
new file mode 100644
index 0000000..8010470
--- /dev/null
+++ b/src/utils/router.ts
@@ -0,0 +1,19 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+import type { Fn, Recordable } from '#/index'
+
+export const getIsLeaf = (data: Recordable[]) =>
+  !data.some(
+    (item = {} as Recordable) => item?.meta.title && !item?.meta.activeMenu,
+  )
+
+// -------------------------
+// 过滤component字段 和 hidden为true的路由
+const filterFn = (route: RouteRecordRaw): RouteRecordRaw => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { component, children = [], ...rest } = route
+  return { ...rest, children: getRouteFilterCmp(children) }
+}
+
+export const getRouteFilterCmp = (routes: RouteRecordRaw[]) =>
+  routes.map(item => filterFn(item))
diff --git a/src/views/alertPage/alert-config.vue b/src/views/alertPage/alert-config.vue
index 545fdc5..65eecf4 100644
--- a/src/views/alertPage/alert-config.vue
+++ b/src/views/alertPage/alert-config.vue
@@ -1,17 +1,15 @@
 <template>
   <div class="container">
     <n-card>
-      <div class="data-form">
-        <n-data-table
-          :columns="columns"
-          :data="data"
-          :bordered="false"
-          :scroll-x="1000"
-        />
-        <n-space justify="end">
-          <n-pagination />
-        </n-space>
-      </div>
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        :bordered="false"
+        :scroll-x="1000"
+      />
+      <n-space justify="end">
+        <n-pagination />
+      </n-space>
     </n-card>
     <EditModal
       ref="editModalRef"
@@ -98,7 +96,7 @@ const columns = ref([
     key: 'alertUsers',
 
     render: row => {
-      return <span>{row.alertUsers}</span>
+      return <span>{row.alertUsers.join('， ')}</span>
     },
   },
   {
diff --git a/src/views/alertPage/edit-modal.vue b/src/views/alertPage/edit-modal.vue
index c755821..5e4b01d 100644
--- a/src/views/alertPage/edit-modal.vue
+++ b/src/views/alertPage/edit-modal.vue
@@ -1,157 +1,188 @@
 <template>
-    <n-modal v-model:show="val" preset="dialog" title="编辑告警规则">
-        <n-form  :model="formData">
-            <n-form-item label="告警规则开关">
-                <n-switch v-model:value="formData.alertSwitch" />
-            </n-form-item>
-            <n-form-item path="length">
-                <template #label>
-                    <span>
-                        检测间隔:
-                    </span>
-                </template>
-                <n-input v-model:value="formData.alertInterval" placeholder="请输入检测间隔..."></n-input>
-            </n-form-item>
-            <n-form-item path="length">
-                <template #label>
-                    <span>
-                        触发次数上限:
-                    </span>
-                </template>
-                <n-input v-model:value="formData.triggerLimit" placeholder="请输入出发次数..."></n-input>
-            </n-form-item>
-            <n-form-item path="length">
-                <template #label>
-                    <span>
-                        告警规则:
-                    </span>
-                </template>
-                <n-input v-if="!nameIsSpace" disabled v-model:value="formData.rule" placeholder="请输入告警规则..."></n-input>
-                <n-input-number v-if="nameIsSpace" :min="1" :max="99" v-model:value="formData.rule" placeholder="请输入告警规则..."></n-input-number>
-            </n-form-item>
-        </n-form>
-        <template #action>
-            <div>
-                <n-button @Click="confirmEdit" type="primary">确定</n-button>
-                <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
-            </div>
+  <n-modal v-model:show="val" preset="dialog" title="编辑告警规则">
+    <n-form :model="formData">
+      <n-form-item label="告警规则开关">
+        <n-switch v-model:value="formData.alertSwitch" />
+      </n-form-item>
+      <n-form-item path="length">
+        <template #label>
+          <span> 检测间隔: </span>
         </template>
-    </n-modal>
+        <n-input
+          v-model:value="formData.alertInterval"
+          placeholder="请输入检测间隔..."
+        ></n-input>
+      </n-form-item>
+      <n-form-item path="length">
+        <template #label>
+          <span> 触发次数上限: </span>
+        </template>
+        <n-input
+          v-model:value="formData.triggerLimit"
+          placeholder="请输入出发次数..."
+        ></n-input>
+      </n-form-item>
+      <n-form-item path="length">
+        <template #label>
+          <span> 告警规则: </span>
+        </template>
+        <n-input
+          v-if="!nameIsSpace"
+          v-model:value="formData.rule"
+          disabled
+          placeholder="请输入告警规则..."
+        ></n-input>
+        <n-input-number
+          v-if="nameIsSpace"
+          v-model:value="formData.rule"
+          :min="1"
+          :max="99"
+          placeholder="请输入告警规则..."
+        ></n-input-number>
+      </n-form-item>
+      <NFormItem label="接收人:">
+        <NSelect
+          v-model:value="formData.alertUsers"
+          placeholder="请选择接收人"
+          :options="userOptions"
+          multiple
+          filterable
+        />
+      </NFormItem>
+    </n-form>
+    <template #action>
+      <div>
+        <n-button type="primary" @Click="updateAlertRule">确定</n-button>
+        <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
+      </div>
+    </template>
+  </n-modal>
 </template>
 
 <script lang="ts" setup>
-import { useAlertStore } from '@/store/alertPage/alertMessage'
-import { ref, reactive, watch } from 'vue'
-import { useMessage, type FormRules, type FormItemRule, NSelect } from 'naive-ui'
-
-const alertStore = useAlertStore();
-const { updateAlertRule } = alertStore;
-  
-const message = useMessage();
-const currentLengthInModal = ref(null);
-const nameIsSpace = ref(false);
-const emit = defineEmits(['alert-config-updated'])
+import { NFormItem, NSelect, useMessage } from 'naive-ui'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+
+import { getAlertCandidateApi, updateAlertRuleApi } from '@/api/alert'
+import type { AlertItem, PostAlertConfig } from '@/model/alert'
 
+const message = useMessage()
+const currentLengthInModal = ref(null)
+const nameIsSpace = ref(false)
+const emit = defineEmits(['alert-config-updated'])
 
 const setVolumeToExtend = (name: string, currentLength: number) => {
-    formData.volumeName = name;
-    currentLengthInModal.value = currentLength
+  formData.volumeName = name
+  currentLengthInModal.value = currentLength
 }
 
-
-const props = defineProps(
-    {
-      rowInfo: {
-        type: Object
-      }
-    } 
-)
-
+const props = defineProps<{ rowInfo: AlertItem }>()
 const disableRule = ref(true)
-
-
+const state = reactive({
+  userList: [] as string[],
+})
 const formData = reactive({
-    alertSwitch: false,
-    alertInterval: 0,
-    triggerLimit: 0,
-    rule: ""
+  alertSwitch: false,
+  alertInterval: 0,
+  triggerLimit: 0,
+  rule: '',
+  alert: '',
+  alertUsers: [] as string[],
 })
 
 const lengthValidator = () => {
-    const checkIsNotNumber = isNaN(formData.length);
-    if (formData.length < 10 || formData.length === 0 || formData.length > 20 * 1024) { return false }
-    else if (formData.length <= currentLengthInModal.value) {
-        return false
-    }
-    else if(checkIsNotNumber) {
-        return false
-    }
-    else return true
+  const checkIsNotNumber = isNaN(formData.length)
+  if (
+    formData.length < 10 ||
+    formData.length === 0 ||
+    formData.length > 20 * 1024
+  ) {
+    return false
+  } else if (formData.length <= currentLengthInModal.value) {
+    return false
+  } else if (checkIsNotNumber) {
+    return false
+  } else return true
 }
 
 const rules = {
-    length: [
-        {
-            required: true,
-        },
-        {
-            validator: lengthValidator,
-            message: "请输入正确长度，长度需要在10-20*1024之间，并且大于当前容量",
-            trigger: ["input", 'blur']
-        }
-    ]
+  length: [
+    {
+      required: true,
+    },
+    {
+      validator: lengthValidator,
+      message: '请输入正确长度，长度需要在10-20*1024之间，并且大于当前容量',
+      trigger: ['input', 'blur'],
+    },
+  ],
 }
 
-const confirmEdit = () => {
-    const {alertSwitch, alertInterval, triggerLimit, rule} = formData;
-    const params = {
-        name:props.rowInfo.name,
-        enable: alertSwitch,
-        interval: +alertInterval,
-        times:+triggerLimit,
-        rule: typeof(rule) === 'string' ? rule : rule.toString()
-    }
-    updateAlertRule(params).then(res => {
-       if(res.status === 200) {
-      message.success('更新配置成功！');
-      emit('alert-config-updated');
-      cancel();   
-    } else {
-        message.error('更新失败')
-    }
-    })
+const updateAlertRule = async () => {
+  const { alertSwitch, alertInterval, triggerLimit, rule, alertUsers } =
+    formData
+  const params: PostAlertConfig = {
+    name: props.rowInfo.name,
+    enable: alertSwitch,
+    interval: +alertInterval,
+    times: +triggerLimit,
+    rule: typeof rule === 'string' ? rule : rule.toString(),
+    alertUsers,
+  }
+  const [err, res] = await updateAlertRuleApi(params)
+  if (err) return message.error('更新失败')
+  message.success('更新配置成功！')
+  emit('alert-config-updated')
+  cancel()
 }
 
 let val = ref(false)
 //点击取消，关闭模态框
 const cancel = () => {
-    val.value = false;
-    formData.volumeName = "";
-    formData.length = null
+  val.value = false
+  formData.volumeName = ''
+  formData.length = null
 }
 
 //展示模态框，供外部调用
 const showModal = () => {
-    val.value = true
+  val.value = true
 }
 
-watch(() => props.rowInfo, () => { 
-  formData.alertSwitch = props.rowInfo.enable;
-  formData.alertInterval = props.rowInfo.interval;
-  formData.triggerLimit = props.rowInfo.times;
-  formData.rule = props.rowInfo.rule;
-
-  if(props.rowInfo.name === 'space') {
-   nameIsSpace.value = true;    
+const getAlertCandidate = async () => {
+  const [err, res] = await getAlertCandidateApi()
+  if (err) return console.log('请求报错啦', err)
+  state.userList = res.data.data
 }
-else {
-    nameIsSpace.value = false;    
 
-}
+watch(
+  () => props.rowInfo,
+  () => {
+    formData.alertSwitch = props.rowInfo.enable
+    formData.alertInterval = props.rowInfo.interval
+    formData.triggerLimit = props.rowInfo.times
+    formData.rule = props.rowInfo.rule
+    formData.alertUsers = props.rowInfo.alertUsers
+    formData.alert = props.rowInfo.name
+
+    if (props.rowInfo.name === 'space') {
+      nameIsSpace.value = true
+    } else {
+      nameIsSpace.value = false
+    }
+  },
+)
+
+const userOptions = computed(() => {
+  return state.userList.map(item => ({
+    label: item,
+    value: item,
+  }))
+})
+
+onMounted(() => {
+  getAlertCandidate()
 })
 
 defineExpose({ showModal, setVolumeToExtend })
 </script>
-
-<style></style>
-
diff --git a/src/views/alertPage/index.vue b/src/views/alertPage/index.vue
index ef59533..13bcfb2 100644
--- a/src/views/alertPage/index.vue
+++ b/src/views/alertPage/index.vue
@@ -62,10 +62,9 @@ import { ref, watch } from 'vue'
 import { getAlertMessageApi } from '@/api/alert'
 import type { AlertMsg } from '@/model/alert'
 import { useAlertStore } from '@/store/alertPage/alertMessage'
-import eventBus from '@/store/eventBus'
 
 const alertStore = useAlertStore()
-const { getAlertReadIdUpdate } = alertStore
+const { getAlertReadIdUpdate, getUnreadAlertMessage } = alertStore
 
 const totalPage = ref(1)
 
@@ -156,7 +155,8 @@ const updatePageList = async (shouldUpdateReadId = false) => {
   if (data.value.length !== 0 && shouldUpdateReadId) {
     getAlertReadIdUpdate({ id: data.value[0].id }).then(res => {
       if (res?.status === 200) {
-        eventBus.message = 'alertReadUpdated'
+        // 重新获取未读信息
+        getUnreadAlertMessage()
       }
       if (res?.status !== 200) {
         message.error('传回已读信息失败')
diff --git a/src/views/alertPage/system-log.vue b/src/views/alertPage/system-log.vue
index b4b4686..83ea4dc 100644
--- a/src/views/alertPage/system-log.vue
+++ b/src/views/alertPage/system-log.vue
@@ -1,190 +1,214 @@
 <template>
-    <div class="container">
-      <n-card>
-        <div class="header-bar">
-          <n-space justify="start">
-            <n-input placeholder="请输入日志内容..." v-model:value="logSearchContent" @keyup.enter="searchLog" clearable>
-                <template #suffix>
+  <div class="container">
+    <n-card>
+      <div class="header-bar">
+        <n-space justify="start">
+          <NDatePicker
+            type="datetimerange"
+            clearable
+            @update:value="onDateChange"
+          />
+          <n-input
+            v-model:value="logSearchContent"
+            placeholder="请输入日志内容..."
+            clearable
+            @keyup.enter="searchLog"
+          >
+            <template #suffix>
               <n-icon :component="Search" />
             </template>
-            </n-input>
-          </n-space>
-        </div>
-        <div class="data-form">
-          <n-data-table :columns="columns" :data="data" :bordered="false"  :scroll-x="1000" />
-          <n-space justify="end">
-            <n-pagination ref="pagination" v-model:page="page" :page-count="totalPage" :on-update:page="onUpdatePage" :page-slot="5"/>
-          </n-space>
-        </div>
-      </n-card>
-    </div>
-  </template>
-  
-  <script lang="tsx" setup>
-  import { onMounted, reactive } from 'vue';
-  import { Search } from '@vicons/ionicons5';
-  import { NDataTable, NCard, NPagination, NSpace, NTooltip, NInput  } from 'naive-ui'
-  import { useAlertStore } from '@/store/alertPage/alertMessage';
-  
-  import { ref } from 'vue'
-  const alertStore = useAlertStore()
-  const { getSystemLog } = alertStore;
-  
-  const page = ref(1);
-  const totalPage = ref(1);
-  const pagination = ref(null);
-  
-  const data = ref([]);
-
-
-  const params = reactive({
-     start: 0,
-     end: 0,
-     page: 1,
-     size: 10,
-     filter: ""   
-    })
-
-const logSearchContent = ref("")
-  
-    
-  const columns = ref([
+          </n-input>
+        </n-space>
+      </div>
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        :bordered="false"
+        :scroll-x="1000"
+      />
+      <n-space justify="end">
+        <n-pagination
+          ref="pagination"
+          v-model:page="page"
+          :page-count="totalPage"
+          :on-update:page="onUpdatePage"
+          :page-slot="5"
+        />
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { Search } from '@vicons/ionicons5'
+import dayjs from 'dayjs'
+import {
+  NCard,
+  NDataTable,
+  NDatePicker,
+  NInput,
+  NPagination,
+  NSpace,
+  NTooltip,
+} from 'naive-ui'
+import { onMounted, reactive } from 'vue'
+import { ref } from 'vue'
+
+import { useAlertStore } from '@/store/alertPage/alertMessage'
+const alertStore = useAlertStore()
+const { getSystemLog } = alertStore
+
+const page = ref(1)
+const totalPage = ref(1)
+const pagination = ref(null)
+
+const data = ref([])
+
+const params = reactive({
+  start: 0,
+  end: 0,
+  page: 1,
+  size: 10,
+  filter: '',
+})
+
+const logSearchContent = ref('')
+
+const columns = ref([
   {
-      title: '时间',
-      width: 'auto',
-      key: 'time',
-     
-    },
-    {
-      title: '访问者IP',
-      width: 'auto',
-      key: 'ip',
-     
-    },
-    {
-      title: '访问者',
-      width: 'auto',
-      key: 'user',
-     
-    },
-    {
-      title: '模块',
-      width: 'auto',
-      key: 'module',
-     
-    },
-    {
-      title: '操作',
-      width: 'auto',
-      key: 'method',
-     
-      // render: (row) => {
-      //   return (
-      //     <span>{row.enable? '开启' : '关闭'}</span>
-      //   )
-      // }
-    },
-    {
-      title: '结果',
-      width: 'auto',
-      key: 'errorMsg',
-     
-    },
-    {
-      title: '内容',
-      width: 'auto',
-      key: 'content', 
-      render(row) {
+    title: '时间',
+    width: 'auto',
+    key: 'time',
+  },
+  {
+    title: '访问者IP',
+    width: 'auto',
+    key: 'ip',
+  },
+  {
+    title: '访问者',
+    width: 'auto',
+    key: 'user',
+  },
+  {
+    title: '模块',
+    width: 'auto',
+    key: 'module',
+  },
+  {
+    title: '操作',
+    width: 'auto',
+    key: 'method',
+
+    // render: (row) => {
+    //   return (
+    //     <span>{row.enable? '开启' : '关闭'}</span>
+    //   )
+    // }
+  },
+  {
+    title: '结果',
+    width: 'auto',
+    key: 'errorMsg',
+  },
+  {
+    title: '内容',
+    width: 'auto',
+    key: 'content',
+    render(row) {
       return (
-      <NTooltip trigger="hover">
-        {{
-          trigger: () => (
-            <span>{row.content.length < 15 ? row.content : row.content.substring(0, 15) + '...'}</span>
-          ),
-          default: () => (
-            <span>{row.content}</span>
-          )
-        }}
-      </NTooltip>
-    )
-  }
+        <NTooltip trigger='hover'>
+          {{
+            trigger: () => (
+              <span>
+                {row.content.length < 15
+                  ? row.content
+                  : row.content.substring(0, 15) + '...'}
+              </span>
+            ),
+            default: () => <span>{row.content}</span>,
+          }}
+        </NTooltip>
+      )
     },
-  ])
+  },
+])
 
-  const updateSystemLog = () => {
-    getSystemLog(params).then(res => {
-      data.value = res.data.data.info || [];
-      totalPage.value = Math.ceil(res.data.data.total/10)
-    })
-  }
+const updateSystemLog = () => {
+  getSystemLog(params).then(res => {
+    data.value = res.data.data.info || []
+    totalPage.value = Math.ceil(res.data.data.total / 10)
+  })
+}
 
-  const onUpdatePage= (currentPage: number) => { 
-    page.value = currentPage;
-    params.page = currentPage;
-    updateSystemLog();
-  }
+const onUpdatePage = (currentPage: number) => {
+  page.value = currentPage
+  params.page = currentPage
+  updateSystemLog()
+}
 
-  const searchLog = () => {
-    params.filter = logSearchContent.value;
-    params.page = 1;
-    page.value = 1;
-    updateSystemLog()
-  }
-      
-  onMounted(() => { 
+const searchLog = () => {
+  params.filter = logSearchContent.value
+  params.page = 1
+  page.value = 1
   updateSystemLog()
-  })
+}
+const onDateChange = (range: [number, number] | null) => {
+  const [start, end] = range || [0, 0]
+  params.start = start
+  params.end = end
+  updateSystemLog()
+}
 
-  </script>
-  
-  <style lang="scss" scoped>
-  .container {
-    flex-grow: 1;
-    background-color: rgb(245, 246, 250);
-  
-    .header-bar {
-      display: flex;
-      flex-direction: row-reverse;
-      margin-bottom: 32px;
+onMounted(() => {
+  updateSystemLog()
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  flex-grow: 1;
+  background-color: rgb(245, 246, 250);
+
+  .header-bar {
+    margin-bottom: 32px;
+    // flex-direction: row-reverse;
+
+    .header-select {
       // flex-direction: row-reverse;
-  
-      .header-select {
-      // flex-direction: row-reverse;   
-        display: flex;
-        justify-content: space-between;
-     flex:2
+      display: flex;
+      justify-content: space-between;
+      flex: 2;
     }
     .header-select :first-child {
       margin-right: 16px;
     }
     .header-blank {
       // flex-direction: row-reverse;
-  
+
       display: flex;
-      flex: 3
+      flex: 3;
     }
-  
-      .header-filters {
-        display: flex;
-        flex: 1;
-        column-gap: 20px;
-  
-        span {
-          margin-right: 10px;
-        }
+
+    .header-filters {
+      display: flex;
+      flex: 1;
+      column-gap: 20px;
+
+      span {
+        margin-right: 10px;
       }
-  
-      .filter {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-  
-        &>.n-select {
-          width: 125px;
-        }
+    }
+
+    .filter {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      & > .n-select {
+        width: 125px;
       }
     }
   }
-  </style>
-  
-  
\ No newline at end of file
+}
+</style>
diff --git a/src/views/clusterManagement/ServerDetail.vue b/src/views/clusterManagement/ServerDetail.vue
index 0968011..85e8a6a 100644
--- a/src/views/clusterManagement/ServerDetail.vue
+++ b/src/views/clusterManagement/ServerDetail.vue
@@ -10,7 +10,7 @@
       </div>
     </div>
     <n-divider />
-    <NCard title="服务器详情" :bordered="false">
+    <NCard title="服务器性能" :bordered="false">
       <template #header-extra>
         <TrendChartTimePicker @change="onChange" />
       </template>
@@ -19,6 +19,7 @@
           :range="state.range"
           title="cpu使用率"
           :data="state.cpuData"
+          y-axis-formatter="{value} %"
         />
         <DetailChart
           :range="state.range"
@@ -34,11 +35,13 @@
           :range="state.range"
           title="网络下行带宽"
           :data="state.networkTrafficData"
+          y-axis-formatter="{value} Mb/s"
         />
         <DetailChart
           :range="state.range"
           title="网络上行带宽"
           :data="state.networkTransmitData"
+          y-axis-formatter="{value} Mb/s"
         />
       </div>
       <n-divider />
@@ -71,17 +74,6 @@
       </div>
       <n-divider />
     </NCard>
-    <!-- <div class="graph">
-      <div class="diskBPS">
-        <DiskPerformanceBPSReadChart />
-        <DiskPerformanceBPSWriteChart />
-      </div>
-      <n-divider />
-      <div class="diskIOPS">
-        <DiskPerformanceIOPSReadChart />
-        <DiskPerformanceIOPSWriteChart />
-      </div>
-    </div> -->
   </div>
 </template>
 
@@ -89,18 +81,8 @@
 import { NCard, NDivider } from 'naive-ui'
 import { computed, reactive } from 'vue'
 
-import type { chartData, ChartSeries } from '/#/index'
+import type { ChartSeries } from '/#/index'
 import { getServerDetailApi } from '@/api/server'
-import CPUutilizationChart from '@/charts/cluster-management/CPUutilizationChart.vue'
-//磁盘性能的BPS相关图表
-import DiskPerformanceBPSReadChart from '@/charts/cluster-management/DiskPerformanceBPSReadChart.vue'
-import DiskPerformanceBPSWriteChart from '@/charts/cluster-management/DiskPerformanceBPSWriteChart.vue'
-//磁盘性能的IOPS相关的表格
-import DiskPerformanceIOPSReadChart from '@/charts/cluster-management/DiskPerformanceIOPSReadChart.vue'
-import DiskPerformanceIOPSWriteChart from '@/charts/cluster-management/DiskPerformanceIOPSWriteChart.vue'
-import MemoryUtilizationChart from '@/charts/cluster-management/MemoryUtilizationChart.vue'
-import NetworkTrafficReceiveChart from '@/charts/cluster-management/NetworkTrafficReceiveChart.vue'
-import NetworkTrafficTransmitChart from '@/charts/cluster-management/NetworkTrafficTransmitChart.vue'
 import TrendChartTimePicker, {
   type onChange as onTimeChange,
 } from '@/components/TrendChartTimePicker'
@@ -157,8 +139,8 @@ const getServerDetail = async () => {
 
   state.cpuData = gEchartsSeriesData({ cpu使用率: cpuUtilization })
   state.memoryData = gEchartsSeriesData({ 内存使用率: memUtilization })
-  state.networkTrafficData = gEchartsSeriesData(receive, true)
-  state.networkTransmitData = gEchartsSeriesData(transmit, true)
+  state.networkTrafficData = gEchartsSeriesData(receive, 'Mb')
+  state.networkTransmitData = gEchartsSeriesData(transmit, 'Mb')
 
   const [readBPS, readIOPS, writeBPS, writeIOPS] =
     gEchartsSeriesDataByPerformance(diskPerformance)
diff --git a/src/views/clusterManagement/ServerManagement.vue b/src/views/clusterManagement/ServerManagement.vue
index f91b811..8ed3bcc 100644
--- a/src/views/clusterManagement/ServerManagement.vue
+++ b/src/views/clusterManagement/ServerManagement.vue
@@ -1,59 +1,60 @@
 <template>
   <div class="container">
     <n-card>
-      <div class="header-bar">
-      </div>
+      <div class="header-bar"></div>
       <div class="data-form">
-        <n-data-table
-          :columns="columns"
-          :data="data"
-          :bordered="false"
-        />
+        <n-data-table :columns="columns" :data="data" :bordered="false" />
         <n-space justify="end">
-        <n-pagination v-model:page="page" :page-count="totalPage" :on-update-page="updataPage" :page-slot="5"/>
-      </n-space>
+          <n-pagination
+            v-model:page="page"
+            :page-count="totalPage"
+            :on-update-page="updataPage"
+            :page-slot="5"
+          />
+        </n-space>
       </div>
     </n-card>
   </div>
 </template>
 
 <script lang="tsx" setup>
-import { onMounted, reactive, h, watch } from 'vue'
 import { Search } from '@vicons/ionicons5'
-import { NDataTable, NButton, NSpace, NPagination, NCard } from 'naive-ui'
-import { useServerStore } from '@/store/clusterManagement/server'
-
+import { NButton, NCard, NDataTable, NPagination, NSpace } from 'naive-ui'
+import { h, onMounted, reactive, watch } from 'vue'
 import { ref } from 'vue'
+
 import router from '@/router'
+import { useServerStore } from '@/store/clusterManagement/server'
 const serverStore = useServerStore()
 const { getServerList } = serverStore
 
-const page = ref(1);
-const totalPage = ref(1);
-const params = reactive({ page: 1, size: 10})
+const page = ref(1)
+const totalPage = ref(1)
+const params = reactive({ page: 1, size: 10 })
 
 const columns = ref([
   {
     title: '主机名',
     key: 'hostName',
     width: 'auto',
-   
+
     render(row) {
       return h(
-        NButton, {
-        size: 'small',
-        type: 'info',
-        style: {
-          padding: '0 4px',
+        NButton,
+        {
+          size: 'small',
+          type: 'info',
+          style: {
+            padding: '0 4px',
+          },
+          quaternary: true,
+          onClick: () => {
+            // let hostNameArr = row.hostName.split('.');
+            // let hostName = hostNameArr[0] + hostNameArr[1];
+            router.push({ name: 'ServerDetail', query: { q: row.hostName } })
+          },
         },
-        quaternary: true,
-        onClick: () => {
-          // let hostNameArr = row.hostName.split('.');
-          // let hostName = hostNameArr[0] + hostNameArr[1];
-          router.push({path: '/server-detail', query: {q: row.hostName}})
-        }
-      },
-        { default: () => row.hostName }
+        { default: () => row.hostName },
       )
     },
   },
@@ -61,61 +62,54 @@ const columns = ref([
     title: 'IP地址',
     width: 'auto',
     key: 'ip',
-   
   },
   {
     title: 'cpu核数',
     width: 'auto',
-   
+
     render(row) {
-      return(<span>{row.cpuCores.totalNum}</span>)
-    }
+      return <span>{row.cpuCores.totalNum}</span>
+    },
   },
   {
     title: '内存(单位GiB)',
     width: 'auto',
     key: 'memory',
-   
   },
   {
     title: '硬盘数量',
     width: 'auto',
     key: 'diskNum',
-   
   },
   {
     title: '内核发行号',
-     width: 'auto',
+    width: 'auto',
     key: 'kernelRelease',
-   
   },
 ])
 
 const data = ref([])
 
 const updataPage = () => {
-  params.page = page.value; 
+  params.page = page.value
 }
 
 onMounted(() => {
   const params = { size: 10, page: 1 }
   getServerList(params).then(res => {
-    data.value = res.data.data.info;
-  let countPage = res.data.data.total/10;
-  let isInteger = Number.isInteger(countPage);
-    totalPage.value = isInteger? countPage : parseInt(countPage) + 1;
+    data.value = res.data.data.info
+    let countPage = res.data.data.total / 10
+    let isInteger = Number.isInteger(countPage)
+    totalPage.value = isInteger ? countPage : parseInt(countPage) + 1
   })
 })
 
-
-
-watch(params, (value) => {
+watch(params, value => {
   getServerList(value).then(res => {
-    data.value = res.data.data.info;
-    totalPage.value = res.data.data.total;
+    data.value = res.data.data.info
+    totalPage.value = res.data.data.total
   })
 })
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/storageBlock/SnapshotManagement.vue b/src/views/storageBlock/SnapshotManagement.vue
index 434089b..24dc404 100644
--- a/src/views/storageBlock/SnapshotManagement.vue
+++ b/src/views/storageBlock/SnapshotManagement.vue
@@ -3,9 +3,10 @@
     <div class="content-container">
       <div class="left">
         <div class="left-buttons">
-          <n-button size="small" @click="batchHandle"
-            v-if="!batchHandleStatus">批量操作</n-button>
-          <n-button-group size="small" v-if="batchHandleStatus">
+          <n-button v-if="!batchHandleStatus" size="small" @click="batchHandle"
+            >批量操作</n-button
+          >
+          <n-button-group v-if="batchHandleStatus" size="small">
             <n-button type="error" @click="batchDeleteSnapshot">
               批量删除
             </n-button>
@@ -14,13 +15,31 @@
             </n-button>
           </n-button-group>
         </div>
-        <n-select class="left-select" size="small" :options="statusOptions" placeholder="请选择状态..."
-          @update-value="handleChangeStatus" />
+        <n-select
+          class="left-select"
+          size="small"
+          :options="statusOptions"
+          placeholder="请选择状态..."
+          @update-value="handleChangeStatus"
+        />
       </div>
       <div class="middle"></div>
       <div class="right">
-        <n-select v-model:value="searchKey" clearable size="small" class="right-select" :options="options" placeholder="请选择关键词 ..." />
-        <n-input v-model:value="searchContent" size="small" clearable @keyup.enter="searchSnapshot" placeholder="请输入...">
+        <n-select
+          v-model:value="searchKey"
+          clearable
+          size="small"
+          class="right-select"
+          :options="options"
+          placeholder="请选择关键词 ..."
+        />
+        <n-input
+          v-model:value="searchContent"
+          size="small"
+          clearable
+          placeholder="请输入..."
+          @keyup.enter="searchSnapshot"
+        >
           <template #suffix>
             <n-icon :component="Search" />
           </template>
@@ -28,97 +47,131 @@
       </div>
     </div>
     <div class="data-form">
-      <n-data-table :columns="columns" :data="data" :bordered="false" :row-key="rowKey"  @update:checked-row-keys="handleCheck"/>
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        :bordered="false"
+        :row-key="rowKey"
+        @update:checked-row-keys="handleCheck"
+      />
       <n-space justify="end">
-        <n-pagination v-model:page="page" :page-count="totalPage" :on-update-page="updataPage" :page-slot="5"/>
+        <n-pagination
+          v-model:page="page"
+          :page-count="totalPage"
+          :on-update-page="updataPage"
+          :page-slot="5"
+        />
       </n-space>
     </div>
   </n-card>
-  <ConfirmDeleteModal ref="confirmDeleteModalRef" :rowInfo="rowInfo" @confirm-delete="deleteRow" />
-
-  <n-modal v-model:show="visible" preset="dialog" title="删除" content="确认吗?"
-        positive-text="确认" negative-text="取消" @positive-click="" @negative-click="() => {visible = false}">
-        <div>你确定要删除这些快照吗？</div>
-    </n-modal>
+  <ConfirmDeleteModal
+    ref="confirmDeleteModalRef"
+    :row-info="rowInfo"
+    @confirm-delete="deleteRow"
+  />
+
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    title="删除"
+    content="确认吗?"
+    positive-text="确认"
+    negative-text="取消"
+    @negative-click="
+      () => {
+        visible = false
+      }
+    "
+  >
+    <div>你确定要删除这些快照吗？</div>
+  </n-modal>
 </template>
-  
+
 <script lang="tsx" setup>
 import { Search } from '@vicons/ionicons5'
-import { NDataTable, NSpace, NPagination, NSelect, NInput, NIcon, NCard, NButton, useMessage, NButtonGroup } from 'naive-ui'
-import { useBlockStore } from "@/store/blockStorageManagement/block"
-import router from "@/router"
+import {
+  NButton,
+  NButtonGroup,
+  NCard,
+  NDataTable,
+  NIcon,
+  NInput,
+  NPagination,
+  NSelect,
+  NSpace,
+  useMessage,
+} from 'naive-ui'
+import { h, onMounted, reactive, ref, watch } from 'vue'
+
+import router from '@/router'
+import { useBlockStore } from '@/store/blockStorageManagement/block'
+
 import ConfirmDeleteModal from './modals/ConfirmDeleteModal.vue'
-import { ref, h, watch, reactive, onMounted } from 'vue'
 
-const page = ref(1);
-const totalPage = ref(1);
-const confirmDeleteModalRef = ref(null);
+const page = ref(1)
+const totalPage = ref(1)
+const confirmDeleteModalRef = ref(null)
 const rowInfo = ref(null)
 const message = useMessage()
 const batchHandleStatus = ref(false)
 const checkedUuids = ref([])
 const visible = ref(false)
 
+const rowKey = row => row.uuid
 
-
-const rowKey = (row) => row.uuid
-
-const handleCheck = (rowKeys) => { 
-  checkedUuids.value = rowKeys;
+const handleCheck = rowKeys => {
+  checkedUuids.value = rowKeys
 }
 
 const batchDeleteSnapshot = () => {
-  const params = {uuids: checkedUuids.value}
+  if (!checkedUuids.value.length) return message.warning('请选择快照')
+
+  const params = { uuids: checkedUuids.value }
 
   deleteSnapshot(params).then(res => {
     if (res.status === 200) {
       message.success('删除快照成功')
-      batchHandleStatus.value = false;
-      snapshotManagement(
-      { page: 1, size: 10 }
-    ).then(res => {
-      data.value = res.data.data.info;
-      totalPage.value = Math.ceil(res.data.data.total / 10);
-    })
-    }
-    else {
+      batchHandleStatus.value = false
+      snapshotManagement({ page: 1, size: 10 }).then(res => {
+        data.value = res.data.data.info
+        totalPage.value = Math.ceil(res.data.data.total / 10)
+      })
+    } else {
       message.error('删除快照失败')
     }
+    cancelBatchHandle()
     initialData()
-  }) 
+  })
 }
 
 const params = reactive({ page: 1, size: 10 })
 
 const updataPage = () => {
-  params.page = page.value;
+  params.page = page.value
 }
 
 //筛选状态
-const handleChangeStatus = (val) => {
-  if (val === "all") {
-    snapshotManagement(
-      { page: 1, size: 10 }
-    ).then(res => {
-      data.value = res.data.data.info;
-      totalPage.value = Math.ceil(res.data.data.total / 10);
+const handleChangeStatus = val => {
+  if (val === 'all') {
+    snapshotManagement({ page: 1, size: 10 }).then(res => {
+      data.value = res.data.data.info
+      totalPage.value = Math.ceil(res.data.data.total / 10)
     })
-  }
-  else {
-    params.status = val;
-    params.page = 1;
+  } else {
+    params.status = val
+    params.page = 1
     page.value = 1
   }
 }
 
 const statusOptions = [
-  { label: '所有', value: "all" },
+  { label: '所有', value: 'all' },
   { label: '已完成', value: 'done' },
   { label: '进行中', value: 'inProcess' },
   { label: '删除中', value: 'deleting' },
   { label: '失败删除中', value: 'errorDeleting' },
   { label: '取消中', value: 'canceling' },
-  { label: '失败', value: 'error' }
+  { label: '失败', value: 'error' },
 ]
 
 const statusMap = {
@@ -127,26 +180,26 @@ const statusMap = {
   deleting: '删除中',
   errorDeleting: '失败删除中',
   canceling: '取消中',
-  error: '失败'
+  error: '失败',
 }
 
 const options = [
   {
     label: '快照uuid',
-    value: 'uuid'
+    value: 'uuid',
   },
   {
     label: '快照租户',
-    value: 'user'
+    value: 'user',
   },
   {
     label: '快照文件名',
-    value: 'fileName'
+    value: 'fileName',
   },
 ]
 
-const searchKey = ref(null);
-const searchContent = ref("");
+const searchKey = ref(null)
+const searchContent = ref('')
 const columns = ref([
   {
     title: 'UUID',
@@ -166,11 +219,13 @@ const columns = ref([
     title: '卷名称',
     key: 'file',
     render(row) {
-      const route = { path: row.file }
-      return (
-        <routerLink to={route} >{row.file}</routerLink>
-      )
-    }
+      console.log(row.file.split('/'))
+      const route = {
+        name: 'VolumeDetail',
+        params: { path: row.file.split('/').filter((i: string) => i) },
+      }
+      return <routerLink to={route}>{row.file}</routerLink>
+    },
   },
   {
     title: '版本号',
@@ -189,17 +244,11 @@ const columns = ref([
     width: 90,
     render(row) {
       if (row.status === 'inProcess') {
-        return (
-          <span>{row.Progress}</span>
-        )
-      }
-      else {
-        return (
-          <span>{statusMap[row.status]}</span>
-        )
+        return <span>{row.Progress}</span>
+      } else {
+        return <span>{statusMap[row.status]}</span>
       }
-
-    }
+    },
   },
   {
     title: '操作',
@@ -207,142 +256,147 @@ const columns = ref([
     render(row) {
       return (
         <div>
-          <n-button size="tiny" type="normal" disabled={row.status !== "inProcess"} onClick={onCancelSnapshot(row)}>取消快照</n-button>
-          <n-button size="tiny" type="error" disabled={row.status !== 'done'} onClick={showDeleteModal(row)}>删除</n-button>
+          <n-button
+            size='tiny'
+            type='normal'
+            disabled={row.status !== 'inProcess'}
+            onClick={onCancelSnapshot(row)}
+          >
+            取消快照
+          </n-button>
+          <n-button
+            size='tiny'
+            type='error'
+            disabled={row.status !== 'done'}
+            onClick={showDeleteModal(row)}
+          >
+            删除
+          </n-button>
         </div>
       )
-    }
-  }
+    },
+  },
 ])
 
-const data = ref([]);
-let searchParams = {};
+const data = ref([])
+let searchParams = {}
 
 const batchHandle = () => {
-  batchHandleStatus.value = true;
+  batchHandleStatus.value = true
   columns.value.unshift({
-    type: 'selection'
+    type: 'selection',
   })
 }
 
 const cancelBatchHandle = () => {
   handleCheck([])
-  columns.value.shift();
-  batchHandleStatus.value = false;
+  columns.value.shift()
+  batchHandleStatus.value = false
 }
 
 const searchSnapshot = () => {
-  if (searchContent.value === "") {
+  if (searchContent.value === '') {
     initialData()
-  }
-  else {
-    if (searchKey.value === "uuid") {
+  } else {
+    if (searchKey.value === 'uuid') {
       searchParams = {
         size: 10,
         page: 1,
-        uuid: searchContent.value
+        uuid: searchContent.value,
       }
-    } else if (searchKey.value === "user") {
+    } else if (searchKey.value === 'user') {
       searchParams = {
         size: 10,
         page: 1,
-        user: searchContent.value
+        user: searchContent.value,
       }
     } else {
       searchParams = {
         size: 10,
         page: 1,
-        fileName: searchContent.value
+        fileName: searchContent.value,
       }
     }
 
-    snapshotManagement(
-      searchParams
-    ).then(res => {
+    snapshotManagement(searchParams).then(res => {
       data.value = res.data.data.info
     })
   }
 }
 
-const blockStore = useBlockStore();
-const { snapshotManagement, deleteSnapshot, cancelSnapshot } = blockStore;
+const blockStore = useBlockStore()
+const { snapshotManagement, deleteSnapshot, cancelSnapshot } = blockStore
 
 const initialData = () => {
   const params = {
     size: 10,
-    page: 1
+    page: 1,
   }
-  snapshotManagement(
-    params
-  ).then(res => {
-    data.value = res.data.data.info;
-    totalPage.value = Math.ceil(res.data.data.total / 10);
+  snapshotManagement(params).then(res => {
+    data.value = res.data.data.info
+    totalPage.value = Math.ceil(res.data.data.total / 10)
   })
 }
 
 const updatePage = () => {
-  snapshotManagement(
-    params
-  ).then(res => {
-    data.value = res.data.data.info;
-    totalPage.value = Math.ceil(res.data.data.total / 10);
+  snapshotManagement(params).then(res => {
+    data.value = res.data.data.info
+    totalPage.value = Math.ceil(res.data.data.total / 10)
   })
 }
 
-const onCancelSnapshot = (row) => () => {
-  const snapshots = [{
-    uuid: row.uuid,
-    user: row.user,
-    volumeName: row.file
-  }]
+const onCancelSnapshot = row => () => {
+  const snapshots = [
+    {
+      uuid: row.uuid,
+      user: row.user,
+      volumeName: row.file,
+    },
+  ]
   cancelSnapshot({ snapshots }).then(res => {
     if (res.status === 200) {
-      message.success('取消快照成功');
-      updatePage();
+      message.success('取消快照成功')
+      updatePage()
     } else {
-      message.info('快照已打完，无法取消');
-      updatePage();
-
+      message.info('快照已打完，无法取消')
+      updatePage()
     }
   })
 }
 
 const showDeleteModal = (row: object) => () => {
   // rowInfo.value = row;
-  rowInfo.value = { ...row, isSnapshot: true };
+  rowInfo.value = { ...row, isSnapshot: true }
   // rowInfo.value.isSnapshot = true;
-  confirmDeleteModalRef.value.showModal();
+  confirmDeleteModalRef.value.showModal()
 }
 
 const deleteRow = (row: object) => {
-  const uuids = [row.uuid];
+  const uuids = [row.uuid]
   const params = { uuids }
 
   deleteSnapshot(params).then(res => {
     if (res.status === 200) {
       message.success('删除快照成功')
-    }
-    else {
+    } else {
       message.error('删除快照失败')
     }
     initialData()
-  }) 
+  })
 }
 
-onMounted(
-  () => {
-    initialData();
-  }
-)
+onMounted(() => {
+  initialData()
+})
 
-watch(params, (value) => {
+watch(params, value => {
   snapshotManagement(value).then(res => {
-    data.value = res.data.data.info;
+    data.value = res.data.data.info
     totalPage.value = Math.ceil(res.data.data.total / params.size)
   })
 })
 </script>
-  
+
 <style lang="scss" scoped>
 .content-container {
   display: flex;
@@ -373,10 +427,9 @@ watch(params, (value) => {
     align-items: center;
   }
 
-  .right>*:first-child {
+  .right > *:first-child {
     margin-right: 7px;
   }
-
 }
 
 // .left {
@@ -423,4 +476,3 @@ watch(params, (value) => {
 //   }
 // }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/storageBlock/VolumeManagement.vue b/src/views/storageBlock/VolumeManagement.vue
index 3ae6917..ddd6d1f 100644
--- a/src/views/storageBlock/VolumeManagement.vue
+++ b/src/views/storageBlock/VolumeManagement.vue
@@ -3,26 +3,40 @@
     <n-card>
       <div class="header-bar">
         <div v-if="!handleStatus" class="batch-button">
-          <n-button color="#2080f0" @click="batchHandle" size="small">批量操作</n-button>
+          <n-button color="#2080f0" size="small" @click="batchHandle"
+            >批量操作</n-button
+          >
         </div>
         <div v-else class="button-group">
-          <n-button-group size="small" v-if="handleStatus">
-            <n-button type="error" @click="showBatchDeleteVolumeModal" size="small">
+          <n-button-group v-if="handleStatus" size="small">
+            <n-button
+              type="error"
+              size="small"
+              @click="showBatchDeleteVolumeModal"
+            >
               批量删除
             </n-button>
-            <n-button type="default" @click="cancelBatch" size="small">
+            <n-button type="default" size="small" @click="cancelBatch">
               取消
             </n-button>
           </n-button-group>
         </div>
-        <div v-if="!router.currentRoute.value.params.path.includes('RecycleBin')" class="trash-bin">
-          <n-button strong color="#255DBE" @click="goToTrashBin" size="small">
+        <div
+          v-if="!router.currentRoute.value.params?.path.includes('RecycleBin')"
+          class="trash-bin"
+        >
+          <n-button strong color="#255DBE" size="small" @click="goToTrashBin">
             <template #icon>
               <n-icon size="17">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  viewBox="0 0 448 512"
+                >
                   <path
                     d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
-                    fill="currentColor"></path>
+                    fill="currentColor"
+                  ></path>
                 </svg>
               </n-icon>
             </template>
@@ -31,211 +45,293 @@
         </div>
         <div class="right-group">
           <div class="search-bar">
-            <n-input placeholder="请输入卷名..." size="small" clearable v-model:value="pathToSearch"
-              @keyup.enter="searchByPath">
+            <n-input
+              v-model:value="pathToSearch"
+              placeholder="请输入卷名..."
+              size="small"
+              clearable
+              @keyup.enter="searchByPath"
+            >
               <template #suffix>
                 <n-icon :component="Search" />
               </template>
             </n-input>
           </div>
           <div class="create-volume-namespace">
-            <n-button v-if="!router.currentRoute.value.params.path.includes('RecycleBin')" size="small"
-              @click="showCreateVolumeNamespace">+卷命名空间</n-button>
+            <n-button
+              v-if="
+                !router.currentRoute.value.params?.path.includes('RecycleBin')
+              "
+              size="small"
+              @click="showCreateVolumeNamespace"
+              >+卷命名空间</n-button
+            >
           </div>
-          <div class="create-volume" v-if="!router.currentRoute.value.params.path.includes('RecycleBin')">
-            <n-button color="#21d69d" size="small" @click="showCreateVolume({ volumeType: 1 })">+创建卷</n-button>
+          <div
+            v-if="
+              !router.currentRoute.value.params?.path.includes('RecycleBin')
+            "
+            class="create-volume"
+          >
+            <n-button
+              color="#21d69d"
+              size="small"
+              @click="showCreateVolume({ volumeType: 1 })"
+              >+创建卷</n-button
+            >
           </div>
         </div>
       </div>
       <div class="breadcrumb">
         <n-breadcrumb>
-          <n-breadcrumb-item v-for="itm, index in pathArr" :clickable="index === pathArr.length - 1 ? true : false"
-            @click="crumbClick(itm, index)">
+          <n-breadcrumb-item
+            v-for="(itm, index) in pathArr"
+            :key="index"
+            :clickable="index === pathArr.length - 1 ? true : false"
+            @click="crumbClick(itm, index)"
+          >
             {{ itm }}
           </n-breadcrumb-item>
         </n-breadcrumb>
       </div>
       <div class="data-form">
-        <n-data-table :columns="columns" :data="volumeListData" :checked-row-keys="checkedRowKeys" :bordered="false"
-          :row-key="rowKey" @update:checked-row-keys="handleCheck" @update:sorter="handleSorterChange" />
+        <n-data-table
+          :columns="columns"
+          :data="volumeListData"
+          :checked-row-keys="checkedRowKeys"
+          :bordered="false"
+          :row-key="rowKey"
+          @update:checked-row-keys="handleCheck"
+          @update:sorter="handleSorterChange"
+        />
         <n-space justify="end">
-          <n-pagination v-model:page="page" :page-count="totalPage" :on-update-page="updataPage" :page-slot="5"/>
+          <n-pagination
+            v-model:page="page"
+            :page-count="totalPage"
+            :on-update-page="updataPage"
+            :page-slot="5"
+          />
         </n-space>
       </div>
     </n-card>
   </div>
-  <CreateVolumeModal ref="createVolumeModalRef" @createVolume="onCreateVolumeNamespaceOrVolume" />
-  <CreateVolumeNamespaceModal ref="createVolumeNamespaceModalRef" @createNamespace="onCreateVolumeNamespaceOrVolume" />
+  <CreateVolumeModal
+    ref="createVolumeModalRef"
+    @createVolume="onCreateVolumeNamespaceOrVolume"
+  />
+  <CreateVolumeNamespaceModal
+    ref="createVolumeNamespaceModalRef"
+    @createNamespace="onCreateVolumeNamespaceOrVolume"
+  />
   <VolumeThrottleModal ref="volumeThrottleModalRef" />
   <VolumeExtedModal ref="volumeExtedModalRef" />
-  <CreateSnapshotModal ref="createSnapshotModalRef" :rowInfo="rowInfo" />
-  <ConfirmDeleteModal ref="confirmDeleteModalRef" :rowInfo="rowInfo" @confirm-delete="deleteRow" />
+  <CreateSnapshotModal ref="createSnapshotModalRef" :row-info="rowInfo" />
+  <ConfirmDeleteModal
+    ref="confirmDeleteModalRef"
+    :row-info="rowInfo"
+    @confirm-delete="deleteRow"
+  />
   <!-- <LazyCloneVolumeModal ref="lazyCloneVolumeModalRef" :rowInfo="rowInfo" /> -->
-  <BatchDeleteVolumeModal ref="batchDeleteVolumeModalRef" @confirm-batch-delete="batchDeleteVolume" />
+  <BatchDeleteVolumeModal
+    ref="batchDeleteVolumeModalRef"
+    @confirm-batch-delete="batchDeleteVolume"
+  />
 </template>
-  
+
 <script lang="tsx" setup>
-import { toRefs, ref, reactive, watch, h } from 'vue'
-import { NDataTable, NIcon, NButton, NSpace, NPagination, NCard, NBreadcrumb, NBreadcrumbItem, NInput, useMessage, NModal } from 'naive-ui'
-import type { DataTableColumns, DataTableColumn, DataTableSortState } from 'naive-ui'
 import { Search } from '@vicons/ionicons5'
-import { useBlockStore } from '@/store/blockStorageManagement/block'
-import CreateVolumeModal from "./modals/VolumeCreateModal.vue";
-import VolumeThrottleModal from "./modals/VolumeThrottleModal.vue";
-import VolumeExtedModal from "./modals/VolumeExtendModal.vue";
-import CreateVolumeNamespaceModal from "./modals/VolumeNamespaceModal.vue";
-import CreateSnapshotModal from "./modals/CreateSnapshotModal.vue";
-import ConfirmDeleteModal from './modals/ConfirmDeleteModal.vue';
-import BatchDeleteVolumeModal from "./modals/BatchDeleteVolumeModal.vue";
-
+import type {
+  DataTableColumn,
+  DataTableColumns,
+  DataTableSortState,
+} from 'naive-ui'
+import {
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NButton,
+  NCard,
+  NDataTable,
+  NIcon,
+  NInput,
+  NModal,
+  NPagination,
+  NSpace,
+  useMessage,
+} from 'naive-ui'
+import { h, reactive, ref, toRefs, watch } from 'vue'
 // import router from "@/router"
 import { useRouter } from 'vue-router'
 
 import type { getVolumeApiDataItem } from '@/api/block'
-const router = useRouter();
+import { useBlockStore } from '@/store/blockStorageManagement/block'
+
+import BatchDeleteVolumeModal from './modals/BatchDeleteVolumeModal.vue'
+import ConfirmDeleteModal from './modals/ConfirmDeleteModal.vue'
+import CreateSnapshotModal from './modals/CreateSnapshotModal.vue'
+import CreateVolumeModal from './modals/VolumeCreateModal.vue'
+import VolumeExtedModal from './modals/VolumeExtendModal.vue'
+import CreateVolumeNamespaceModal from './modals/VolumeNamespaceModal.vue'
+import VolumeThrottleModal from './modals/VolumeThrottleModal.vue'
+const router = useRouter()
 const blockStore = useBlockStore()
-const { getVolumeList, getVolumeDetail, deleteVolume, recoverVolume, lazyCloneVolume, createSnapshot, state } = blockStore;
-let { volumeList } = toRefs(blockStore.state);
-let routePath = ref(router.currentRoute.value.params.path);
-let currentPath = ref(routePath.value === '' ? '/' : '/' + routePath.value.join('/') + '/');
-
-const page = ref(1);
-const volumeListData = ref([]);
-const totalPage = ref(1);
-const params = reactive({ page: 1, size: 10, path: '' });
-const pathArr = ref([]);
+const {
+  getVolumeList,
+  getVolumeDetail,
+  deleteVolume,
+  recoverVolume,
+  lazyCloneVolume,
+  createSnapshot,
+  state,
+} = blockStore
+let { volumeList } = toRefs(blockStore.state)
+let routePath = ref(router.currentRoute.value.params.path)
+console.log('routePath----------------------', router.currentRoute.value)
+let currentPath = ref(
+  !routePath.value ? '/' : '/' + routePath.value.join('/') + '/',
+)
+console.log('currentPath', currentPath)
+
+const page = ref(1)
+const volumeListData = ref([])
+const totalPage = ref(1)
+const params = reactive({ page: 1, size: 10, path: '' })
+const pathArr = ref([])
 const message = useMessage()
-const pageLoading = ref(false);
+const pageLoading = ref(false)
 const rowInfo = ref(null)
 
-const checkedFileNames = ref({});
+const checkedFileNames = ref({})
 
-const checkedRowKeys = ref([]);
+const checkedRowKeys = ref([])
 
-const rowKey = (row) => {
+const rowKey = row => {
   return row.fileName + ':' + row.fileType
 }
 
-const handleCheck = (rowKeys) => {
+const handleCheck = rowKeys => {
   if (rowKeys.length === 0) {
-    checkedRowKeys.value = [];
-  }
-  else {
+    checkedRowKeys.value = []
+  } else {
     rowKeys.forEach(item => {
-      checkedRowKeys.value = rowKeys;
-      const nameTypePair = item.split(':');
-      const nameFullPath = currentPath.value + nameTypePair[0];
-      const fileType = nameTypePair[1];
-      checkedFileNames.value[nameFullPath] = fileType;
+      checkedRowKeys.value = rowKeys
+      const nameTypePair = item.split(':')
+      const nameFullPath = currentPath.value + nameTypePair[0]
+      const fileType = nameTypePair[1]
+      checkedFileNames.value[nameFullPath] = fileType
     })
   }
 }
 
 const cancelBatch = () => {
-  checkedRowKeys.value = [];
-  columns.shift();
-  handleStatus.value = false;
+  checkedRowKeys.value = []
+  columns.shift()
+  handleStatus.value = false
 }
 
 const getPathArr = () => {
-  let arr = params.path.split('/');
-  if (arr.length === 1) { arr = ['home'] } else { arr.shift(); arr.unshift('home'); pathArr.value = [...arr] }
-}
-const lengthColumn: DataTableColumn<getVolumeApiDataItem> = reactive(
-  {
-    title: '已分配/卷长度(GiB)',
-    key: 'volume-length',
-    width: 'auto',
-    sorter: true,
-    render(row) {
-      return h('span', `${row.alloc}/${row.length}`)
-    }
+  let arr = params.path.split('/')
+  if (arr.length === 1) {
+    arr = ['home']
+  } else {
+    arr.shift()
+    arr.unshift('home')
+    pathArr.value = [...arr]
   }
-)
-
-const createVolumeModalRef = ref(null);
-const createVolumeNamespaceModalRef = ref(null);
-const volumeThrottleModalRef = ref(null);
-const volumeExtedModalRef = ref(null);
-const confirmDeleteModalRef = ref(null);
-const createSnapshotModalRef = ref(null);
-const batchDeleteVolumeModalRef = ref(null);
+}
+const lengthColumn: DataTableColumn<getVolumeApiDataItem> = reactive({
+  title: '已分配/卷长度(GiB)',
+  key: 'volume-length',
+  width: 'auto',
+  sorter: true,
+  render(row) {
+    return h('span', `${row.alloc}/${row.length}`)
+  },
+})
 
+const createVolumeModalRef = ref(null)
+const createVolumeNamespaceModalRef = ref(null)
+const volumeThrottleModalRef = ref(null)
+const volumeExtedModalRef = ref(null)
+const confirmDeleteModalRef = ref(null)
+const createSnapshotModalRef = ref(null)
+const batchDeleteVolumeModalRef = ref(null)
 
 //表单的操作
 const showCreateVolume = (data: object) => {
-  createVolumeModalRef.value.setVisibleAndDisabled(true, false);
-  createVolumeModalRef.value.setFormData(data);
-  createVolumeModalRef.value.showModal();
+  createVolumeModalRef.value.setVisibleAndDisabled(true, false)
+  createVolumeModalRef.value.setFormData(data)
+  createVolumeModalRef.value.showModal()
 }
 const showCreateVolumeNamespace = () => {
-  createVolumeNamespaceModalRef.value.showModal();
+  createVolumeNamespaceModalRef.value.showModal()
 }
 const showVolumeThrottleModal = (row: object) => () => {
-  const volumeToThrottle = currentPath.value + row.fileName;
+  const volumeToThrottle = currentPath.value + row.fileName
   volumeThrottleModalRef.value.setVolumeToThrottle(volumeToThrottle)
-  volumeThrottleModalRef.value.showModal();
+  volumeThrottleModalRef.value.showModal()
 }
-const showVolumeExtedModal = (row) => () => {
-  const volumeToExtend = currentPath.value + row.fileName;
+const showVolumeExtedModal = row => () => {
+  const volumeToExtend = currentPath.value + row.fileName
   volumeExtedModalRef.value.setVolumeToExtend(volumeToExtend, row.length)
-  volumeExtedModalRef.value.showModal();
+  volumeExtedModalRef.value.showModal()
 }
 
 const showDeleteModal = (row: object, inRecycleBin: boolean) => () => {
   if (inRecycleBin) {
     row.inRecycleBin = true
   } else {
-    row.inRecycleBin = false;
+    row.inRecycleBin = false
   }
-  rowInfo.value = row;
-  confirmDeleteModalRef.value.showModal();
+  rowInfo.value = row
+  confirmDeleteModalRef.value.showModal()
 }
 
 const showCreateSnapshot = (row: Object) => () => {
-  rowInfo.value = row;
+  rowInfo.value = row
   createSnapshotModalRef.value.showModal()
 }
 //展示lazy克隆的modal
-const onLazyCloneVolume = (row) => () => {
+const onLazyCloneVolume = row => () => {
   const params = {
     volumeName: currentPath.value + row.fileName,
-    user: row.owner
+    user: row.owner,
   }
   lazyCloneVolume(params).then(res => {
     if (res.status === 200) {
-      message.success('安装数据成功！');
-      updateList();
+      message.success('安装数据成功！')
+      updateList()
     } else {
-      message.error('安装数据失败');
+      message.error('安装数据失败')
     }
   })
 }
 
 const updateList = () => {
-  getVolumeList(params).then(res => { 
-        volumeListData.value = volumeList.value;
-        totalPage.value = Math.ceil(res.data.data.total / 10);
-      });
+  getVolumeList(params).then(res => {
+    volumeListData.value = volumeList.value
+    totalPage.value = Math.ceil(res.data.data.total / 10)
+  })
 }
 
 //删除卷
 const deleteRow = (row: object) => {
-  const fileName = currentPath.value + (row.fileName);
-  const fileType = row.fileType;
-  deleteVolume({ volumeNames: { [fileName]: fileType }, force: row.inRecycleBin }).then(res => {
+  const fileName = currentPath.value + row.fileName
+  const fileType = row.fileType
+  deleteVolume({
+    volumeNames: { [fileName]: fileType },
+    force: row.inRecycleBin,
+  }).then(res => {
     if (res.status === 200) {
       if (window.location.pathname === '/recycleBin') {
-        message.success('彻底删除卷成功');
+        message.success('彻底删除卷成功')
       } else {
-        message.success('删除卷成功');
+        message.success('删除卷成功')
       }
       getVolumeList(params).then(res => {
-        volumeListData.value = volumeList.value;
-        totalPage.value = Math.ceil(res.data.data.total / 10);
+        volumeListData.value = volumeList.value
+        totalPage.value = Math.ceil(res.data.data.total / 10)
       })
-    }
-    else {
+    } else {
       message.error('删除卷失败')
     }
     // getVolumeList({ page: 1, size: 10, path: '/', sortKey: 'id', sortDirection: 1 }).then(res => {
@@ -247,27 +343,29 @@ const deleteRow = (row: object) => {
 }
 //批量删除卷
 const batchDeleteVolume = () => {
-  deleteVolume({ volumeNames: checkedFileNames.value, force: window.location.pathname.includes('RecycleBin') ? true : false }).then(res => {
+  deleteVolume({
+    volumeNames: checkedFileNames.value,
+    force: window.location.pathname.includes('RecycleBin') ? true : false,
+  }).then(res => {
     if (res.status === 200) {
       if (window.location.pathname === '/recycleBin') {
-        message.success('彻底删除卷成功');
+        message.success('彻底删除卷成功')
       } else {
-        message.success('删除卷成功');
+        message.success('删除卷成功')
       }
       getVolumeList(params).then(res => {
-        volumeListData.value = volumeList.value;
-        totalPage.value = Math.ceil(res.data.data.total / 10);
-        checkedFileNames.value = {};
-        checkedRowKeys.value = [];
+        volumeListData.value = volumeList.value
+        totalPage.value = Math.ceil(res.data.data.total / 10)
+        checkedFileNames.value = {}
+        checkedRowKeys.value = []
       })
-    }
-    else {
+    } else {
       message.error('删除卷失败')
     }
   })
 }
 const showBatchDeleteVolumeModal = () => {
-  batchDeleteVolumeModalRef.value.showModal();
+  batchDeleteVolumeModalRef.value.showModal()
 }
 
 //恢复卷
@@ -275,11 +373,11 @@ const recoverVolumeFromBin = (row: object) => () => {
   const recoverParams = { [row.originalFullPathName]: row.id }
   recoverVolume({ volumeIds: recoverParams }).then(res => {
     if (res.status === 200) {
-      message.success('恢复成功');
+      message.success('恢复成功')
       getVolumeList(params).then(res => {
-        volumeListData.value = volumeList.value;
+        volumeListData.value = volumeList.value
         totalPage.value = Math.ceil(res.data.data.total / 10)
-        page.value = 1;
+        page.value = 1
       })
     } else {
       message.error('恢复失败')
@@ -289,37 +387,38 @@ const recoverVolumeFromBin = (row: object) => () => {
 
 const onCreateVolumeNamespaceOrVolume = () => {
   getVolumeList(params).then(res => {
-    volumeListData.value = volumeList.value;
+    volumeListData.value = volumeList.value
     totalPage.value = Math.ceil(res.data.data.total / 10)
-    page.value = 1;
+    page.value = 1
   })
 }
 
-const cloneVolume = (row) => () => {
-  createVolumeModalRef.value.setVisibleAndDisabled(false, true);
-  const routePath = ref(router.currentRoute.value.params.path);
-  const currentPath = ref(routePath.value === '' ? '/' : '/' + routePath.value.join('/') + '/');
+const cloneVolume = row => () => {
+  createVolumeModalRef.value.setVisibleAndDisabled(false, true)
+  const routePath = ref(router.currentRoute.value.params.path)
+  const currentPath = ref(
+    !routePath.value ? '/' : '/' + routePath.value.join('/') + '/',
+  )
   const src = currentPath.value + row.fileName
   const data = {
     volumeType: 2,
-    src: src
+    src: src,
   }
-  createVolumeModalRef.value.setFormData(data);
-  createVolumeModalRef.value.showModal();
+  createVolumeModalRef.value.setFormData(data)
+  createVolumeModalRef.value.showModal()
 }
 
-
 const statusMap = {
   kFileCreated: '正常',
   kFileDeleting: '删除中',
   kFileCloning: '克隆中',
-  kFileCloneMetaInstalled: "克隆数据待安装",
-  kFileCloned: "克隆完成",
-  kFileBeingCloned: "克隆中"
+  kFileCloneMetaInstalled: '克隆数据待安装',
+  kFileCloned: '克隆完成',
+  kFileBeingCloned: '克隆中',
 }
 
 //头部按钮的操作栏
-const selectedRowKeys = [];
+const selectedRowKeys = []
 const handleStatus = ref(false)
 
 const batchHandle = () => {
@@ -327,72 +426,85 @@ const batchHandle = () => {
   if (handleStatus.value) {
     columns.unshift({ type: 'selection' })
   } else {
-    handleStatus.value = false;
-    columns.shift();
+    handleStatus.value = false
+    columns.shift()
   }
 }
 
-
 //面包屑导航的处理
 const crumbClick = (itm: string, index: number) => {
-
   if (index === pathArr.value.length - 1) {
     return
-  }
-  else {
-    if (itm === "home") {
+  } else {
+    if (itm === 'home') {
       router.push('/volume-management/')
-      getVolumeList({ page: 1, size: 10, path: '/', sortKey: 'id', sortDirection: -1 }).then(res => {
+      getVolumeList({
+        page: 1,
+        size: 10,
+        path: '/',
+        sortKey: 'id',
+        sortDirection: -1,
+      }).then(res => {
         // totalPage.value = Math.ceil(res.data.data.total / 10);
-        volumeListData.value = volumeList.value;
+        volumeListData.value = volumeList.value
         totalPage.value = Math.ceil(res.data.data.total / 10)
-        page.value = 1;
+        page.value = 1
       })
-    }
-    else {
-      let pathToHandle = pathArr.value;
-      let pathToGo = pathToHandle.slice(1, index + 1);
+    } else {
+      let pathToHandle = pathArr.value
+      let pathToGo = pathToHandle.slice(1, index + 1)
       router.push({
-        name: 'pathVolumeManagement',
+        name: 'VolumeManagement',
         params: {
-          path: pathToGo
-        }
+          path: pathToGo,
+        },
       })
     }
   }
 }
 
 //处理路径搜索
-const pathToSearch = ref('');
+const pathToSearch = ref('')
 const searchByPath = () => {
   //清空面包屑位置
   // pathArr.value = ['home'];
   // getPathArr();
-  let searchParams = { volumeName: pathToSearch.value }
-  if (pathToSearch.value === "") {
-    let _pathArr = router.currentRoute.value.params.path;
-    _pathArr = '/' + (_pathArr.length === 0 ? '' : _pathArr.join('/'));
-    getVolumeList({ page: 1, size: 10, path: _pathArr, sortKey: 'id', sortDirection: -1 })
-      .then(res => {
-        totalPage.value = Math.ceil(res.data.data.total / 10);
-        page.value = 1; volumeListData.value = volumeList.value;
-      })
+  console.log(111, pathToSearch.value)
+  let searchParams = {
+    volumeName: pathToSearch.value,
+    // start: 1689127990,
+    // end: 1689131590,
+    // interval: 15,
   }
-  else {
+  if (pathToSearch.value === '') {
+    let _pathArr = router.currentRoute.value.params.path
+    _pathArr = '/' + (_pathArr.length === 0 ? '' : _pathArr.join('/'))
+    getVolumeList({
+      page: 1,
+      size: 10,
+      path: _pathArr,
+      sortKey: 'id',
+      sortDirection: -1,
+    }).then(res => {
+      totalPage.value = Math.ceil(res.data.data.total / 10)
+      page.value = 1
+      volumeListData.value = volumeList.value
+    })
+  } else {
     getVolumeDetail(searchParams).then(res => {
-      let searchResult = [];
+      let searchResult = []
       if (res.data.data !== null) {
-        searchResult.push(res.data.data.info);
+        searchResult.push(res.data.data.info)
         for (let i = 0; i < searchResult.length; i++) {
-          searchResult[i].key = "volume_" + i;
+          searchResult[i].key = 'volume_' + i
         }
-        volumeListData.value = searchResult;
+        volumeListData.value = searchResult
         totalPage.value = Math.ceil(searchResult.length)
       }
       //未匹配到相应的结果
       else {
-        volumeListData.value = searchResult;
-        totalPage.value = 1;
+        volumeListData.value = searchResult
+        totalPage.value = 1
         // page.value = 1;
         message.error('未匹配到相应结果')
       }
@@ -400,73 +512,139 @@ const searchByPath = () => {
   }
 }
 
-
 const cTimeColumn: DataTableColumn<getVolumeApiDataItem> = reactive({
   title: '创建时间',
   key: 'ctime',
   width: 'auto',
   sorter: true,
-  render: (row) => <span>{row.ctime}</span>
+  render: row => <span>{row.ctime}</span>,
 })
 
 const operateColumn: DataTableColumn<getVolumeApiDataItem> = reactive({
   title: '操作',
   key: 'action',
   width: 'auto',
-  render: (row) => {
+  render: row => {
     if (router.currentRoute.value.params.path.includes('RecycleBin')) {
       return (
         <div>
-          <n-button size="tiny" disabled={['kFileDeleting', 'kFileCloneMetaInstalled', 'kFileCloning'].includes(row.fileStatus)} type="normal" onClick={recoverVolumeFromBin(row)}>恢复</n-button>
-          <n-button size="tiny" type="error" onClick={showDeleteModal(row, true)}>彻底删除</n-button>
+          <n-button
+            size='tiny'
+            disabled={[
+              'kFileDeleting',
+              'kFileCloneMetaInstalled',
+              'kFileCloning',
+            ].includes(row.fileStatus)}
+            type='normal'
+            onClick={recoverVolumeFromBin(row)}
+          >
+            恢复
+          </n-button>
+          <n-button
+            size='tiny'
+            type='error'
+            onClick={showDeleteModal(row, true)}
+          >
+            彻底删除
+          </n-button>
         </div>
       )
-    }
-    else if (row.fileStatus === "kFileDeleting") {
+    } else if (row.fileStatus === 'kFileDeleting') {
       return (
         <div>
-          <n-button size="tiny" disabled type="normal">不可操作</n-button>
+          <n-button size='tiny' disabled type='normal'>
+            不可操作
+          </n-button>
         </div>
       )
-    }
-    else return (
-      <div>
-        <n-button size="tiny" type="normal" disabled={row.fileType === "INODE_DIRECTORY"} onClick={showVolumeThrottleModal(row)}>设置限流</n-button>
-        <n-button size="tiny" disabled={row.fileType === "INODE_DIRECTORY"} type="normal" onClick={showVolumeExtedModal(row)}>扩容</n-button>
-        <n-button size="tiny" disabled={row.fileType === "INODE_DIRECTORY"} onClick={cloneVolume(row)} type="normal">克隆</n-button>
-        <n-button disabled={row.fileStatus !== "kFileCloneMetaInstalled" || row.fileType === "INODE_DIRECTORY"} size="tiny" onClick={onLazyCloneVolume(row)} type="normal">安装数据</n-button>
-        <n-button size="tiny" disabled={row.fileType === "INODE_DIRECTORY" || !['kFileCreated', 'kFileCloned'].includes(row.fileStatus)} type="normal" onClick={showCreateSnapshot(row)}>打快照</n-button>
-        <n-button size="tiny" disabled={row.mountPoints.length !== 0} type="error" onClick={showDeleteModal(row, false)}>删除</n-button>
-      </div>
-    )
-  }
+    } else
+      return (
+        <div>
+          <n-button
+            size='tiny'
+            type='normal'
+            disabled={row.fileType === 'INODE_DIRECTORY'}
+            onClick={showVolumeThrottleModal(row)}
+          >
+            设置限流
+          </n-button>
+          <n-button
+            size='tiny'
+            disabled={row.fileType === 'INODE_DIRECTORY'}
+            type='normal'
+            onClick={showVolumeExtedModal(row)}
+          >
+            扩容
+          </n-button>
+          <n-button
+            size='tiny'
+            disabled={row.fileType === 'INODE_DIRECTORY'}
+            onClick={cloneVolume(row)}
+            type='normal'
+          >
+            克隆
+          </n-button>
+          <n-button
+            disabled={
+              row.fileStatus !== 'kFileCloneMetaInstalled' ||
+              row.fileType === 'INODE_DIRECTORY'
+            }
+            size='tiny'
+            onClick={onLazyCloneVolume(row)}
+            type='normal'
+          >
+            安装数据
+          </n-button>
+          <n-button
+            size='tiny'
+            disabled={
+              row.fileType === 'INODE_DIRECTORY' ||
+              !['kFileCreated', 'kFileCloned'].includes(row.fileStatus)
+            }
+            type='normal'
+            onClick={showCreateSnapshot(row)}
+          >
+            打快照
+          </n-button>
+          <n-button
+            size='tiny'
+            disabled={row.mountPoints.length !== 0}
+            type='error'
+            onClick={showDeleteModal(row, false)}
+          >
+            删除
+          </n-button>
+        </div>
+      )
+  },
 })
 
 const updataPage = () => {
-  params.page = page.value;
+  params.page = page.value
 }
 
 const goToTrashBin = () => {
-  router.push('/volume-management/RecycleBin');
-  page.value = 1;
+  router.push('/volume-management/RecycleBin')
+  page.value = 1
 }
 
 const handleItemClick = (row: getVolumeApiDataItem) => () => {
   if (pageLoading.value) return
-  const name = row.fileType === 'INODE_DIRECTORY' ? 'pathVolumeManagement' : 'pathVolumeDetail'
-  const path = router.currentRoute.value.params.path || [];
+  const name =
+    row.fileType === 'INODE_DIRECTORY' ? 'VolumeManagement' : 'VolumeDetail'
+  const path = router.currentRoute.value.params.path || []
   router.push({
     name,
     params: {
-      path: [...path, row.fileName]
-    }
+      path: [...path, row.fileName],
+    },
   })
 }
 const handleSorterChange = (sorter: DataTableSortState) => {
   cTimeColumn.sortOrder = false
   lengthColumn.sortOrder = false
   const column = sorter.columnKey === 'ctime' ? cTimeColumn : lengthColumn
-  column.sortOrder = sorter.order//cTimeColumn.sortOrder==='ascend'?'descend':'ascend'
+  column.sortOrder = sorter.order //cTimeColumn.sortOrder==='ascend'?'descend':'ascend'
   params.page = 1
   params.sortKey = sorter.order ? sorter.columnKey : 'id'
   params.sortDirection = sorter.order === 'descend' ? -1 : 1
@@ -478,23 +656,55 @@ const columns: DataTableColumns<getVolumeApiDataItem> = reactive([
     key: 'name',
     width: 'auto',
     render(row) {
-      if (row.fileType === "INODE_DIRECTORY") {
+      if (row.fileType === 'INODE_DIRECTORY') {
         return (
-          <NButton size='small' type='info' style={{ padding: '0 4px' }} quaternary onClick={handleItemClick(row)}>
-            <span>{row.fileName.length < 15 ? row.fileName : row.fileName.substring(0, 15) + '...'}</span>
-            <span >
-              <n-icon size="18" color="#2080f0">
-                <svg viewBox="0 0 16 16"><g fill="none"><path d="M7.207 4h-.032l-1.113-.89A.5.5 0 0 0 5.75 3H4a2 2 0 0 0-2 2v.5h3.557L7.207 4z" fill="currentColor"></path><path d="M8.693 4L6.086 6.37a.5.5 0 0 1-.336.13H2V11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H8.693z" fill="currentColor"></path></g></svg>
+          <NButton
+            size='small'
+            type='info'
+            style={{ padding: '0 4px' }}
+            quaternary
+            onClick={handleItemClick(row)}
+          >
+            <span>
+              {row.fileName.length < 15
+                ? row.fileName
+                : row.fileName.substring(0, 15) + '...'}
+            </span>
+            <span>
+              <n-icon size='18' color='#2080f0'>
+                <svg viewBox='0 0 16 16'>
+                  <g fill='none'>
+                    <path
+                      d='M7.207 4h-.032l-1.113-.89A.5.5 0 0 0 5.75 3H4a2 2 0 0 0-2 2v.5h3.557L7.207 4z'
+                      fill='currentColor'
+                    ></path>
+                    <path
+                      d='M8.693 4L6.086 6.37a.5.5 0 0 1-.336.13H2V11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H8.693z'
+                      fill='currentColor'
+                    ></path>
+                  </g>
+                </svg>
               </n-icon>
             </span>
           </NButton>
         )
       }
-      return <NButton size='small' type='info' style={{ padding: '0 4px' }} quaternary onClick={handleItemClick(row)}>
-        <span>{row.fileName.length < 15 ? row.fileName : row.fileName.substring(0, 15) + '...'}</span>
-      </NButton>
-
-    }
+      return (
+        <NButton
+          size='small'
+          type='info'
+          style={{ padding: '0 4px' }}
+          quaternary
+          onClick={handleItemClick(row)}
+        >
+          <span>
+            {row.fileName.length < 15
+              ? row.fileName
+              : row.fileName.substring(0, 15) + '...'}
+          </span>
+        </NButton>
+      )
+    },
   },
   {
     title: '所属者',
@@ -503,25 +713,24 @@ const columns: DataTableColumns<getVolumeApiDataItem> = reactive([
 
     render(row) {
       return h('span', row.owner)
-    }
+    },
   },
   lengthColumn,
   {
-    title: "挂载状态",
+    title: '挂载状态',
     key: 'mountPoints',
     width: 'auto',
 
     render(row) {
-      if (row.fileType === "INODE_DIRECTORY") {
-        return (<span>/</span>)
-      }
-      if ((row.mountPoints).length > 0) {
-        return (<span>已挂载</span>)
+      if (row.fileType === 'INODE_DIRECTORY') {
+        return <span>/</span>
       }
-      else if (row.mountPoints.length === 0) {
-        return (<span>未挂载</span>)
+      if (row.mountPoints.length > 0) {
+        return <span>已挂载</span>
+      } else if (row.mountPoints.length === 0) {
+        return <span>未挂载</span>
       }
-    }
+    },
   },
   {
     title: '状态',
@@ -529,63 +738,64 @@ const columns: DataTableColumns<getVolumeApiDataItem> = reactive([
     width: 'auto',
 
     render(row) {
-      return (
-        <span>{statusMap[row.fileStatus]}</span>
-      )
-    }
+      return <span>{statusMap[row.fileStatus]}</span>
+    },
   },
   cTimeColumn,
-  operateColumn
+  operateColumn,
 ])
 
-
-watch(params, (value) => {
-  value.sortKey = value.sortKey || 'id';
-  value.path = value.path || '/';
-  value.sortDirection = value.sortDirection || -1;
+watch(params, value => {
+  value.sortKey = value.sortKey || 'id'
+  value.path = value.path || '/'
+  value.sortDirection = value.sortDirection || -1
   pageLoading.value = true
   getVolumeList(value).then(res => {
     pageLoading.value = false
-    if (res.name && res.name === "AxiosError") {
-      message.error('请输入正确的路径');
-    }
-    else {
-      volumeListData.value = volumeList.value;
-      totalPage.value = Math.ceil(res.data.data.total / 10);
+    if (res.name && res.name === 'AxiosError') {
+      message.error('请输入正确的路径')
+    } else {
+      volumeListData.value = volumeList.value
+      totalPage.value = Math.ceil(res.data.data.total / 10)
     }
   })
 })
 
-watch(page, (newVal) => {
-  params.page = newVal;
+watch(page, newVal => {
+  params.page = newVal
   getVolumeList(params).then(res => {
-    if (res.name && res.name === "AxiosError") {
-      message.error('请输入正确的路径');
-    }
-    else {
-      totalPage.value = Math.ceil(res.data.data.total / 10);
+    if (res.name && res.name === 'AxiosError') {
+      message.error('请输入正确的路径')
+    } else {
+      totalPage.value = Math.ceil(res.data.data.total / 10)
     }
   })
 })
 
-watch(router.currentRoute, (value) => {
-  if (window.location.pathname.includes('volume-management')) {
-    routePath.value = router.currentRoute.value.params.path;
-    currentPath.value = (routePath.value === '' ? '/' : '/' + routePath.value.join('/') + '/');
-    checkedFileNames.value = {};
-    checkedRowKeys.value = []
-  }
-  //  routePath.value = router.currentRoute.value.params.path;
-  //  currentPath.value = routePath.value === '' ? '/' : '/' + routePath.value.join('/') + '/';
-  if (value.name !== 'pathVolumeManagement') return
-  const path = value.params.path as string[] || []
-  params.path = '/' + path.join('/');
-  params.page = 1;
-  getPathArr();
-}, { immediate: true })
-
+watch(
+  router.currentRoute,
+  value => {
+    if (window.location.pathname.includes('volume-management')) {
+      routePath.value = router.currentRoute.value.params.path
+      currentPath.value = !routePath.value
+        ? '/'
+        : '/' + routePath.value.join('/') + '/'
+      checkedFileNames.value = {}
+      checkedRowKeys.value = []
+    }
+    //  routePath.value = router.currentRoute.value.params.path;
+    //  currentPath.value = routePath.value === '' ? '/' : '/' + routePath.value.join('/') + '/';
+    console.log('value', value)
+    if (value.name !== 'VolumeManagement') return
+    const path = (value.params.path as string[]) || []
+    params.path = '/' + path.join('/')
+    params.page = 1
+    getPathArr()
+  },
+  { immediate: true },
+)
 </script>
-  
+
 <style lang="scss" scoped>
 .container {
   flex-grow: 1;
@@ -596,13 +806,12 @@ watch(router.currentRoute, (value) => {
     justify-content: space-between;
     margin-bottom: 32px;
 
-
     .breadcrumb {
-      margin-right: auto
+      margin-right: auto;
     }
 
     .search-input {
-      margin-left: auto
+      margin-left: auto;
     }
 
     .batch-button {
@@ -612,7 +821,7 @@ watch(router.currentRoute, (value) => {
     .button-group {
       display: flex;
       align-self: start;
-      justify-content: space-between
+      justify-content: space-between;
     }
 
     .search-bar {
@@ -626,7 +835,7 @@ watch(router.currentRoute, (value) => {
       justify-content: space-around;
 
       .create-volume-namespace {
-        margin-right: 5px
+        margin-right: 5px;
       }
     }
 
@@ -642,4 +851,3 @@ watch(router.currentRoute, (value) => {
   }
 }
 </style>
-  
diff --git a/src/views/storageBlock/modals/CreateSnapshotModal.vue b/src/views/storageBlock/modals/CreateSnapshotModal.vue
index fb45ef9..f0be664 100644
--- a/src/views/storageBlock/modals/CreateSnapshotModal.vue
+++ b/src/views/storageBlock/modals/CreateSnapshotModal.vue
@@ -1,82 +1,86 @@
 <template>
-    <n-modal v-model:show="val" preset="dialog" title="打快照">
-        <n-form :rules = "rules" :model="formData">
-            <n-form-item path="volumeName" label="卷名称">
-                <n-input :value="fileName" placeholder="请输入卷名称..." disabled></n-input>
-            </n-form-item>
-            <n-form-item path="user" label="用户名">
-                <n-input v-model:value="rowInfo.owner" placeholder="请输入用户名..." disabled></n-input>
-            </n-form-item>
-            <n-form-item path="snapshotName" label="快照名称">
-                <n-input v-model:value="formData.snapshotName" placeholder="请输入快照名称..."></n-input>
-            </n-form-item>
-        </n-form>
-        <template #action>
-            <div>
-                <n-button @Click="confirmCreateSnapshot" type="primary">确定</n-button>
-                <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
-            </div>
-        </template>
-    </n-modal>
+  <n-modal v-model:show="val" preset="dialog" title="打快照">
+    <n-form :rules="rules" :model="formData">
+      <n-form-item path="volumeName" label="卷名称">
+        <n-input
+          :value="fileName"
+          placeholder="请输入卷名称..."
+          disabled
+        ></n-input>
+      </n-form-item>
+      <n-form-item path="user" label="用户名">
+        <n-input
+          :value="rowInfo.owner"
+          placeholder="请输入用户名..."
+          disabled
+        ></n-input>
+      </n-form-item>
+      <n-form-item path="snapshotName" label="快照名称">
+        <n-input
+          v-model:value="formData.snapshotName"
+          placeholder="请输入快照名称..."
+        ></n-input>
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <div>
+        <n-button type="primary" @Click="confirmCreateSnapshot">确定</n-button>
+        <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
+      </div>
+    </template>
+  </n-modal>
 </template>
 
 <script lang="ts" setup>
-import { useBlockStore } from '@/store/blockStorageManagement/block'
-import { ref, reactive, watch } from 'vue'
-import { useMessage, type FormRules, type FormItemRule } from 'naive-ui'
+import { type FormItemRule, type FormRules, useMessage } from 'naive-ui'
+import { rowDark } from 'naive-ui/es/legacy-grid/styles'
+import { reactive, ref, watch } from 'vue'
+
 import router from '@/router'
-import { rowDark } from 'naive-ui/es/legacy-grid/styles';
+import { useBlockStore } from '@/store/blockStorageManagement/block'
 
-const blockStore = useBlockStore();
-const {createSnapshot} = blockStore;
-const message = useMessage();
+const blockStore = useBlockStore()
+const { createSnapshot } = blockStore
+const message = useMessage()
 
-let routePath = router.currentRoute.value.params.path; 
-let currentPath = routePath === '' ? '/' : '/' + routePath.join('/') + '/';
+let routePath = router.currentRoute.value.params.path
+let currentPath = !routePath ? '/' : '/' + routePath.join('/') + '/'
 
-const props = defineProps({
-    rowInfo: Object
-})
-
-const fileName = ref("");
+const props = defineProps<{ rowInfo: Object }>()
 
+const fileName = ref('')
 
 // const {fileName} = props.rowInfo
 
 const formData = reactive({
-  user: "",
-  snapshotName: ""
+  user: '',
+  snapshotName: '',
 })
 
-
-const rules = {  
-        user:
-        {
-            required: true,
-            message: "请输入用户名",
-        },
-        snapshotName:
-        {
-            required: true,
-            message: "请输入快照名称",
-        }  
-    
+const rules = {
+  user: {
+    required: true,
+    message: '请输入用户名',
+  },
+  snapshotName: {
+    required: true,
+    message: '请输入快照名称',
+  },
 }
 
 const confirmCreateSnapshot = () => {
-  if(formData.user === "" || formData.snapshotName === "" ) {
-    message.error("请正确填写信息")
-  }
-  else {
-    const { user, snapshotName} = formData;
-    const params = {volumeName: fileName.value, user, snapshotName};
-    createSnapshot(params).then(res => { 
-        if(res.status === 200) {
-            message.success('打快照成功');
-            cancel();
-        } else {
-            message.error('打快照失败');
-        }
+  if (formData.user === '' || formData.snapshotName === '') {
+    message.error('请正确填写信息')
+  } else {
+    const { user, snapshotName } = formData
+    const params = { volumeName: fileName.value, user, snapshotName }
+    createSnapshot(params).then(res => {
+      if (res.status === 200) {
+        message.success('打快照成功')
+        cancel()
+      } else {
+        message.error('打快照失败')
+      }
     })
   }
 }
@@ -84,33 +88,36 @@ const confirmCreateSnapshot = () => {
 let val = ref(false)
 //点击取消，关闭模态框
 const cancel = () => {
-    val.value = false;
-    formData.volumeName = "";
-    formData.user = "";
-    formData.snapshotName = ""
+  val.value = false
+  formData.volumeName = ''
+  formData.user = ''
+  formData.snapshotName = ''
 }
 
 //展示模态框，供外部调用
 const showModal = () => {
-    val.value = true
+  val.value = true
 }
 
-watch(()=> props.rowInfo, (newVal) => {
-    fileName.value =  currentPath+newVal.fileName;
-    if(newVal.owner) {
-    formData.user = newVal.owner
+watch(
+  () => props.rowInfo,
+  newVal => {
+    fileName.value = currentPath + newVal.fileName
+    if (newVal.owner) {
+      formData.user = newVal.owner
     }
-})
-
-watch(() => router.currentRoute.value.params.path, (newVal) => { 
-if(window.location.pathname.includes('volume-management')) {
- routePath = newVal; 
- currentPath = routePath === '' ? '/' : '/' + routePath.join('/') + '/';
-}   
-})
+  },
+)
+
+watch(
+  () => router.currentRoute.value.params.path,
+  newVal => {
+    if (window.location.pathname.includes('volume-management')) {
+      routePath = newVal
+      currentPath = !routePath ? '/' : '/' + routePath.join('/') + '/'
+    }
+  },
+)
 
 defineExpose({ showModal })
 </script>
-
-<style></style>
-
diff --git a/src/views/storageBlock/modals/VolumeCreateModal.vue b/src/views/storageBlock/modals/VolumeCreateModal.vue
index 3981b4a..4c27ae7 100644
--- a/src/views/storageBlock/modals/VolumeCreateModal.vue
+++ b/src/views/storageBlock/modals/VolumeCreateModal.vue
@@ -1,382 +1,453 @@
 <template>
-    <n-modal v-model:show="visible" preset="dialog" :title="volumeTitle">
-        <n-form :model="formData" :rules="rules" label-placement="left" label-width="auto">
-            <!-- 卷类型 -->
-            <n-form-item label="卷类型" v-if="selectVisible">
-                <n-select v-model:value="volumeType" :options="voluemOptions" @update:value="onChangeVolumeType" />
-            </n-form-item>
-            <!-- 卷名称 -->
-            <n-form-item v-if="volumeType === 1" path="volumeName" label="卷名称">
-                <n-input-group>
-                    <n-input-group-label>当前路径:{{ currentPath }}</n-input-group-label>
-                    <n-input v-model:value="formData.volumeName" placeholder="请输入卷名称...">
-                    </n-input>
-                </n-input-group>
-            </n-form-item>
-            <!-- 卷名称（克隆卷目的名） -->
-            <n-form-item v-if="volumeType === 2" path="dest" label="卷名称">
-                <n-input v-model:value="formData.dest" placeholder="请输入卷名称..."></n-input>
-            </n-form-item>
-            <!-- 用户名 -->
-            <n-form-item path="userName" label="用户">
-                <n-tooltip placement="bottom" trigger="hover">
-                    <template #trigger>
-                        <n-icon size="12">
-                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                                viewBox="0 0 16 16">
-                                <g fill="none">
-                                    <path
-                                        d="M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5zm0-6a2 2 0 0 0-2 2a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.083.58-.366.898l-.116.125l-.264.27C7.712 8.36 7.5 8.768 7.5 9.5a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27C9.788 7.64 10 7.232 10 6.5a2 2 0 0 0-2-2z"
-                                        fill="currentColor"></path>
-                                </g>
-                            </svg>
-                        </n-icon>
-                    </template>
-                    <span>
-                     如果在命名空间下创建，用户必须为该命名空间所有者
-                    </span>
-                </n-tooltip>
-                <n-input v-model:value="formData.userName" placeholder="请输入用户名..."></n-input>
-            </n-form-item>
-            <!-- 克隆卷来源 -->
-            <n-form-item v-if="volumeType === 2" path="src" label="来源">
-                <n-tooltip trigger="hover" placement="top" style="margin-right: 3px;">
-                    <template #trigger>
-                        <n-icon size="11">
-                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                                viewBox="0 0 24 24">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41c0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-                                    fill="currentColor"></path>
-                            </svg>
-                        </n-icon>
-                    </template>
-                    如果是从镜像克隆，则是源卷名称，全路径，例如/dir1/test1
-                    如果上是从快照克隆，则是快照uuid
-                </n-tooltip>
-                <n-input v-model:value="formData.src" placeholder="请输入卷来源..." v-model:disabled="srcDisabled"></n-input>
-            </n-form-item>
-            <!-- 卷长度 -->
-            <n-form-item v-if="volumeType === 1" path="volumeLength" label="卷长度">
-                <n-input v-model:value="formData.volumeLength" placeholder="卷长度在10-20x1024 GiB..."></n-input>
-            </n-form-item>
-            <n-form-item v-if="volumeType === 1" path="password" label="密码">
-                <n-input type="password" v-model:value="formData.password" placeholder="请输入密码..."
-                    show-password-on='click'></n-input>
-            </n-form-item>
-            <n-form-item v-if="volumeType === 1" path="stripUnit" label="条带长度">
-                <n-tooltip placement="bottom" trigger="hover">
-                    <template #trigger>
-                        <n-icon size="12">
-                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                                viewBox="0 0 16 16">
-                                <g fill="none">
-                                    <path
-                                        d="M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5zm0-6a2 2 0 0 0-2 2a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.083.58-.366.898l-.116.125l-.264.27C7.712 8.36 7.5 8.768 7.5 9.5a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27C9.788 7.64 10 7.232 10 6.5a2 2 0 0 0-2-2z"
-                                        fill="currentColor"></path>
-                                </g>
-                            </svg>
-                        </n-icon>
-                    </template>
-                    <span>
-                        参数限制：<br />
-                        1.segmentSize = 1 * 1024 *1024 *1024 <br />
-                        2.chunksize = 16*1024*1024 <br />
-                        3.不能一个为0,一个不为0 <br />
-                        4.stripUnit &lt; chunksize <br />
-                        5.chunksize%stripUnit == 0 && chunksize%stripCount == 0 <br />
-                        6.stripUnit % 4096 == 0 <br />
-                        7.stripCount &lt; segmentSize/chunkSize <br />
-                        8.当stripCount == 1 时，stripUnit == chunkSize
-                    </span>
-                </n-tooltip>
-                <n-input v-model:value="formData.stripUnit" placeholder="请输入条带长度..."></n-input>
-            </n-form-item>
-            <n-form-item v-if="volumeType === 1" path="stripCount" label="条带数">
-                <n-tooltip placement="bottom" trigger="hover">
-                    <template #trigger>
-                        <n-icon size="12">
-                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                                viewBox="0 0 16 16">
-                                <g fill="none">
-                                    <path
-                                        d="M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5zm0-6a2 2 0 0 0-2 2a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.083.58-.366.898l-.116.125l-.264.27C7.712 8.36 7.5 8.768 7.5 9.5a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27C9.788 7.64 10 7.232 10 6.5a2 2 0 0 0-2-2z"
-                                        fill="currentColor"></path>
-                                </g>
-                            </svg>
-                        </n-icon>
-                    </template>
-                    <span>
-                        参数限制：<br />
-                        1.segmentSize = 1 * 1024 *1024 *1024 <br />
-                        2.chunksize = 16*1024*1024 <br />
-                        3.不能一个为0,一个不为0 <br />
-                        4.stripUnit &lt; chunksize <br />
-                        5.chunksize%stripUnit == 0 && chunksize%stripCount == 0 <br />
-                        6.stripUnit % 4096 == 0 <br />
-                        7.stripCount &lt; segmentSize/chunkSize <br />
-                        8.当stripCount == 1 时，stripUnit == chunkSize
-                    </span>
-                </n-tooltip>
-                <n-input v-model:value="formData.stripCount" placeholder="请输入条带数..."></n-input>
-            </n-form-item>
-            <n-form-item v-if="volumeType === 2" path="stripCount" label="是否Lazy">
-                <n-radio :checked="checkedValue === 'isLazy'" value="isLazy" @change="handelChange">
-                    是
-                </n-radio>
-                <n-radio :checked="checkedValue === 'notLazy'" value="notLazy" @change="handelChange">
-                    否
-                </n-radio>
-            </n-form-item>
-        </n-form>
-        <template #action>
-            <div>
-                <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
-                <n-button @Click="confirmCreateVolume" type="primary">创建</n-button>
-            </div>
-        </template>
-    </n-modal>
+  <n-modal v-model:show="visible" preset="dialog" :title="volumeTitle">
+    <n-form
+      :model="formData"
+      :rules="rules"
+      label-placement="left"
+      label-width="auto"
+    >
+      <!-- 卷类型 -->
+      <n-form-item v-if="selectVisible" label="卷类型">
+        <n-select
+          v-model:value="volumeType"
+          :options="voluemOptions"
+          @update:value="onChangeVolumeType"
+        />
+      </n-form-item>
+      <!-- 卷名称 -->
+      <n-form-item v-if="volumeType === 1" path="volumeName" label="卷名称">
+        <n-input-group>
+          <n-input-group-label>当前路径:{{ currentPath }}</n-input-group-label>
+          <n-input
+            v-model:value="formData.volumeName"
+            placeholder="请输入卷名称..."
+          >
+          </n-input>
+        </n-input-group>
+      </n-form-item>
+      <!-- 卷名称（克隆卷目的名） -->
+      <n-form-item v-if="volumeType === 2" path="dest" label="卷名称">
+        <n-input
+          v-model:value="formData.dest"
+          placeholder="请输入卷名称..."
+        ></n-input>
+      </n-form-item>
+      <!-- 用户名 -->
+      <n-form-item path="userName" label="用户">
+        <n-tooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <n-icon size="12">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 16 16"
+              >
+                <g fill="none">
+                  <path
+                    d="M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5zm0-6a2 2 0 0 0-2 2a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.083.58-.366.898l-.116.125l-.264.27C7.712 8.36 7.5 8.768 7.5 9.5a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27C9.788 7.64 10 7.232 10 6.5a2 2 0 0 0-2-2z"
+                    fill="currentColor"
+                  ></path>
+                </g>
+              </svg>
+            </n-icon>
+          </template>
+          <span> 如果在命名空间下创建，用户必须为该命名空间所有者 </span>
+        </n-tooltip>
+        <n-input
+          v-model:value="formData.userName"
+          placeholder="请输入用户名..."
+        ></n-input>
+      </n-form-item>
+      <!-- 克隆卷来源 -->
+      <n-form-item v-if="volumeType === 2" path="src" label="来源">
+        <n-tooltip trigger="hover" placement="top" style="margin-right: 3px">
+          <template #trigger>
+            <n-icon size="11">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41c0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                  fill="currentColor"
+                ></path>
+              </svg>
+            </n-icon>
+          </template>
+          如果是从镜像克隆，则是源卷名称，全路径，例如/dir1/test1
+          如果上是从快照克隆，则是快照uuid
+        </n-tooltip>
+        <n-input
+          v-model:value="formData.src"
+          v-model:disabled="srcDisabled"
+          placeholder="请输入卷来源..."
+        ></n-input>
+      </n-form-item>
+      <!-- 卷长度 -->
+      <n-form-item v-if="volumeType === 1" path="volumeLength" label="卷长度">
+        <n-input
+          v-model:value="formData.volumeLength"
+          placeholder="卷长度在10-20x1024 GiB..."
+        ></n-input>
+      </n-form-item>
+      <n-form-item v-if="volumeType === 1" path="password" label="密码">
+        <n-input
+          v-model:value="formData.password"
+          type="password"
+          placeholder="请输入密码..."
+          show-password-on="click"
+        ></n-input>
+      </n-form-item>
+      <n-form-item v-if="volumeType === 1" path="stripUnit" label="条带长度">
+        <n-tooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <n-icon size="12">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 16 16"
+              >
+                <g fill="none">
+                  <path
+                    d="M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5zm0-6a2 2 0 0 0-2 2a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.083.58-.366.898l-.116.125l-.264.27C7.712 8.36 7.5 8.768 7.5 9.5a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27C9.788 7.64 10 7.232 10 6.5a2 2 0 0 0-2-2z"
+                    fill="currentColor"
+                  ></path>
+                </g>
+              </svg>
+            </n-icon>
+          </template>
+          <span>
+            参数限制：<br />
+            1.segmentSize = 1 * 1024 *1024 *1024 <br />
+            2.chunksize = 16*1024*1024 <br />
+            3.不能一个为0,一个不为0 <br />
+            4.stripUnit &lt; chunksize <br />
+            5.chunksize%stripUnit == 0 && chunksize%stripCount == 0 <br />
+            6.stripUnit % 4096 == 0 <br />
+            7.stripCount &lt; segmentSize/chunkSize <br />
+            8.当stripCount == 1 时，stripUnit == chunkSize
+          </span>
+        </n-tooltip>
+        <n-input
+          v-model:value="formData.stripUnit"
+          placeholder="请输入条带长度..."
+        ></n-input>
+      </n-form-item>
+      <n-form-item v-if="volumeType === 1" path="stripCount" label="条带数">
+        <n-tooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <n-icon size="12">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 16 16"
+              >
+                <g fill="none">
+                  <path
+                    d="M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5zm0-6a2 2 0 0 0-2 2a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.083.58-.366.898l-.116.125l-.264.27C7.712 8.36 7.5 8.768 7.5 9.5a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27C9.788 7.64 10 7.232 10 6.5a2 2 0 0 0-2-2z"
+                    fill="currentColor"
+                  ></path>
+                </g>
+              </svg>
+            </n-icon>
+          </template>
+          <span>
+            参数限制：<br />
+            1.segmentSize = 1 * 1024 *1024 *1024 <br />
+            2.chunksize = 16*1024*1024 <br />
+            3.不能一个为0,一个不为0 <br />
+            4.stripUnit &lt; chunksize <br />
+            5.chunksize%stripUnit == 0 && chunksize%stripCount == 0 <br />
+            6.stripUnit % 4096 == 0 <br />
+            7.stripCount &lt; segmentSize/chunkSize <br />
+            8.当stripCount == 1 时，stripUnit == chunkSize
+          </span>
+        </n-tooltip>
+        <n-input
+          v-model:value="formData.stripCount"
+          placeholder="请输入条带数..."
+        ></n-input>
+      </n-form-item>
+      <n-form-item v-if="volumeType === 2" path="stripCount" label="是否Lazy">
+        <n-radio
+          :checked="checkedValue === 'isLazy'"
+          value="isLazy"
+          @change="handelChange"
+        >
+          是
+        </n-radio>
+        <n-radio
+          :checked="checkedValue === 'notLazy'"
+          value="notLazy"
+          @change="handelChange"
+        >
+          否
+        </n-radio>
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <div>
+        <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
+        <n-button type="primary" @Click="confirmCreateVolume">创建</n-button>
+      </div>
+    </template>
+  </n-modal>
 </template>
 
 <script lang="ts" setup>
-import { useBlockStore } from '@/store/blockStorageManagement/block'
-import { ref, reactive, watch, toRef } from 'vue'
-import { useMessage, type FormRules, type FormItemRule,  NSelect, NRadio, NFormItem } from 'naive-ui'
-import router from '@/router'
 import md5 from 'js-md5'
+import {
+  type FormItemRule,
+  type FormRules,
+  NFormItem,
+  NRadio,
+  NSelect,
+  useMessage,
+} from 'naive-ui'
+import { reactive, ref, toRef, watch } from 'vue'
+
+import router from '@/router'
+import { useBlockStore } from '@/store/blockStorageManagement/block'
 
-const { createVolume, cloneVolume } = useBlockStore();
-const message = useMessage();
+const { createVolume, cloneVolume } = useBlockStore()
+const message = useMessage()
 // const cloneFlag = ref(false);
 //判断选择创建类型要不要显示，从row里直接点进去克隆就不显示
-const selectVisible=ref(true);
+const selectVisible = ref(true)
 //判断底部的来源是不是写死，如果从row直接点进来就写死
-const srcDisabled=ref(false);
+const srcDisabled = ref(false)
 //标记是不是从选项里选择的克隆，因为如果只按照srcDisabled来判断，从‘创建卷’入口进入的时候选择克隆，来源输入框就被置灰了
-const chosenCloneFromSelect = ref(false);
-const volumeTitle = ref("创建卷")
+const chosenCloneFromSelect = ref(false)
+const volumeTitle = ref('创建卷')
 const emit = defineEmits(['createVolume'])
 
 const formData = reactive({
-    volumeName: "",
-    volumeLength: null,
-    userName: "",
-    password: "",
-    stripUnit: null,
-    stripCount: null,
-    src: "",
-    dest: "",
-    isLazy: true
+  volumeName: '',
+  volumeLength: null,
+  userName: '',
+  password: '',
+  stripUnit: null,
+  stripCount: null,
+  src: '',
+  dest: '',
+  isLazy: true,
 })
 
-const checkedValue = ref("isLazy");
+const checkedValue = ref('isLazy')
 
-const handelChange = (e: Event) => { 
+const handelChange = (e: Event) => {
   checkedValue.value = e.target.value
-  if(e.target.value === 'isLazy') {
+  if (e.target.value === 'isLazy') {
     formData.isLazy = true
   }
-  if(e.target.value === "notLazy") {
+  if (e.target.value === 'notLazy') {
     formData.isLazy = false
   }
 }
 
 const setFormData = (data: object) => {
-    volumeType.value = data.volumeType
-    formData.src = data.src
+  volumeType.value = data.volumeType
+  formData.src = data.src
 }
 
 const clearFormData = () => {
-    formData.volumeName = "";
-    formData.volumeLength = null;
-    formData.userName = "";
-    formData.password = "";
-    formData.stripUnit = null;
-    formData.stripCount = null;
-    formData.src = "";
-    formData.dest = "";
-    formData.isLazy = true;
+  formData.volumeName = ''
+  formData.volumeLength = null
+  formData.userName = ''
+  formData.password = ''
+  formData.stripUnit = null
+  formData.stripCount = null
+  formData.src = ''
+  formData.dest = ''
+  formData.isLazy = true
 }
 
 // const formValidator = reactive({
 const volumeLengthValidator = () => {
-    if (typeof (formData.volumeLength === "number" && formData.volumeLength > 10 && formData.volumeLength < 20 * 1024)) {
-        return true
-    }
-    else {
-        return false
-    }
+  if (
+    formData.volumeLength === 'number' &&
+    formData.volumeLength > 10 &&
+    formData.volumeLength < 20 * 1024
+  ) {
+    return true
+  } else {
+    return false
+  }
 }
 const volulmeNameValidator = () => {
-    return true
+  return true
 }
 
 const rules: FormRules = {
-    volumeName: [
-        {
-            required: true,
-            message: '请输入卷名称',
-            trigger: ['input', 'blur'],
-        },
-        {
-            validator: volulmeNameValidator,
-            message: '请输入正确卷名，默认在当前路径创建新卷',
-            trigger: ['input', 'blur'],
-        },
-    ],
-    userName: [
-        {
-            required: true,
-            message: '请输入用户',
-            trigger: ['input', 'blur'],
-        },
-        {
-
-            message: '用户名应为字母或大小写数字，长度为5-64位',
-            trigger: ['input', 'blur'],
-        },
-    ],
-    volumeLength: [
-        {
-            required: true,
-            message: '请输入卷长度',
-            trigger: ['input', 'blur'],
-        },
-        {
-            validator: volumeLengthValidator,
-            message: '请输入一个10GiB到20TB(20x1024)之间的数字',
-            trigger: ['input', 'blur'],
-        }
-    ],
-    password: [
-        {
-            message: '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
-            trigger: ['input', 'blur'],
-        },
-    ],
-    stripUnit: [
-        {
-            message: '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
-            trigger: ['input', 'blur'],
-        }
-    ],
-    stripCount: [
-        {
-            message: '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
-            trigger: ['input', 'blur'],
-        }
-    ],
-    dest: [
-        {
-            message: '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
-            trigger: ['input', 'blur'],
-        }
-    ],
-    src: [
-        {
-            message: '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
-            trigger: ['input', 'blur'],
-        }
-    ],
+  volumeName: [
+    {
+      required: true,
+      message: '请输入卷名称',
+      trigger: ['input', 'blur'],
+    },
+    {
+      validator: volulmeNameValidator,
+      message: '请输入正确卷名，默认在当前路径创建新卷',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  userName: [
+    {
+      required: true,
+      message: '请输入用户',
+      trigger: ['input', 'blur'],
+    },
+    {
+      message: '用户名应为字母或大小写数字，长度为5-64位',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  volumeLength: [
+    {
+      required: true,
+      message: '请输入卷长度',
+      trigger: ['input', 'blur'],
+    },
+    {
+      validator: volumeLengthValidator,
+      message: '请输入一个10GiB到20TB(20x1024)之间的数字',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  password: [
+    {
+      message:
+        '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  stripUnit: [
+    {
+      message:
+        '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  stripCount: [
+    {
+      message:
+        '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  dest: [
+    {
+      message:
+        '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  src: [
+    {
+      message:
+        '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
+      trigger: ['input', 'blur'],
+    },
+  ],
 }
 
-const setVisibleAndDisabled = (val1: boolean, val2: boolean) => { 
-    selectVisible.value = val1;
-    srcDisabled.value = val2;
+const setVisibleAndDisabled = (val1: boolean, val2: boolean) => {
+  selectVisible.value = val1
+  srcDisabled.value = val2
 }
 
-let routePath = router.currentRoute.value.params.path; 
-let currentPath = ref(routePath === '' ? '/' : '/' + routePath.join('/') + '/');
+let routePath = router.currentRoute.value.params.path
+let currentPath = ref(!routePath ? '/' : '/' + routePath.join('/') + '/')
 
 const voluemOptions = ref([
-    { label: "普通卷", value: 1 },
-    { label: "克隆卷", value: 2 }
+  { label: '普通卷', value: 1 },
+  { label: '克隆卷', value: 2 },
 ])
 const volumeType = ref(1)
 
 let visible = ref(false)
 //点击取消，关闭模态框
 const cancel = () => {
-    visible.value = false;
-    selectVisible.value = true;
-    srcDisabled.value = false;
-    clearFormData();
+  visible.value = false
+  selectVisible.value = true
+  srcDisabled.value = false
+  clearFormData()
 }
 
 const confirmCreateVolume = () => {
-    let params = null
-    if (srcDisabled.value || chosenCloneFromSelect.value) { 
-        params = {
-            dest: formData.dest,
-            user: formData.userName,
-            // length: +formData.volumeLength,
-            lazy: formData.isLazy,
-            src: formData.src,
-            // password: formData.password,
-            // stripUnit: +formData.stripUnit || 0,
-            // stripCount: +formData.stripCount || 0
-        }
-      cloneVolume(params).then(res => {
-       if(res.status === 200) {
-        cancel();
+  let params = null
+  if (srcDisabled.value || chosenCloneFromSelect.value) {
+    params = {
+      dest: formData.dest,
+      user: formData.userName,
+      // length: +formData.volumeLength,
+      lazy: formData.isLazy,
+      src: formData.src,
+      // password: formData.password,
+      // stripUnit: +formData.stripUnit || 0,
+      // stripCount: +formData.stripCount || 0
+    }
+    cloneVolume(params).then(res => {
+      if (res.status === 200) {
+        cancel()
         message.success('克隆卷成功')
-        emit('createVolume');
-        clearFormData();
+        emit('createVolume')
+        clearFormData()
         return
-       } else {
+      } else {
         message.error('克隆失败，请检查信息是否填写正确')
-       }
+      }
     })
+  } else {
+    params = {
+      volumeName: currentPath.value + formData.volumeName,
+      user: formData.userName,
+      length: +formData.volumeLength,
+      password: formData.password,
+      // lazy: formData.isLazy,
+      stripUnit: +formData.stripUnit || 0,
+      stripCount: +formData.stripCount || 0,
     }
 
-    else { 
-        params = { 
-            volumeName: currentPath.value + formData.volumeName,
-            user: formData.userName,
-            length: +formData.volumeLength,
-            password: formData.password,
-            // lazy: formData.isLazy,
-            stripUnit: +formData.stripUnit || 0,
-            stripCount: +formData.stripCount || 0
-        }
-
-        createVolume(params).then(res => {
-       if(res.status === 200) {
-        cancel();
-        clearFormData();
+    createVolume(params).then(res => {
+      if (res.status === 200) {
+        cancel()
+        clearFormData()
         message.success('创建卷成功')
-        emit('createVolume');
-        clearFormData();
-       } else {
+        emit('createVolume')
+        clearFormData()
+      } else {
         message.error('创建失败，请检查信息是否填写正确')
-       }
+      }
     })
-    }
-    // }
+  }
+  // }
 }
 
 //展示模态框，供外部调用
 const showModal = () => {
-    visible.value = true
+  visible.value = true
 }
 
 const onChangeVolumeType = (val: number) => {
-    if (val === 2) {
-        volumeTitle.value = "克隆卷";
-        chosenCloneFromSelect.value = true; 
-    }
-    else{ 
-        volumeTitle.value = "创建卷"
-
-    }
+  if (val === 2) {
+    volumeTitle.value = '克隆卷'
+    chosenCloneFromSelect.value = true
+  } else {
+    volumeTitle.value = '创建卷'
+  }
 }
 
-watch(() => router.currentRoute.value.params.path, () => {
-    if(window.location.pathname.includes('volume-management')){
-    routePath = router.currentRoute.value.params.path; 
-    currentPath.value = (routePath === '' ? '/' : '/' + routePath.join('/') + '/');
+watch(
+  () => router.currentRoute.value.params.path,
+  () => {
+    if (window.location.pathname.includes('volume-management')) {
+      routePath = router.currentRoute.value.params.path
+      currentPath.value = !routePath ? '/' : '/' + routePath.join('/') + '/'
     }
-})
+  },
+)
 
 // watch(cloneFlag, () => {
 //     if (cloneFlag.value) {
@@ -387,21 +458,18 @@ watch(() => router.currentRoute.value.params.path, () => {
 //     }
 // })
 
-
-
 defineExpose({
-    showModal,
-    setFormData,
-    setVisibleAndDisabled, 
+  showModal,
+  setFormData,
+  setVisibleAndDisabled,
 })
 </script>
 
 <style lang="scss">
 .n-form-item__label-extra {
-    position: absolute;
-    bottom: -15px;
-    left: 100%;
-    transform: translateX(5px);
+  position: absolute;
+  bottom: -15px;
+  left: 100%;
+  transform: translateX(5px);
 }
 </style>
-
diff --git a/src/views/storageBlock/modals/VolumeNamespaceModal.vue b/src/views/storageBlock/modals/VolumeNamespaceModal.vue
index b9c00fe..8e35991 100644
--- a/src/views/storageBlock/modals/VolumeNamespaceModal.vue
+++ b/src/views/storageBlock/modals/VolumeNamespaceModal.vue
@@ -1,92 +1,128 @@
 <template>
-    <n-modal v-model:show="val" preset="dialog" title="创建卷命名空间">
-        <n-form>
-            <n-form-item label="卷命名空间名称" path="name">
-                <n-input-group>
-                    <n-input-group-label>当前位置:{{ currentPath }}</n-input-group-label>
-                    <n-input v-model:value="formData.name" placeholder="请输入卷名称..."></n-input>
-                </n-input-group>
-            </n-form-item>
-            <n-form-item label="用户" path="user">
-                <n-input v-model:value="formData.user" placeholder="请输入用户名..."></n-input>
-            </n-form-item>
-            <n-form-item label="密码" path="password">
-                <n-input v-model:value="formData.password" type="password" show-password-on="click"
-                    placeholder="请输入密码..."></n-input>
-            </n-form-item>
-        </n-form>
-        <template #action>
-            <div>
-                <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
-                <n-button @Click="confirmCreateNamespace" type="primary">创建</n-button>
-            </div>
-        </template>
-    </n-modal>
+  <n-modal v-model:show="val" preset="dialog" title="创建卷命名空间">
+    <n-form ref="formRef" :rules="rules" :model="formData">
+      <n-form-item label="卷命名空间名称" path="name">
+        <n-input-group>
+          <n-input-group-label>当前位置:{{ currentPath }}</n-input-group-label>
+          <n-input
+            v-model:value="formData.name"
+            placeholder="请输入卷名称"
+          ></n-input>
+        </n-input-group>
+      </n-form-item>
+      <n-form-item label="用户" path="user">
+        <n-input
+          v-model:value="formData.user"
+          placeholder="请输入用户名"
+        ></n-input>
+      </n-form-item>
+      <n-form-item label="密码" path="password">
+        <n-input
+          v-model:value="formData.password"
+          type="password"
+          show-password-on="click"
+          placeholder="请输入密码"
+        ></n-input>
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <div>
+        <n-button @Click="cancel">取消</n-button> &nbsp;&nbsp;
+        <n-button type="primary" @Click="confirmCreateNamespace">创建</n-button>
+      </div>
+    </template>
+  </n-modal>
 </template>
 
 <script lang="ts" setup>
+import {
+  type FormInst,
+  type FormItemRule,
+  type FormRules,
+  messageDark,
+  NSelect,
+  useMessage,
+} from 'naive-ui'
+import { reactive, ref, watch } from 'vue'
+
+import router from '@/router'
 import { useBlockStore } from '@/store/blockStorageManagement/block'
-import { ref, reactive, watch } from 'vue'
-import { useMessage, type FormRules, type FormItemRule, NSelect, messageDark } from 'naive-ui';
-import router from '@/router';
 
-const blockStore = useBlockStore();
-const { createVolumeNamespace } = blockStore;
-let routePath = router.currentRoute.value.params.path;
-let currentPath = ref(routePath === '' ? '/' : '/' + routePath.join('/') + '/');
-const message = useMessage();
-const emit = defineEmits(['createNamespace']);
+const blockStore = useBlockStore()
+const { createVolumeNamespace } = blockStore
+let routePath = router.currentRoute.value.params.path
+let currentPath = ref(!routePath ? '/' : '/' + routePath.join('/') + '/')
+const message = useMessage()
+const emit = defineEmits(['createNamespace'])
+const formRef = ref<FormInst>()
 
 const formData = reactive({
-    name: "",
-    user: "",
-    password: ""
+  name: '',
+  user: '',
+  password: '',
 })
 
+const rules: FormRules = {
+  name: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入卷名称',
+  },
+
+  user: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入用户名',
+  },
+}
+
 const clearFormData = () => {
-    formData.name = "";
-    formData.user = "";
-    formData.password = "";
+  formData.name = ''
+  formData.user = ''
+  formData.password = ''
 }
 
 const confirmCreateNamespace = () => {
+  formRef.value?.validate(err => {
+    if (err) return message.error('请正确填写必填项内容')
     const params = {
-        name: currentPath.value + formData.name,
-        user: formData.user,
-        password: formData.password
+      name: currentPath.value + formData.name,
+      user: formData.user,
+      password: formData.password,
     }
     createVolumeNamespace(params).then(res => {
-        if (res.status === 200) {
-            message.success('创建卷名称成功')
-            cancel();
-            emit('createNamespace');
-            clearFormData();
-        } else {
-            message.error('创建命名空间失败，请检查填入的信息')
-        }
+      if (res.status === 200) {
+        message.success('创建卷名称成功')
+        cancel()
+        emit('createNamespace')
+        clearFormData()
+      } else {
+        message.error('创建命名空间失败，请检查填入的信息')
+      }
     })
+  })
 }
 
 let val = ref(false)
 //点击取消，关闭模态框
 const cancel = () => {
-    val.value = false
+  val.value = false
 }
 
 //展示模态框，供外部调用
 const showModal = () => {
-    val.value = true
+  val.value = true
 }
 
-watch(() => router.currentRoute.value, () => {
-    if(window.location.pathname.includes('volume-management')){
-    routePath = router.currentRoute.value.params.path;
-    currentPath.value = routePath === '' ? '/' : '/' + routePath.join('/') + '/';
+watch(
+  () => router.currentRoute.value,
+  () => {
+    if (window.location.pathname.includes('volume-management')) {
+      routePath = router.currentRoute.value.params.path
+      currentPath.value = !routePath ? '/' : '/' + routePath.join('/') + '/'
     }
-})
+  },
+)
 
 defineExpose({ showModal })
 </script>
-
-<style></style>
-
diff --git a/src/views/storagePool/index.vue b/src/views/storagePool/index.vue
index 83e601e..9b0539b 100644
--- a/src/views/storagePool/index.vue
+++ b/src/views/storagePool/index.vue
@@ -33,7 +33,8 @@ const columns: DataTableColumns<StoragePoolInfo> = [
             padding: '0 4px',
           },
           quaternary: true,
-          onClick: () => router.push(`/storagepool-detail/${row.id}`),
+          onClick: () =>
+            router.push({ name: 'StoragePoolDetail', params: { id: row.id } }),
         },
         { default: () => row.name },
       )
diff --git a/src/views/users/ChangeEmail.vue b/src/views/users/ChangeEmail.vue
index 7821781..30c384f 100644
--- a/src/views/users/ChangeEmail.vue
+++ b/src/views/users/ChangeEmail.vue
@@ -1,182 +1,182 @@
 <template>
-      <div class="login">
-        <n-form ref="formRef" :rules="rules" :model="model">
-          <n-form-item path="oldAccount" label="当前账号">
-            <n-input
-              @keydown.enter.prevent
-              v-model:value="model.oldAccount"
-              placeholder="请输入当前使用的邮箱"
-              type="text"
-              label="当前邮箱"
-            />
-          </n-form-item>
-          <n-form-item path="newAccount" label="新账号">
-            <n-input
-              type="text"
-              @keydown.enter.prevent
-              placeholder="请输入新账号"
-              v-model:value="model.newAccount"
-            />
-          </n-form-item>
-          <n-form-item
-            ref="reEnterPasswordFormItemRef"
-            first
-            path="reEnteredAccount"
-            label="确认新账号"
-          >
-            <n-input
-              type="password"
-              placeholder="请再次输入新账号"
-              v-model:value="model.reEnteredAccount"
-              @keydown.enter.prevent
-            />
-          </n-form-item>
-          <n-row :gutter="[0, 24]">
-            <n-col :span="24">
-              <div style="display: flex; justify-content: flex-end">
-                <n-button round type="primary" @click="confirmChangeAccount">
-                  确认更改
-                </n-button>
-              </div>
-            </n-col>
-          </n-row>
-        </n-form>
-      </div>
-    <!-- </n-card> -->
-  </template>
-  
-  <script setup lang="ts">
-  import {
-    NCard,
-    NRow,
-    NCol,
-    NForm,
-    NFormItem,
-    NInput,
-    NButton,
-    useMessage,
-    type FormItemRule,
-  } from 'naive-ui'
-  import type { FormRules } from 'naive-ui'
-  import { useUserStore } from '@/store/user'
-  import { ref } from 'vue'
-  import md5 from 'js-md5'
-  import router from '@/router'
-  
-  const userStore = useUserStore()
-  const userName = userStore.state.name;
-  
-  const checkPasswordFormat = (rule: FormItemRule, value: string) => {
-    let checkFormat = /.*[A-Z@#$%^&+=!*()_?].*/;
-      let checkLength = /^.{6,64}$/;
-    return checkFormat.test(value) && checkLength.test(value)
+  <div class="login">
+    <n-form ref="formRef" :rules="rules" :model="model">
+      <n-form-item path="oldAccount" label="当前邮箱">
+        <!-- <n-input
+          v-model:value="model.oldAccount"
+          placeholder="请输入当前使用的邮箱"
+          type="text"
+          label="当前邮箱"
+          @keydown.enter.prevent
+        /> -->
+        {{ userStore.state.email }}
+      </n-form-item>
+      <n-form-item path="newAccount" label="新邮箱">
+        <n-input
+          v-model:value="model.newAccount"
+          type="text"
+          placeholder="请输入新邮箱"
+          @keydown.enter.prevent
+        />
+      </n-form-item>
+      <n-form-item
+        ref="reEnterPasswordFormItemRef"
+        first
+        path="reEnteredAccount"
+        label="确认新邮箱"
+      >
+        <n-input
+          v-model:value="model.reEnteredAccount"
+          type="password"
+          placeholder="请再次输入新邮箱"
+          @keydown.enter.prevent
+        />
+      </n-form-item>
+      <n-row :gutter="[0, 24]">
+        <n-col :span="24">
+          <div style="display: flex; justify-content: flex-end">
+            <n-button round type="primary" @click="confirmChangeAccount">
+              确认更改
+            </n-button>
+          </div>
+        </n-col>
+      </n-row>
+    </n-form>
+  </div>
+  <!-- </n-card> -->
+</template>
+
+<script setup lang="ts">
+import md5 from 'js-md5'
+import type { FormRules } from 'naive-ui'
+import {
+  type FormItemRule,
+  NButton,
+  NCard,
+  NCol,
+  NForm,
+  NFormItem,
+  NInput,
+  NRow,
+  useMessage,
+} from 'naive-ui'
+import { ref } from 'vue'
+
+import router from '@/router'
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+const userName = userStore.state.name
+
+const checkPasswordFormat = (rule: FormItemRule, value: string) => {
+  let checkFormat = /.*[A-Z@#$%^&+=!*()_?].*/
+  let checkLength = /^.{6,64}$/
+  return checkFormat.test(value) && checkLength.test(value)
+}
+
+interface ModelType {
+  oldAccount: string | null
+  newAccount: string | null
+  reEnteredAccount: string | null
+}
+const model = ref<ModelType>({
+  oldAccount: userStore.state.email,
+  newAccount: '',
+  reEnteredAccount: '',
+})
+const message = useMessage()
+
+const validateAccountSame = (rule: FormItemRule, value: string): boolean => {
+  return value === model.value.newAccount
+}
+//校验规则函数
+const checkEmailFormat = (rule: FormItemRule, value: string): boolean => {
+  let check = /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/
+  return check.test(value)
+}
+const rules: FormRules = {
+  oldAccount: [
+    {
+      validator: checkEmailFormat,
+      message: '请输入正确邮箱格式',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  newAccount: [
+    {
+      validator: checkEmailFormat,
+      message: '请输入正确邮箱格式',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  reEnteredAccount: [
+    {
+      required: true,
+      message: '请再次输入密码',
+      trigger: ['input', 'blur'],
+    },
+    {
+      validator: validateAccountSame,
+      message: '两次输入的密码不一致',
+      trigger: ['blur'],
+    },
+  ],
+}
+
+const confirmChangeAccount = () => {
+  if (
+    model.value.newAccount === null ||
+    model.value.oldAccount === null ||
+    model.value.reEnteredAccount === null
+  ) {
+    message.error('请填写必要的信息')
+    return
+  } else if (model.value.newAccount !== model.value.reEnteredAccount) {
+    message.error('两次输入的邮箱不一致')
+    return
   }
-  
-  interface ModelType {
-    oldAccount: string | null
-    newAccount: string | null
-    reEnteredAccount: string | null
-  }
-  const model = ref<ModelType>({
-    oldAccount: "",
-    newAccount: "",
-    reEnteredAccount: "",
-  })
-  const message = useMessage()
-  
-  const validateAccountSame = (rule: FormItemRule, value: string): boolean => {
-    return value === model.value.newAccount
-  }
-  
-  const rules: FormRules = {
-    oldAccount: [
-      {
-        required: true,
-        message: '请输入当前账号',
-        trigger: ['input', 'blur'],
-      },
-    ],
-    newAccount: [
-      {
-        required: true,
-        message: '请输入新账号',
-        trigger: ['input', 'blur'],
-      },
-      // {
-      //   validator: checkPasswordFormat,
-      //   message: '密码由数字,大小写字母,特殊字符组成,长度6-64,至少包含数字,大小写字母,特殊字符中的两种',
-      //   trigger: ['input', 'blur'],
-      // },
-    ],
-    reEnteredAccount: [
-      {
-        required: true,
-        message: '请再次输入密码',
-        trigger: ['input', 'blur'],
-      },
-      {
-        validator: validateAccountSame,
-        message: '两次输入的密码不一致',
-        trigger: ['blur'],
-      },
-    ],
-  }
-  
-  const confirmChangeAccount = () => { 
-    if (
-      model.value.newAccount === null ||
-      model.value.oldAccount === null ||
-      model.value.reEnteredAccount === null
-    ) {
-      message.error('请填写必要的信息')
-      return
-    } else if (model.value.newAccount !== model.value.reEnteredAccount) {
-      message.error('两次输入的账号不一致')
-      return
-    } 
-    // else if(!checkPasswordFormatResult) {
-    //   message.error('请按照格式要求输入正确的密码')
-    //     return
-    // }
-    else {
-      const params = {
-        email: model.value.newAccount
-      }
-      userStore.changeAccount(params).then(res => {
-        if (res?.data.errorCode === '0') {
-          message.info('修改账号成功，请重新登录')
-          userStore.handleLogout()
-          router.push({ path: '/login' })
-        } else {
-          message.error('修改账号失败')
-        }
-      })
+  // else if(!checkPasswordFormatResult) {
+  //   message.error('请按照格式要求输入正确的密码')
+  //     return
+  // }
+  else {
+    const params = {
+      email: model.value.newAccount,
     }
+    userStore.changeAccount(params).then(res => {
+      if (res?.data.errorCode === '0') {
+        message.info('修改邮箱成功，请重新登录')
+        userStore.handleLogout()
+        router.push({ path: '/login' })
+      } else {
+        message.error('修改邮箱失败')
+      }
+    })
   }
-  </script>
-  
-  <style scoped lang="scss">
-  .login-wrap {
-    margin: 25px;
-    .login {
-      width: 450px;
-      margin: 180px auto;
-      border: 1px solid #efefef;
-      padding: 20px;
-      border-radius: 10px;
-  
-      .logo {
-        flex: 1 1 auto;
-        margin-top: 10px;
-        margin-bottom: 15px;
-        margin-left: 5px;
-        color: rgb(52, 52, 200);
-  
-        h3 {
-          text-align: center;
-        }
+}
+</script>
+
+<style scoped lang="scss">
+.login-wrap {
+  margin: 25px;
+  .login {
+    width: 450px;
+    margin: 180px auto;
+    border: 1px solid #efefef;
+    padding: 20px;
+    border-radius: 10px;
+
+    .logo {
+      flex: 1 1 auto;
+      margin-top: 10px;
+      margin-bottom: 15px;
+      margin-left: 5px;
+      color: rgb(52, 52, 200);
+
+      h3 {
+        text-align: center;
       }
     }
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>
diff --git a/src/views/users/PersonalInfo.vue b/src/views/users/PersonalInfo.vue
index 2fff536..a9fbdb9 100644
--- a/src/views/users/PersonalInfo.vue
+++ b/src/views/users/PersonalInfo.vue
@@ -1,69 +1,64 @@
 <template>
-    <n-list bordered>
-        <template #header>
-            个人信息
-        </template>
+  <n-list bordered>
+    <template #header> 个人信息 </template>
 
-        <n-list-item>
-            <n-thing title="用户名">
-                {{ state.name }}
-            </n-thing>
-        </n-list-item>
+    <n-list-item>
+      <n-thing title="用户名">
+        {{ state.name }}
+      </n-thing>
+    </n-list-item>
 
-        <n-list-item>
-            <template #suffix>
-                <n-button @click="showEmailChangeModal">修改账号</n-button>
-            </template>
-            <n-thing title="我的账号">
-                {{ state.email }}
-            </n-thing>
-        </n-list-item>
+    <n-list-item>
+      <template #suffix>
+        <n-button @click="showEmailChangeModal">修改邮箱</n-button>
+      </template>
+      <n-thing title="我的邮箱">
+        {{ state.email }}
+      </n-thing>
+    </n-list-item>
 
-        <n-list-item>
-            <n-thing title="我的密码">
-                **********
-            </n-thing>
-            <template #suffix>
-                <n-button @click="showPasswordChangeModal">修改密码</n-button>
-            </template>
-        </n-list-item>
-    </n-list>
-    <n-modal v-model:show="showChangeEmail" title="修改账号">
-        <n-card present="card" title="修改账号">
-            <ChangeEmail />
-        </n-card>
-    </n-modal>
-    <n-modal v-model:show="showChangePassword" title="修改密码">
-        <n-card present="card" title="重置密码">
-            <ChangePassword />
-        </n-card>
-    </n-modal>
+    <n-list-item>
+      <n-thing title="我的密码"> ********** </n-thing>
+      <template #suffix>
+        <n-button @click="showPasswordChangeModal">修改密码</n-button>
+      </template>
+    </n-list-item>
+  </n-list>
+  <n-modal v-model:show="showChangeEmail" title="修改账号">
+    <n-card present="card" title="修改账号">
+      <ChangeEmail />
+    </n-card>
+  </n-modal>
+  <n-modal v-model:show="showChangePassword" title="修改密码">
+    <n-card present="card" title="重置密码">
+      <ChangePassword />
+    </n-card>
+  </n-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import { NList, NModal, NCard } from "naive-ui"
-import { useUserStore } from "../../store/user"
-import ChangePassword from "./ChangePassword.vue"
-import ChangeEmail from "./ChangeEmail.vue"
+import { NCard, NList, NModal } from 'naive-ui'
+import { ref } from 'vue'
 
+import { useUserStore } from '../../store/user'
+import ChangeEmail from './ChangeEmail.vue'
+import ChangePassword from './ChangePassword.vue'
 
-const { state } = useUserStore();
-const showChangePassword = ref(false);
-const showChangeEmail = ref(false);
-
+const { state } = useUserStore()
+const showChangePassword = ref(false)
+const showChangeEmail = ref(false)
 
 const showEmailChangeModal = () => {
-    showChangeEmail.value = true
+  showChangeEmail.value = true
 }
 
 const showPasswordChangeModal = () => {
-    showChangePassword.value = true
+  showChangePassword.value = true
 }
 </script>
 
 <style lang="scss" scoped>
 .n-card {
-    max-width: 300px;
+  max-width: 300px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/types/index.d.ts b/types/index.d.ts
index 6982d52..72dd7e4 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -4,3 +4,8 @@ export interface ChartSeries {
   data: chartData
   name: string
 }
+
+export type Recordable<T = any> = Record<string, T>
+export interface Fn<T = any, R = T> {
+  (...arg: T[]): R
+}
diff --git a/types/router.ts b/types/router.ts
new file mode 100644
index 0000000..1f98b8c
--- /dev/null
+++ b/types/router.ts
@@ -0,0 +1,19 @@
+import 'vue-router'
+
+import type { VNodeChild } from 'vue'
+
+declare module 'vue-router' {
+  // RouteMeta只能确保这里已经写入的类型的正确性，同时，它支持写入其他未定义的类型，并且不会验证类型。
+  interface RouteMeta {
+    title?: string // 目前menu列表，页面title，面包屑名称 都用这个字段
+    hidden?: boolean // 是否在menu中隐藏
+
+    // 当前路由对应的激活menu，不配置，默认指向当前路由的name，有些路由不用展示在左侧，例如各种详情，但是左侧要匹配一个高亮。
+    // 有该值，就不再使用title在menu中显示了。
+    activeMenu?: string
+
+    icon?: () => VNodeChild // menu图标
+    keepAlive?: string // 缓存该路由
+    permissions?: (string | number)[] // 路由需要验证的权限列表
+  }
+}