diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca320ce9d974c84c4afef6bb1291f320fd9cb444
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,10 @@
+import request from './config'
+
+// 获取审计日志列表和系统日志列表
+export function getVersionApi(params) {
+  return request({
+    url: '/version',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/api/node_group.js b/src/api/node_group.js
index fa192366829912278234710290063d0d611be0d3..7156c3d3b5854e7d1fb6a95b7be86731baf28ca6 100644
--- a/src/api/node_group.js
+++ b/src/api/node_group.js
@@ -1,85 +1,85 @@
-import axios from './config'
-
-// 节点分组查询
-export function listGroup(data) {
-  return axios({
-    url: '/nodeGroup/list',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-// 节点分组新增
-export function addGroup(data) {
-  return axios({
-    url: '/nodeGroup/add',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-// 节点分组修改
-export function updateGroup(data) {
-  return axios({
-    url: '/nodeGroup/update',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-// 节点分组删除
-export function deleteGroup(data) {
-  return axios({
-    url: '/nodeGroup/delete',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-// 查询分组节点列表
-export function nodelist(data) {
-  return axios({
-    url: '/nodegroupinfo/nodelist',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-// 分组添加节点
-export function addnode(data) {
-  return axios({
-    url: '/nodegroupinfo/addnode',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-// 分组删除节点
-export function deletenode(data) {
-  return axios({
-    url: '/nodegroupinfo/deletenode',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
+import axios from './config'
+
+// 节点分组查询
+export function listGroup(data) {
+  return axios({
+    url: '/nodeGroup/list',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 节点分组新增
+export function addGroup(data) {
+  return axios({
+    url: '/nodeGroup/add',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 节点分组修改
+export function updateGroup(data) {
+  return axios({
+    url: '/nodeGroup/update',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 节点分组删除
+export function deleteGroup(data) {
+  return axios({
+    url: '/nodeGroup/delete',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 查询分组节点列表
+export function nodelist(data) {
+  return axios({
+    url: '/nodegroupinfo/nodelist',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 分组添加节点
+export function addnode(data) {
+  return axios({
+    url: '/nodegroupinfo/addnode',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 分组删除节点
+export function deletenode(data) {
+  return axios({
+    url: '/nodegroupinfo/deletenode',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/node_package.js b/src/api/node_package.js
index cfbb59c68a2e3ddbf0e328be582af2c882344c82..e63b4dc12c7eea782cedee52cdeed3c7450f1951 100644
--- a/src/api/node_package.js
+++ b/src/api/node_package.js
@@ -1,99 +1,138 @@
-import request from './config'
-// import qs from 'qs'
-
-export function addPackageTask(data) {
-  return request({
-    url: '/node/putToTaskQueue',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    method: 'post',
-    data
-  })
-}
-
-export function getTaskStatus(data) {
-  return request({
-    url: '/node/getTaskStatus',
-    method: 'post',
-    data
-  })
-}
-
-export function startThread(data) {
-  return request({
-    url: '/node/threadServiceRunner',
-    method: 'post',
-    data
-  })
-}
-
-export function getPackageList(data) {
-  return request({
-    url: '/node/getPackageInfo',
-    method: 'post',
-    data
-  })
-}
-
-export function delTaskById(data) {
-  return request({
-    url: '/node/delTaskById',
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    data
-  })
-}
-
-export function setTaskViewed(data) {
-  return request({
-    url: '/node/setTaskViewed',
-    method: 'post',
-    data
-  })
-}
-
-export function getInstallablePackage(data) {
-  return request({
-    timeout: 0,
-    url: '/node/getSourcePackageInfo',
-    method: 'post',
-    data: data
-  })
-}
-
-export function getInstallablePackageByKeyword(data) {
-  return request({
-    url: '/node/searchSourcePackageInfo',
-    method: 'post',
-    data,
-    headers: {
-      tip: 'no'
-    }
-  })
-}
-
-export function getUpdateablePackage(nodeId) {
-  return request({
-    headers: {
-      tip: 'no'
-    },
-    url: '/node/getUpgradeable',
-    method: 'post',
-    data: { nodeId }
-  })
-}
-
-export function queryDependency(data) {
-  return request({
-    headers: {
-      tip: 'no',
-      'Content-Type': 'application/json; charset=UTF-8'
-    },
-    url: '/pkg/queryDependency?nodeId=' + data.nodeId,
-    method: 'post',
-    data: { packageName: data.packageName }
-  })
-}
+import request from './config'
+// import qs from 'qs'
+
+export function addPackageTask(data) {
+  return request({
+    url: '/node/putToTaskQueue',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+export function getTaskStatus(data) {
+  return request({
+    url: '/node/getTaskStatus',
+    method: 'post',
+    data
+  })
+}
+
+export function startThread(data) {
+  return request({
+    url: '/node/threadServiceRunner',
+    method: 'post',
+    data
+  })
+}
+
+// 获取软件包列表数据
+export function getPackageList(data) {
+  return request({
+    url: '/getPackageInfo',
+    method: 'post',
+    data,
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    }
+  })
+}
+// 软件包列表刷新
+export function refreshPackageList(data) {
+  return request({
+    url: '/packageRefresh',
+    method: 'post',
+    data
+  })
+}
+
+// 删除任务记录
+export function delTaskById(data) {
+  return request({
+    url: '/node/delTaskById',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    data
+  })
+}
+
+// 修改任务为已读状态
+export function setTaskViewed(data) {
+  return request({
+    url: '/node/setTaskViewed',
+    method: 'post',
+    data
+  })
+}
+
+// 获取当前节点可安装的软件包列表
+export function getInstallablePackage(data) {
+  return request({
+    timeout: 0,
+    url: '/node/getSourcePackageInfo',
+    method: 'post',
+    data: data
+  })
+}
+
+// 根据关键字获取节点可安装的软件包
+export function getInstallablePackageByKeyword(data) {
+  return request({
+    url: '/node/searchSourcePackageInfo',
+    method: 'post',
+    data,
+    headers: {
+      tip: 'no'
+    }
+  })
+}
+
+// 获取可升级软件包列表
+export function getUpdateablePackage(nodeId) {
+  return request({
+    headers: {
+      tip: 'no'
+    },
+    url: '/node/getUpgradeable',
+    method: 'post',
+    data: { nodeId }
+  })
+}
+
+// 获取安装软件依赖包
+export function queryDependency(data) {
+  return request({
+    headers: {
+      tip: 'no',
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    url: '/pkg/queryDependency?nodeId=' + data.nodeId,
+    method: 'post',
+    data: { packageName: data.packageName }
+  })
+}
+
+// 查询软件包下服务器
+export function getNodeByPkgName(data) {
+  return request({
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    url: '/getNodeByPkgName',
+    method: 'post',
+    data
+  })
+}
+
+// 查询系统内软件包总数量
+export function getAllPkgCount(data) {
+  return request({
+    url: '/getAllPkgCount',
+    method: 'get',
+    data
+  })
+}
diff --git a/src/components/custom-table/index.vue b/src/components/custom-table/index.vue
index d4d0282212018e5459dfc5d4e563d78d1e974ae4..baf63809bb2ad3e38f9f129903d37046ee2c7b64 100644
--- a/src/components/custom-table/index.vue
+++ b/src/components/custom-table/index.vue
@@ -1,136 +1,142 @@
-<script>
-export default {
-  name: 'CustomTable',
-  props: {
-    dataSource: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    scrollX: {
-      type: Number,
-      default: 500
-    },
-    pagination: {
-      type: [Boolean, Object],
-      default() {
-        return {
-          current: 1,
-          size: 10,
-          total: 0
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      tableHeight: 0,
-      toTimer: null,
-      ivTimer: null
-    }
-  },
-  watch: {
-    dataSource: {
-      handler(val) {
-        if (this.ivTimer != null) {
-          clearInterval(this.ivTimer)
-          this.ivTimer == null
-        }
-        const tbody = document.querySelector('.ant-table-body')
-        let top = tbody.scrollTop || 0
-        this.ivTimer = setInterval(() => {
-          top -= 30
-          if (top < 0) {
-            top = 0
-            clearInterval(this.ivTimer)
-            this.ivTimer = null
-          }
-          tbody.scrollTo(0, top)
-        }, 10)
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    this.getTableHeight()
-    window.addEventListener('resize', this.getTableHeight)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.getTableHeight)
-  },
-  methods: {
-    getTableHeight() {
-      if (this.toTimer != null) return
-      this.toTimer = setTimeout(() => {
-        const { filter, tableWrap, pagination } = this.$refs
-        this.tableHeight = tableWrap.clientHeight - (filter?.clientHeight + 11 || 0) - (pagination?.clientHeight || 0)
-        this.toTimer = null
-      }, 100)
-    },
-    pageChange(current, size) {
-      const pagination = { ...this.pagination, current, size }
-      this.$emit('on-pagination', pagination)
-    }
-  },
-  render() {
-    const { $slots, $scopedSlots, $attrs, $props, $listeners } = this
-    const props = { ...$attrs, ...$props }
-    delete props.pagination
-    return (
-      <div ref='tableWrap' class='table-wrap'>
-        {/* 搜索 */}
-        {$slots.filter && <div ref='filter' class='filter'>{this.$slots.filter}</div>}
-        {/* 表格 */}
-        <div class='table'>
-          <a-table
-            ref='table'
-            bordered
-            rowKey={(record, index) => index}
-            props={props}
-            pagination={false}
-            style={{ height: this.tableHeight + 'px' }}
-            scroll={{ x: this.scrollX, y: this.tableHeight - 55 }}
-            scopedSlots={$scopedSlots}
-            on={$listeners}
-          />
-        </div>
-        {/* 分页 */}
-        {
-          this.pagination && <div ref='pagination' class='pagination'>
-            <a-pagination
-              current={this.pagination.current}
-              pageSize={this.pagination.size}
-              pageSizeOptions={['10', '20', '30', '50']}
-              total={this.pagination.total}
-              showTotal={(total) => `共${total}条`}
-              showSizeChanger={true}
-              onChange={this.pageChange}
-              onShowSizeChange={this.pageChange}
-            />
-          </div>
-        }
-      </div>
-    )
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.table-wrap{
-    width: 100%;
-    height: 100%;
-    .filter{
-        > span{
-            display: inline-block;
-        }
-    }
-    .pagination{
-        padding-top: 10px;
-        .ant-pagination{
-            display: flex;
-            justify-content: flex-end;
-        }
-    }
-}
-</style>
+<script>
+export default {
+  name: 'CustomTable',
+  props: {
+    dataSource: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    scrollX: {
+      type: Number,
+      default: 500
+    },
+    pagination: {
+      type: [Boolean, Object],
+      default() {
+        return {
+          current: 1,
+          size: 10,
+          total: 0
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      tableHeight: 0,
+      toTimer: null,
+      ivTimer: null
+    }
+  },
+  watch: {
+    dataSource: {
+      handler(val) {
+        // 表格数据改变滚动条过渡回到顶部
+        if (this.ivTimer != null) {
+          clearInterval(this.ivTimer)
+          this.ivTimer == null
+        }
+        const tbody = document.querySelector('.ant-table-body')
+        let top = tbody.scrollTop || 0
+        this.ivTimer = setInterval(() => {
+          top -= 30
+          if (top < 0) {
+            top = 0
+            clearInterval(this.ivTimer)
+            this.ivTimer = null
+          }
+          tbody.scrollTo(0, top)
+        }, 10)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 初次获取表格高度
+    this.getTableHeight()
+    // 窗口改变获取表格高度
+    window.addEventListener('resize', this.getTableHeight)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.getTableHeight)
+  },
+  methods: {
+    getTableHeight() {
+      // 节流
+      if (this.toTimer != null) return
+      this.toTimer = setTimeout(() => {
+        const { filter, tableWrap, pagination } = this.$refs
+        this.tableHeight = tableWrap.clientHeight - (filter?.clientHeight + 11 || 0) - (pagination?.clientHeight || 0)
+        this.toTimer = null
+      }, 100)
+    },
+    // 页码及每页条数改变
+    pageChange(current, size) {
+      const pagination = { ...this.pagination, current, size }
+      // 修改父组件分页对象
+      this.$emit('on-pagination', pagination)
+    }
+  },
+  render() {
+    const { $slots, $scopedSlots, $attrs, $props, $listeners } = this
+    const props = { ...$attrs, ...$props }
+    delete props.pagination
+    return (
+      <div ref='tableWrap' class='table-wrap'>
+        {/* 搜索 */}
+        {$slots.filter && <div ref='filter' class='filter'>{this.$slots.filter}</div>}
+        {/* 表格 */}
+        <div class='table'>
+          <a-table
+            ref='table'
+            bordered
+            rowKey={(record, index) => index}
+            props={props}
+            pagination={false}
+            style={{ height: this.tableHeight + 'px' }}
+            scroll={{ x: this.scrollX, y: this.tableHeight - 55 }}
+            scopedSlots={$scopedSlots}
+            on={$listeners}
+          />
+        </div>
+        {/* 分页 */}
+        {
+          this.pagination && <div ref='pagination' class='pagination'>
+            <a-pagination
+              current={this.pagination.current}
+              pageSize={this.pagination.size}
+              pageSizeOptions={['10', '20', '30', '50']}
+              total={this.pagination.total}
+              showTotal={(total) => `共${total}条`}
+              showSizeChanger={true}
+              onChange={this.pageChange}
+              onShowSizeChange={this.pageChange}
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-wrap{
+    width: 100%;
+    height: 100%;
+    .filter{
+        > span{
+            display: inline-block;
+        }
+    }
+    .pagination{
+        padding-top: 10px;
+        .ant-pagination{
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+}
+</style>
diff --git a/src/components/draggable-table/index.vue b/src/components/draggable-table/index.vue
index 83e70f124d915fc7b8763aabb09ee115652615d7..44cc81661c7ccc4a3f6c78b9325b75449d6542be 100644
--- a/src/components/draggable-table/index.vue
+++ b/src/components/draggable-table/index.vue
@@ -1,66 +1,67 @@
-<script>
-export default {
-  name: 'DraggabledTable',
-  render() {
-    const { $slots, $scopedSlots, $attrs, $props, $listeners } = this
-    const props = { ...$attrs, ...$props }
-    const resizeableTitle = {
-      header: {
-        cell(h, props, children) {
-          const { key, ...restProps } = props
-          const col = $attrs.columns.find((col) => {
-            const k = col.dataIndex || col.key
-            return k === key
-          })
-          if (!col?.width) {
-            return <th {...restProps}>{children}</th>
-          }
-          const onDrag = (x) => {
-            col.width = Math.max(x, 50)
-          }
-          return (
-            <th {...restProps} width={col.width} class='resize-table-th'>
-              {children}
-              <vue-draggable-resizable
-                style={{ transform: `translate(${col.width}px, 0px)` }}
-                key={col.key}
-                class='table-draggable-handle'
-                w={10}
-                x={col.width}
-                z={1}
-                axis='x'
-                draggable={true}
-                resizable={false}
-                onDragging={onDrag}
-              />
-            </th>
-          )
-        }
-      }
-    }
-    return <a-table
-      props={props}
-      scopedSlots={ $scopedSlots }
-      on={$listeners}
-      components={resizeableTitle}
-    >
-      {Object.keys($slots).map(slot => <template slot={slot}>{ $slots[slot] }</template>)}
-    </a-table>
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .resize-table-th {
-  position: relative;
-  .table-draggable-handle {
-    height: 100% !important;
-    bottom: 0;
-    left: -10px !important;
-    cursor: col-resize;
-    touch-action: none;
-    position: absolute;
-    border: 1px solid red;
-  }
-}
-</style>
\ No newline at end of file
+<script>
+export default {
+  name: 'DraggabledTable',
+  render() {
+    const { $slots, $scopedSlots, $attrs, $props, $listeners } = this
+    const props = { ...$attrs, ...$props }
+    const resizeableTitle = {
+      header: {
+        cell(h, props, children) {
+          const { key, ...restProps } = props
+          const col = $attrs.columns.find((col) => {
+            const k = col.dataIndex || col.key
+            return k === key
+          })
+          if (!col?.width) {
+            return <th {...restProps}>{children}</th>
+          }
+          const onDrag = (x) => {
+            col.width = Math.max(x, 50)
+          }
+          return (
+            <th {...restProps} width={col.width} class='resize-table-th'>
+              {children}
+              <vue-draggable-resizable
+                style={{ transform: `translate(${col.width}px, 0px)` }}
+                key={col.key}
+                class='table-draggable-handle'
+                w={10}
+                x={col.width}
+                z={1}
+                axis='x'
+                draggable={true}
+                resizable={false}
+                onDragging={onDrag}
+              />
+            </th>
+          )
+        }
+      }
+    }
+    // 使用jsx渲染方式
+    return <a-table
+      props={props}
+      scopedSlots={ $scopedSlots }
+      on={$listeners}
+      components={resizeableTitle}
+    >
+      {Object.keys($slots).map(slot => <template slot={slot}>{ $slots[slot] }</template>)}
+    </a-table>
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .resize-table-th {
+  position: relative;
+  .table-draggable-handle {
+    height: 100% !important;
+    bottom: 0;
+    left: -10px !important;
+    cursor: col-resize;
+    touch-action: none;
+    position: absolute;
+    border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/pages/install/index.vue b/src/pages/install/index.vue
index 569483b3c20b7543c5dc84821072d222d208cb87..33b35fa4f7ebea4926526b73be2bfe431ff37ac6 100644
--- a/src/pages/install/index.vue
+++ b/src/pages/install/index.vue
@@ -1,146 +1,163 @@
-<template>
-  <div class="init-wrapper">
-    <svg width="100%" height="100%" viewBox="0 0 1440 500" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g>
-        <circle stroke="#13C2C2" cx="500" cy="-20" r="6" />
-        <circle fill-opacity="0.4" fill="#9EE6E6" cx="166" cy="76" r="8" />
-        <circle stroke="#13C2C2" cx="1165" cy="240" r="5" />
-        <circle stroke="#CED4D9" cx="1300" cy="10" r="8" />
-        <circle stroke="#ffffff" cx="1326.5" cy="180" r="6" />
-        <circle fill-opacity="0.4" fill="#9EE6E6" cx="944" cy="250" r="5" />
-      </g>
-      <g>
-        <path
-          d="M1182.79367,448.230356 L1186.00213,453.787581 C1186.55442,454.744166 1186.22667,455.967347 1185.27008,456.519632 C1184.96604,456.695168 1184.62116,456.787581 1184.27008,456.787581 L1177.85315,456.787581 C1176.74858,456.787581 1175.85315,455.89215 1175.85315,454.787581 C1175.85315,454.436507 1175.94556,454.091619 1176.1211,453.787581 L1179.32957,448.230356 C1179.88185,447.273771 1181.10503,446.946021 1182.06162,447.498305 C1182.36566,447.673842 1182.61813,447.926318 1182.79367,448.230356 Z"
-          stroke="#CED4D9"
-        />
-        <path
-          d="M1376.79367,204.230356 L1380.00213,209.787581 C1380.55442,210.744166 1380.22667,211.967347 1379.27008,212.519632 C1378.96604,212.695168 1378.62116,212.787581 1378.27008,212.787581 L1371.85315,212.787581 C1370.74858,212.787581 1369.85315,211.89215 1369.85315,210.787581 C1369.85315,210.436507 1369.94556,210.091619 1370.1211,209.787581 L1373.32957,204.230356 C1373.88185,203.273771 1375.10503,202.946021 1376.06162,203.498305 C1376.36566,203.673842 1376.61813,203.926318 1376.79367,204.230356 Z"
-          stroke="#2F54EB"
-        />
-      </g>
-      <g>
-        <rect stroke="#13C2C2" stroke-opacity="0.6" x="120" y="322" width="12" height="12" rx="1" />
-        <rect stroke="#CED4D9" x="108" y="1" width="9" height="9" rx="1" />
-      </g>
-    </svg>
-    <a-card class="login-card" hoverable>
-      <a-card-meta title="初始化管理员账户" style="textalign: center" />
-      <br>
-      <a-form :form="loginForm" :label-col="{ span: 0 }" class="init-form" @submit="handleLogin">
-        <a-form-item :wrapper-col="{ span: 24 }" class="init-user-name">
-          <a-input v-decorator="['userName', { rules: [{ required: true, message: '请输入账户名称' },{min:3,max:20,message:'账号名称长度为3~20位'}] }]" placeholder="账户名称" />
-        </a-form-item>
-        <a-form-item :wrapper-col="{ span: 24 }" class="init-user-password">
-          <a-input-password
-            v-decorator="[
-              'userPwd',
-              {
-                rules: [
-                  { required: true, message: '请输入密码' },
-                  { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{9,50}$/, message: '密码至少包含大小写字母、数字、特殊字符，长度为9~50' },
-                ],
-              },
-            ]"
-            placeholder="密码至少包含大小写字母、数字、特殊字符，长度为9~50"
-          />
-        </a-form-item>
-        <a-button type="primary" html-type="submit" class="btn"> 创建并登录 </a-button>
-      </a-form>
-    </a-card>
-  </div>
-</template>
-
-<script>
-import { initInstall } from '../../api/install'
-import sha1 from 'sha1'
-export default {
-  data() {
-    return {
-      loginForm: this.$form.createForm(this, { name: 'login-form' })
-    }
-  },
-  methods: {
-    handleLogin(e) {
-      e.preventDefault()
-      this.loginForm.validateFields((err, values) => {
-        if (!err) {
-          if (!this.checkPasswordStrong(values.userPwd)) {
-            this.$notification.error({
-              message: '系统管理员密码强度太低',
-              duration: 2
-            })
-            return false
-          }
-          const params = {
-            ...values,
-            userPwd: sha1(values.userPwd)
-          }
-          initInstall(params).then((res) => {
-            if (res.code === 200) {
-              this.$notification.success({
-                message: res.msg,
-                duration: 2
-              })
-              this.$store.dispatch('login', { token: res.data.token, longTermToken: res.data.longTermToken }).then(() => {
-                this.$router.push({ path: '/' })
-              })
-            }
-          })
-        }
-      })
-    },
-    checkPasswordStrong(fieldValue) {
-      function checkStrong(sPW) {
-        let Modes = 0
-        for (let i = 0; i < sPW.length; i++) {
-          Modes |= CharMode(sPW.charCodeAt(i))
-        }
-        return bitTotal(Modes)
-      }
-
-      function CharMode(iN) {
-        if (iN >= 48 && iN <= 57) { return 1 }
-        if (iN >= 65 && iN <= 90) { return 2 }
-        if (iN >= 97 && iN <= 122) { return 4 } else return 8 // 特殊字符
-      }
-
-      function bitTotal(num) {
-        var modes = 0
-        for (let i = 0; i < 4; i++) {
-          if (num & 1) modes++
-          num >>>= 1
-        }
-        return modes
-      }
-      if (!fieldValue || fieldValue === '') {
-        return false
-      }
-      return checkStrong(fieldValue) >= 3
-    }
-  }
-}
-</script>
-
-<style scoped>
-.init-wrapper {
-  width: 100vw;
-  height: 100vh;
-  background: #f6f6f6;
-  overflow: hidden;
-}
-.login-card {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  text-align: left;
-  min-width: 380px;
-  border-radius: 6px;
-  padding: 4px;
-}
-.btn {
-  width: 100%;
-  margin-top: 20px;
-}
-</style>
+<template>
+  <div class="init-wrapper">
+    <svg width="100%" height="100%" viewBox="0 0 1440 500" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g>
+        <circle stroke="#13C2C2" cx="500" cy="-20" r="6" />
+        <circle fill-opacity="0.4" fill="#9EE6E6" cx="166" cy="76" r="8" />
+        <circle stroke="#13C2C2" cx="1165" cy="240" r="5" />
+        <circle stroke="#CED4D9" cx="1300" cy="10" r="8" />
+        <circle stroke="#ffffff" cx="1326.5" cy="180" r="6" />
+        <circle fill-opacity="0.4" fill="#9EE6E6" cx="944" cy="250" r="5" />
+      </g>
+      <g>
+        <path
+          d="M1182.79367,448.230356 L1186.00213,453.787581 C1186.55442,454.744166 1186.22667,455.967347 1185.27008,456.519632 C1184.96604,456.695168 1184.62116,456.787581 1184.27008,456.787581 L1177.85315,456.787581 C1176.74858,456.787581 1175.85315,455.89215 1175.85315,454.787581 C1175.85315,454.436507 1175.94556,454.091619 1176.1211,453.787581 L1179.32957,448.230356 C1179.88185,447.273771 1181.10503,446.946021 1182.06162,447.498305 C1182.36566,447.673842 1182.61813,447.926318 1182.79367,448.230356 Z"
+          stroke="#CED4D9"
+        />
+        <path
+          d="M1376.79367,204.230356 L1380.00213,209.787581 C1380.55442,210.744166 1380.22667,211.967347 1379.27008,212.519632 C1378.96604,212.695168 1378.62116,212.787581 1378.27008,212.787581 L1371.85315,212.787581 C1370.74858,212.787581 1369.85315,211.89215 1369.85315,210.787581 C1369.85315,210.436507 1369.94556,210.091619 1370.1211,209.787581 L1373.32957,204.230356 C1373.88185,203.273771 1375.10503,202.946021 1376.06162,203.498305 C1376.36566,203.673842 1376.61813,203.926318 1376.79367,204.230356 Z"
+          stroke="#2F54EB"
+        />
+      </g>
+      <g>
+        <rect stroke="#13C2C2" stroke-opacity="0.6" x="120" y="322" width="12" height="12" rx="1" />
+        <rect stroke="#CED4D9" x="108" y="1" width="9" height="9" rx="1" />
+      </g>
+    </svg>
+    <a-card class="login-card" hoverable>
+      <a-card-meta title="初始化管理员账户" style="textalign: center" />
+      <br>
+      <a-form :form="loginForm" :label-col="{ span: 0 }" class="init-form" @submit="handleLogin">
+        <a-form-item :wrapper-col="{ span: 24 }" class="init-user-name">
+          <a-input v-decorator="['userName', { rules: [{ required: true, message: '请输入账户名称' },{min:3,max:20,message:'账号名称长度为3~20位'}] }]" placeholder="账户名称" />
+        </a-form-item>
+        <a-form-item :wrapper-col="{ span: 24 }" class="init-user-password">
+          <a-input-password
+            v-decorator="[
+              'userPwd',
+              {
+                rules: [
+                  { required: true, message: '请输入密码' },
+                  { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{9,50}$/, message: '密码至少包含大小写字母、数字、特殊字符，长度为9~50' },
+                ],
+              },
+            ]"
+            placeholder="密码至少包含大小写字母、数字、特殊字符，长度为9~50"
+          />
+        </a-form-item>
+
+        <a-button type="primary" html-type="submit" class="btn"> 创建并登录 </a-button>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { initInstall } from '../../api/install'
+import sha1 from 'sha1'
+export default {
+  data() {
+    return {
+      loginForm: this.$form.createForm(this, { name: 'login-form' })
+    }
+  },
+  methods: {
+    // login
+    handleLogin(e) {
+      e.preventDefault()
+      this.loginForm.validateFields((err, values) => {
+        if (!err) {
+          //  密码强度
+          if (!this.checkPasswordStrong(values.userPwd)) {
+            this.$notification.error({
+              message: '系统管理员密码强度太低',
+              duration: 2
+            })
+            return false
+          }
+          const params = {
+            ...values,
+            userPwd: sha1(values.userPwd)
+          }
+          initInstall(params).then((res) => {
+            // 登录不成功，更新验证码
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              })
+              // 调用 store action 存储当前登录的用户名和 token
+              this.$store.dispatch('login', { token: res.data.token, longTermToken: res.data.longTermToken }).then(() => {
+                // 跳转主页面
+                this.$router.push({ path: '/' })
+              })
+            }
+          })
+        }
+      })
+    },
+    // /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? +]).*$/
+    // 验证密码安全强度
+    checkPasswordStrong(fieldValue) {
+      function checkStrong(sPW) {
+        let Modes = 0
+        for (let i = 0; i < sPW.length; i++) {
+          // 测试每一个字符的类别并统计一共有多少种模式.
+          Modes |= CharMode(sPW.charCodeAt(i))
+        }
+        return bitTotal(Modes)
+      }
+
+      // 判断字符类型
+      function CharMode(iN) {
+        if (iN >= 48 && iN <= 57) { return 1 }
+        if (iN >= 65 && iN <= 90) { return 2 }
+        if (iN >= 97 && iN <= 122) { return 4 } else return 8 // 特殊字符
+      }
+
+      // 统计字符类型
+      function bitTotal(num) {
+        var modes = 0
+        for (let i = 0; i < 4; i++) {
+          if (num & 1) modes++
+          num >>>= 1
+        }
+        return modes
+      }
+
+      if (!fieldValue || fieldValue === '') {
+        return false
+      }
+      /* 密码强度等级说明，字符包括：小写字母、大写字母、数字、特殊字符
+      1-- - 密码包含其中之一
+      2-- - 密码包含其中之二
+      3-- - 密码包含其中之三
+      4-- - 密码包含其中之四 */
+      return checkStrong(fieldValue) >= 3
+    }
+  }
+}
+</script>
+
+<style scoped>
+.init-wrapper {
+  width: 100vw;
+  height: 100vh;
+  background: #f6f6f6;
+  overflow: hidden;
+}
+.login-card {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: left;
+  min-width: 380px;
+  border-radius: 6px;
+  padding: 4px;
+}
+.btn {
+  width: 100%;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/pages/node/nodeGroupManager/components/node_list.vue b/src/pages/node/nodeGroupManager/components/node_list.vue
index 9b5df9c99f7b4e5ea029e3df4d199660de13eedf..7dc6f99bc2dd5a97cb5968805480253118a24943 100644
--- a/src/pages/node/nodeGroupManager/components/node_list.vue
+++ b/src/pages/node/nodeGroupManager/components/node_list.vue
@@ -55,7 +55,7 @@ import NodeLayout from '@/pages/node/list/node-layout'
 import { nodelist, deletenode } from '@/api/node_group'
 import { getNodeStatus, setNodeLocalIp, getNodeList } from '@/api/node'
 import AllNode from './all_node.vue'
-import { deepClone, deepCloneV2 } from '@/utils/obj'
+import { deepClone } from '@/utils/obj'
 export default {
   components: {
     AllNode,
@@ -103,12 +103,13 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => {
-      this.tableHeight = this.$refs.listSet.clientHeight - 140
-    })
+    this.calculateTableHeight()
     this.loadData()
   },
   methods: {
+    calculateTableHeight() {
+      this.tableHeight = this.$refs.listSet.clientHeight - 140
+    },
     nodelist() {
       this.loading = true
       nodelist({ groupId: this.parentMsg.id, pageNum: 1, pageSize: 99999 }).then(res => {
@@ -204,17 +205,19 @@ export default {
       })
     },
     // 加载数据
-    loadData() {
+    async loadData() {
       this.loading = true
-      this.nodeMsgs = []
-      getNodeList().then((res) => {
+      try {
+        const res = await getNodeList()
         if (res.code === 200) {
           this.nodeMsgs = res.data || []
-          this.nodelist()
+          this.fetchNodeList()
         }
-      }).finally(() => {
-
-      })
+      } catch (error) {
+        console.error('获取节点信息失败:', error)
+      } finally {
+        this.loading = false
+      }
     },
     // 关闭抽屉层
     onClose() {
@@ -228,7 +231,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-//  .listSet{
-//   height:calc(100vh - 210px)
-//  }
+.list-set {
+  height: calc(100vh - 145px);
+}
+
+.filter {
+  margin-bottom: 16px;
+}
+
+.node-manager {
+  .ant-drawer-content-wrapper {
+    background-color: #f0f2f5;
+  }
+}
 </style>
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 818ee39a70793add083a604e5066f0d245d51daa..81043c49d7595795f667f27af100e5d0d925d612 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -3,3 +3,23 @@
 export function isIpAndPort(str) {
   return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])){1}$/.test(str)
 }
+
+// 校验URL
+export function isUrl(str) {
+  return /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(str)
+}
+
+// 校验日期（格式：YYYY-MM-DD）
+export function isDate(str) {
+  return /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/.test(str)
+}
+
+// 校验时间（格式：HH:mm:ss）
+export function isTime(str) {
+  return /^(2[0-3]|[01]?[0-9]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(str)
+}
+
+// 校验日期时间（格式：YYYY-MM-DD HH:mm:ss）
+export function isDateTime(str) {
+  return /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]) (2[0-3]|[01]?[0-9]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(str)
+}
\ No newline at end of file