From 6a15d67f9e6d33da33515b4117c778e4cb909aba Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Thu, 31 Oct 2024 11:29:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=84=9A=E6=9C=AC=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/common.scss            |   35 +-
 src/assets/theme/blue.scss        | 1284 ++++++++++++++++-------------
 src/pages/script/script/index.vue |  138 ++++
 src/router/index.js               |    6 +
 src/router/route-menu.js          |    4 +-
 5 files changed, 871 insertions(+), 596 deletions(-)
 create mode 100644 src/pages/script/script/index.vue

diff --git a/src/assets/common.scss b/src/assets/common.scss
index e4d1cf3..092ad9c 100644
--- a/src/assets/common.scss
+++ b/src/assets/common.scss
@@ -1,4 +1,7 @@
+@import './theme/linx-red.scss';
+@import './theme/blue.scss';
 body{
+  // 抽屉
   .ant-drawer-content-wrapper {
     .ant-drawer-content {
       .ant-drawer-wrapper-body {
@@ -11,6 +14,7 @@ body{
           border-radius: 0px;
         }
         .ant-drawer-body {
+          height: 100%;
           box-sizing: border-box;
           padding: 30px 20px 0 20px;
           overflow: auto;
@@ -18,6 +22,7 @@ body{
       }
     }
   }
+  // 节点管理页面样式
   .nodeManager {
     &.ant-drawer{
       .ant-drawer-content-wrapper {
@@ -50,6 +55,7 @@ body{
       }
     }
   }
+    // 抽屉底部
   .drawerFooter {
     position: absolute;
     right: 0;
@@ -60,6 +66,8 @@ body{
     text-align: right;
     z-index: 1;
   }
+
+  // 内容区
   .layout-content{
     background-size: cover;
     .wrap{
@@ -74,8 +82,10 @@ body{
         }
     }
   }
+  // header头部
   .app-header{
     border-color: rgba($color: #fff, $alpha: 0.8) !important;
+  // tab页面
     .ant-tabs {
       .ant-tabs-bar{
           border: none;
@@ -121,19 +131,25 @@ body{
       }
     }
   }
+  // 上传输入框
   .ant-input-wrapper{
     .ant-input-group-addon{
       border-radius: 0 20px 20px 0;
     }
   }
 }
+
+// 表单
 .ant-form{
   .ant-form-item{
+    // 改变该样式会让ant-form  label-align属性失效
     .ant-form-item-label{
-      text-align: center;
+      // text-align: center;
     }
   }
 }
+
+// tabs，标签在左侧的,标签文字进行居中显示
 .ant-tabs{
   &.ant-tabs-left{
     .ant-tabs-tab{
@@ -141,8 +157,13 @@ body{
     }
   }
 }
+  // 表格
   .ant-table {
+    //   表头
     .ant-table-header {
+      // &.ant-table-hide-scrollbar{
+      //   padding-right: 0 !important;
+      // }
         thead {
           tr {
             th {
@@ -152,8 +173,8 @@ body{
         }
     }
   }
-
-  .side-menu{
+  //侧边栏菜单
+.side-menu{
   .ant-menu-item{
     span{
       transition: all .5s;
@@ -249,4 +270,12 @@ body{
       }
     }
   }
+}
+
+// 上传组件样式
+.ant-upload button{
+  border-left:none;
+}
+.upload-input{
+  border-right: none;
 }
\ No newline at end of file
diff --git a/src/assets/theme/blue.scss b/src/assets/theme/blue.scss
index 148290f..442525a 100644
--- a/src/assets/theme/blue.scss
+++ b/src/assets/theme/blue.scss
@@ -1,590 +1,694 @@
-$blue-theme: #377bc9;
-$blue-theme-hover: #00337a;
-$blue-theme-rgb: rgba($color: $blue-theme, $alpha: 0.2);
-$blue-sider-bg: #00337a;
-$blue-sider-active-bg: #5e9ce7;
-$blue-disable-color: #6c757d;
-$blue-success-color: #4EB4A5;
-$blue-danger-color: #dc3545;
-$blue-warning-color: #E3AA75;
-$blue-info-color: #4B98CF;
-$blue-light-border-color: #DCE0E2;
-$blue-dark-color: #1A3142;
-$blue-gray-color:#909399;
-$blue-theme-rgb1: rgba($color: $blue-theme, $alpha: 0.05);
-
-body[data-theme='blue'] {
-  .info{
-      color: $blue-info-color !important;
-    }
-  .warning{
-    color: $blue-warning-color !important;
-  }
-  .danger{
-    color: $blue-danger-color !important;
-  }
-  .success{
-    color: $blue-success-color !important;
-  }
-  .primary {
-    color: rgba($color: #1890ff, $alpha: 0.7) !important;
-  }
-  .gray {
-    color: $blue-gray-color;
-  }
-  .warning-small{
-    color: $blue-warning-color;
-    font-size: 12px;
-  }
-
-  .ant-radio-group{
-    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
-      background-color: $blue-theme;
-    }
-    span {
-      color: $blue-theme;
-    }
-    .ant-radio-button-wrapper:first-child{
-      border-radius: 20px 0 0 20px;
-    }
-    .ant-radio-button-wrapper:last-child{
-      border-radius: 0 20px 20px 0;
-    }
-    .ant-radio-button-wrapper-checked {
-      border: 1px solid $blue-theme;
-    }
-  }
-  
-  .ant-tag{
-    &.info{
-      background-color: #fff !important;
-      border-color: $blue-light-border-color;
-    }
-    &.success{
-      background-color: $blue-success-color;
-      border-color: $blue-success-color;
-      color: #fff !important;
-    }
-    &.danger{
-      background-color: $blue-danger-color;
-      border-color: $blue-danger-color;
-      color: #fff !important;
-    }
-    &.warning{
-      background-color: $blue-warning-color;
-      border-color: $blue-warning-color;
-      color: #fff !important;
-    }
-    &.gray {
-      background-color: $blue-gray-color;
-      border-color: $blue-gray-color;
-      color: #fff !important;
-    }
-    &.dark {
-      background-color: $blue-dark-color;
-      border-color: $blue-dark-color;
-      color: #fff !important;
-    }
-  }
-  
-  .ant-layout-sider{
-      border-right: 1px solid rgba($color: #eee, $alpha: 0.1);
-      background: url('../assets/images/blue/sider-bg.png');
-      .side-menu {
-          background: transparent;
-      }
-  }
-  .side-menu{
-    .ant-menu-submenu{
-        margin: 15px 0;
-      .ant-menu{
-        .ant-menu-item{
-            margin: 0;
-            background: $blue-sider-bg;
-          &.ant-menu-item-selected{
-            background-color: $blue-sider-active-bg;
-          }
-        }
-      }
-    }
-  }
-  .ant-menu-item{
-      &.ant-menu-item-selected{
-        background-color: $blue-sider-active-bg;
-        &::after{
-          background-color: $blue-theme-hover;
-        }
-      }
-  }
-  .ant-menu-submenu-popup {
-    &.ant-menu-dark { 
-      .ant-menu-item-selected {
-        background-color: $blue-sider-active-bg
-      }
-    }
-  }
-
-  .ant-table {
-    .ant-table-header {
-        thead {
-          tr {
-            th {
-              background: $blue-theme-rgb;
-              font-weight: bold;
-              border-right: 1px solid #eee;
-              &:hover {
-                background: $blue-theme-rgb;
-              }
-            }
-          }
-        }
-    }
-    .ant-table-body {
-        tbody {
-          tr {
-            th {
-              border-right: 1px solid #dcdfe6;
-            }
-          }
-        }
-    }
-  }
-  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-    background-color: $blue-theme-rgb1;
-  }
-  .ant-table{
-    .ant-table-content{
-      thead{
-        tr{
-          th{
-            background-color: $blue-theme-rgb !important;
-          }
-        }
-      }
-        tbody{
-          tr{
-            td:last-child{
-              .ant-btn.ant-btn-link{
-                margin-right: 0;
-                &[disabled]{
-                  i{
-                    color: $blue-gray-color !important;
-                  }
-                }
-              }
-              i{
-                font-size: 18px;
-                color: $blue-info-color;
-              }
-            }
-          }
-        }
-    }
-  }
-
-  .ant-pagination{
-    .ant-pagination-item-link {
-      border-radius: 20px;
-      &:hover {
-        border-color: $blue-theme;
-      }
-    }
-    .ant-pagination-item,.ant-pagination-prev,.ant-pagination-next{
-      border-radius: 20px;
-      &:hover{
-        border-color: $blue-theme;
-      }
-      a{
-        &:hover{
-          color: $blue-theme;
-        }
-      }
-    }
-    .ant-pagination-item-active{
-        border-color: $blue-theme;
-        a{
-          color: $blue-theme;
-        }
-    }
-    .ant-select-selection {
-      border-radius: 20px;
-      &:hover{
-        border-color: $blue-theme;
-      }
-    }
-  }
-  
-  .ant-input{
-    border-radius: 20px;
-    &:hover{
-      border-color: $blue-theme;
-    }
-    &:focus{
-      border-color: $blue-theme;
-      box-shadow: 0 0 0 2px $blue-theme-rgb;
-    }
-  }
-  .ant-input-number{
-    border-radius: 20px;
-    &:hover{
-      border-color: $blue-theme;
-    }
-    &:focus{
-      border-color: $blue-theme;
-      box-shadow: 0 0 0 2px $blue-theme-rgb;
-    }
-    .ant-input-number-handler-wrap{
-      border-radius: 0 20px 20px 0;
-    }
-  }
-
-  .ant-select-selection{
-    border-radius: 20px;
-  }
-  .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
-    border-color: $blue-theme !important;
-      box-shadow: none;
-  }
-  .ant-form-item-control{
-    .ant-select-selection {
-      border-radius: 20px !important;
-      &:hover {
-        border-color: $blue-theme;
-        box-shadow: 0 0 0 2px $blue-theme-rgb;
-      }
-    }
-    &.has-error{
-      .ant-input{
-        border-color: $blue-danger-color;
-        &:hover{
-          border-color: $blue-danger-color;
-        }
-        &:focus{
-          border-color: $blue-danger-color;
-        }
-      }
-    }
-  }
-  
-  .ant-switch{
-    &.ant-switch-checked{
-      background-color: $blue-theme;
-    }
-  }
-  .header-text{
-    &:hover{
-      color: $blue-theme;
-    }
-  }
-
-  .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
-    border-color: $blue-theme;
-  }
-  .ant-calendar{
-    .ant-calendar-date{
-        &:hover{
-            background-color: $blue-theme-rgb;
-        }
-    }
-    .ant-calendar-date-panel{
-      .ant-calendar-selected-day{
-        .ant-calendar-date{
-          background-color: $blue-theme;
-        }
-      }
-      .ant-calendar-today{
-        .ant-calendar-date{
-          color: $blue-theme;
-          border-color: $blue-theme;
-        }
-        &.ant-calendar-selected-day{
-          .ant-calendar-date{
-            color: #fff;
-            border-color: $blue-theme;
-          }
-        }
-      }
-    }
-    .ant-calendar-footer-btn{
-      .ant-calendar-time-picker-btn{
-        color: $blue-theme;
-        &.ant-calendar-time-picker-btn-disabled{
-          color: rgba(0, 0, 0, 0.25);
-          &:hover{
-            cursor: not-allowed;
-          }
-        }
-      }
-      .ant-calendar-ok-btn{
-        background-color: $blue-theme;
-        border-color: $blue-theme;
-        &.ant-calendar-ok-btn-disabled{
-          color: rgba(0, 0, 0, 0.25);
-          background-color: #f5f5f5;
-          border-color: #d9d9d9;
-          &:hover{
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-    .ant-calendar-time-picker-select{
-      li{
-        &:hover{
-          background: $blue-theme-rgb;
-        }
-      }
-    }
-    .ant-btn{
-      &.isActive{
-        color: $blue-theme;
-        border-color: $blue-theme;
-      }
-    }
-  }
-  .ant-calendar-range .ant-calendar-in-range-cell::before{
-    background: $blue-theme-rgb;
-  }
-
-  .ant-drawer-content-wrapper {
-    .ant-drawer-content {
-      .ant-drawer-wrapper-body {
-        .ant-drawer-header {
-          background: $blue-theme;
-          .ant-drawer-title {
-            color: #ffffff;
-          }
-          & button {
-            color: #ffffff;
-          }
-        }
-      }
-    }
-  }
-.drawerFooter {
-    border-color: $blue-theme;
-    background: #ffffff;
-  }
-
-.layout-content{
-  background: url('../assets/images/blue/content-bg.png');
-  .wrap{
-      background: rgba($color: #fff, $alpha: 0.9);
-      overflow-y: scroll;
-      box-shadow: 5px 3px 0px rgba($color: #999, $alpha: 0.5);
-      .filter{
-        border-color: $blue-theme;
-      }
-  }
-}
-
-.app-header{
-.ant-tabs {
-  .ant-tabs-nav-wrap{
-    .ant-tabs-tab{
-        background: rgba($color: #fff, $alpha: 0);
-        border-color: rgba($color: #fff, $alpha: 0.5);
-        color: #fff;
-        i{
-          color: #fff;
-          &:hover{
-              color: $blue-theme-hover;
-          }
-        }
-      &:hover{
-        color: $blue-theme-hover;
-      }
-      &.ant-tabs-tab-active{
-        background: rgba($color: #fff, $alpha: 0.9);
-        color: $blue-theme;
-        i{
-          color: $blue-theme;
-        }
-      }
-    }
-  }
-}
-  background: url('../assets/images/blue/navbar-bg.png');
-  i{
-      color: #fff;
-  }
-  .user-header{
-      span{
-          color: #fff;
-          &:hover{
-              color: $blue-theme-hover;
-          }
-      }
-  }
-.trigger{
-  &:hover{
-      color: $blue-theme;
-  }
-}
-}
-
-.login-wrapper{
-  background-image: url('./images/blue/login-bg.png');
-  .server-ip{
-      color: #fff;
-    }
-  .login-card{
-    background: rgba($color: #fff, $alpha: 0.2);
-    box-shadow: 0px 0px 100px rgba($color: $blue-theme, $alpha: 0.1);
-  }
-  .btn-login{
-    background: rgba($color: $blue-theme-hover, $alpha: 0.8);
-  }
-}
-
-.ant-dropdown-menu{
-.ant-dropdown-menu-item{
-  &:hover{
-    background-color: $blue-theme-rgb;
-  }
-}
-}
-  // loading
-  @keyframes loading {
-    0%{
-      transform: scaleZ(0deg);
-    }
-    50%{
-      transform: scaleZ(180deg);
-    }
-    100%{
-      transform: rotateZ(360deg);
-    }
-  }
-// loading
-  .ant-spin{
-    .ant-spin-dot-spin{
-      background: url('./images/logo_small.png') no-repeat;
-      background-size: cover;
-      animation: loading 1.5s;
-      animation-iteration-count: infinite;
-      i{
-        // display: none;
-        background: transparent;
-      }
-    }
-  }
-
-.ant-checkbox:hover{
-  &.ant-checkbox-checked{
-    .ant-checkbox-inner{
-      border-color: $blue-theme;
-    }
-  }
-  .ant-checkbox-inner{
-    border-color: $blue-theme;
-  }
-}
-.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after{
-  border-color: #ffffff;
-}
-.ant-checkbox-indeterminate .ant-checkbox-inner::after{
-  background-color: $blue-theme;
-}
-.ant-checkbox-checked:hover .ant-checkbox-inner,
-.ant-checkbox-indeterminate:hover .ant-checkbox-inner{
-  border-color: $blue-theme;
-}
-  .ant-checkbox-checked .ant-checkbox-inner{
-    background-color: $blue-theme;
-    border-color: $blue-theme;
-  }
-.ant-tree-checkbox:hover .ant-tree-checkbox-inner{
-  border-color: $blue-theme;
-}
-  .ant-tree-checkbox-checked .ant-tree-checkbox-inner{
-    background-color: $blue-theme;
-    border-color: $blue-theme;
-    &:hover{
-      border-color: $blue-theme;
-    }
-  }
-  .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner{
-    &::after{
-      background-color: $blue-theme;
-    }
-  }
-  .el-tree{
-    .el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{
-      background-color: $blue-theme;
-      border-color: $blue-theme;
-    }
-    .el-checkbox__input.is-focus .el-checkbox__inner{
-      border-color: $blue-theme;
-    }
-    .el-checkbox__inner{
-      width: 16px;
-      height: 16px;
-      &:hover{
-        border-color: $blue-theme;
-      }
-      &::before{
-        height: 4px;
-      }
-      &::after{
-        left: 5px;
-        top: 2px;
-        border-width: 2px;
-      }
-    }
-  }
-
-  .ant-radio-wrapper{
-    .ant-radio{
-      .ant-radio-inner{
-        &::after{
-          background-color: $blue-theme;
-        }
-        border-color: $blue-theme;
-      }
-    }
-  }
-  .ant-tabs-nav .ant-tabs-tab{
-    &.ant-tabs-tab-active{
-      color: $blue-theme;
-    }
-    &:hover{
-      color: $blue-theme;
-    }
-  }
-  .ant-tabs-ink-bar{
-    background-color: $blue-theme;
-  }
-
-  .ant-modal{
-    .ant-modal-close{
-      i{
-        color: #ffffff;
-      }
-    }
-    .ant-modal-header{
-      background-color: $blue-theme;
-      border-bottom-color: $blue-theme;
-      .ant-modal-title{
-        color: #ffffff;
-      }
-    }
-    .ant-modal-footer {
-      border-top-color: $blue-theme;
-    }
-  }
-
-  .file-layout{
-    .filter{
-      border-color: $blue-theme;
-    }
-  }
-  .listSpot{
-    width: 10px;
-    height: 10px;
-    background: $blue-theme;
-    border-radius: 5px;
-    margin-top: 6px;
-  }
-
-}
\ No newline at end of file
+$blue-theme: #377bc9;
+$blue-theme-hover: #00337a;
+$blue-theme-rgb: rgba($color: $blue-theme, $alpha: 0.2);
+$blue-sider-bg: #00337a;
+$blue-sider-active-bg: #5e9ce7;
+$blue-disable-color: #6c757d;
+$blue-success-color: #4EB4A5;
+$blue-danger-color: #dc3545;
+$blue-warning-color: #E3AA75;
+$blue-info-color: #4B98CF;
+$blue-light-border-color: #DCE0E2;
+$blue-dark-color: #1A3142;
+$blue-gray-color:#909399;
+$blue-theme-rgb1: rgba($color: $blue-theme, $alpha: 0.05);
+
+body[data-theme='blue'] {
+    // 字体颜色
+  .info{
+      color: $blue-info-color !important;
+    }
+  .warning{
+    color: $blue-warning-color !important;
+  }
+  .danger{
+    color: $blue-danger-color !important;
+  }
+  .success{
+    color: $blue-success-color !important;
+  }
+  .primary {
+    color: rgba($color: #1890ff, $alpha: 0.7) !important;
+  }
+  .gray {
+    color: $blue-gray-color;
+  }
+  // 小字
+  .warning-small{
+    color: $blue-warning-color;
+    font-size: 12px;
+  }
+// 按钮
+.ant-btn {
+    &:active{
+      color: $blue-theme;
+      border-color: $blue-theme;
+    }
+    border-radius: 20px;
+    &:hover{
+      border-color: $blue-theme;
+      color: $blue-theme;
+    }
+    // 被禁用的按钮
+    &[disabled] {
+      background-color: #f5f5f5 !important;
+      border-color: #d9d9d9 !important;
+      &:hover{
+        color:rgba(0, 0, 0, 0.25)!important;
+      }
+    }
+    &.ant-btn-primary{
+      background-color: $blue-theme;
+      border-color: $blue-theme;
+      &:hover{
+        color: #fff;
+      }
+    }
+    &.ant-btn-danger{
+      background-color: $blue-danger-color;
+      border-color: $blue-danger-color;
+      &:hover{
+        color: #fff;
+      }
+    }
+    &.ant-btn-link{
+      // 被禁用的文字按钮样式
+      &[disabled] {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        &:hover{
+          span{
+            color: $blue-dark-color !important;
+          }
+        }
+      }
+      color: $blue-dark-color;
+      &:hover{
+        border-color: transparent;
+        span{
+          color: $blue-theme;
+        }
+      }
+    }
+  } 
+
+  // 按钮组
+  .ant-radio-group{
+    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
+      background-color: $blue-theme;
+    }
+    span {
+      color: $blue-theme;
+    }
+    .ant-radio-button-wrapper:first-child{
+      border-radius: 20px 0 0 20px;
+    }
+    .ant-radio-button-wrapper:last-child{
+      border-radius: 0 20px 20px 0;
+    }
+    .ant-radio-button-wrapper-checked {
+      border: 1px solid $blue-theme;
+    }
+  }
+
+  // 标签
+.ant-tag{
+    &.info{
+      background-color: #fff !important;
+      border-color: $blue-light-border-color;
+    }
+    &.success{
+      background-color: $blue-success-color;
+      border-color: $blue-success-color;
+      color: #fff !important;
+    }
+    &.danger{
+      background-color: $blue-danger-color;
+      border-color: $blue-danger-color;
+      color: #fff !important;
+    }
+    &.warning{
+      background-color: $blue-warning-color;
+      border-color: $blue-warning-color;
+      color: #fff !important;
+    }
+    &.gray {
+      background-color: $blue-gray-color;
+      border-color: $blue-gray-color;
+      color: #fff !important;
+    }
+    &.dark {
+      background-color: $blue-dark-color;
+      border-color: $blue-dark-color;
+      color: #fff !important;
+    }
+  }
+//   侧边栏
+  .ant-layout-sider{
+      border-right: 1px solid rgba($color: #eee, $alpha: 0.1);
+      background: url('../assets/images/blue/sider-bg.png');
+      .side-menu {
+          // background: url('../assets/images/blue/sider-bg.png');
+          background: transparent;
+      }
+  }
+  //侧边栏菜单
+  .side-menu{
+    .ant-menu-submenu{
+        margin: 15px 0;
+      .ant-menu{
+        .ant-menu-item{
+            margin: 0;
+            background: $blue-sider-bg;
+          &.ant-menu-item-selected{
+            background-color: $blue-sider-active-bg;
+          }
+        }
+      }
+    }
+  }
+  .ant-menu-item{
+      &.ant-menu-item-selected{
+        background-color: $blue-sider-active-bg;
+        &::after{
+          background-color: $blue-theme-hover;
+        }
+      }
+  }
+  // 侧边栏菜单收起
+  .ant-menu-submenu-popup {
+    &.ant-menu-dark { 
+      .ant-menu-item-selected {
+        background-color: $blue-sider-active-bg
+      }
+    }
+  }
+  // 表格
+  .ant-table {
+    //   表头
+    .ant-table-header {
+        thead {
+          tr {
+            th {
+              background: $blue-theme-rgb;
+              font-weight: bold;
+              border-right: 1px solid #eee;
+              &:hover {
+                background: $blue-theme-rgb;
+              }
+            }
+          }
+        }
+    }
+    // 表体
+    .ant-table-body {
+        tbody {
+          tr {
+            th {
+              border-right: 1px solid #dcdfe6;
+            }
+          }
+        }
+    }
+  }
+  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+    background-color: $blue-theme-rgb1;
+  }
+  .ant-table{
+    .ant-table-content{
+      thead{
+        tr{
+          th{
+            background-color: $blue-theme-rgb !important;
+          }
+        }
+      }
+      // .ant-table-fixed{
+        tbody{
+          tr{
+            td:last-child{
+              .ant-btn.ant-btn-link{
+                margin-right: 0;
+                &[disabled]{
+                  i{
+                    color: $blue-gray-color !important;
+                  }
+                }
+              }
+              i{
+                font-size: 18px;
+                color: $blue-info-color;
+              }
+            }
+          }
+        }
+      // }
+    }
+  }
+  
+  // 分页
+  .ant-pagination{
+    .ant-pagination-item-link {
+      border-radius: 20px;
+      &:hover {
+        border-color: $blue-theme;
+      }
+    }
+    .ant-pagination-item,.ant-pagination-prev,.ant-pagination-next{
+      border-radius: 20px;
+      &:hover{
+        border-color: $blue-theme;
+      }
+      a{
+        &:hover{
+          color: $blue-theme;
+        }
+      }
+    }
+    .ant-pagination-item-active{
+        border-color: $blue-theme;
+        a{
+          color: $blue-theme;
+        }
+    }
+    .ant-select-selection {
+      border-radius: 20px;
+      &:hover{
+        border-color: $blue-theme;
+      }
+    }
+  }
+  
+  // 输入框
+  .ant-input{
+    border-radius: 20px;
+    &:hover{
+      border-color: $blue-theme;
+    }
+    &:focus{
+      border-color: $blue-theme;
+      box-shadow: 0 0 0 2px $blue-theme-rgb;
+    }
+  }
+  // 数字输入框
+  .ant-input-number{
+    border-radius: 20px;
+    &:hover{
+      border-color: $blue-theme;
+    }
+    &:focus{
+      border-color: $blue-theme;
+      box-shadow: 0 0 0 2px $blue-theme-rgb;
+    }
+    .ant-input-number-handler-wrap{
+      border-radius: 0 20px 20px 0;
+    }
+  }
+  // 下拉框
+  .ant-select-selection{
+    border-radius: 20px;
+  }
+  .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
+    border-color: $blue-theme !important;
+      box-shadow: none;
+  }
+  .ant-form-item-control{
+    .ant-select-selection {
+      border-radius: 20px !important;
+      &:hover {
+        border-color: $blue-theme;
+        box-shadow: 0 0 0 2px $blue-theme-rgb;
+      }
+    }
+    &.has-error{
+      .ant-input{
+        border-color: $blue-danger-color;
+        &:hover{
+          border-color: $blue-danger-color;
+        }
+        &:focus{
+          border-color: $blue-danger-color;
+        }
+      }
+    }
+  }
+  
+  // 开关
+  .ant-switch{
+    &.ant-switch-checked{
+      background-color: $blue-theme;
+    }
+  }
+  .header-text{
+    &:hover{
+      color: $blue-theme;
+    }
+  }
+  
+  // 时间选择器
+  .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
+    border-color: $blue-theme;
+  }
+  .ant-calendar{
+    .ant-calendar-date{
+        &:hover{
+            background-color: $blue-theme-rgb;
+        }
+    }
+    .ant-calendar-date-panel{
+      .ant-calendar-selected-day{
+        .ant-calendar-date{
+          background-color: $blue-theme;
+        }
+      }
+      .ant-calendar-today{
+        .ant-calendar-date{
+          // background-color: $defult-color;
+          color: $blue-theme;
+          border-color: $blue-theme;
+        }
+        &.ant-calendar-selected-day{
+          .ant-calendar-date{
+            // background-color: $defult-color;
+            color: #fff;
+            border-color: $blue-theme;
+          }
+        }
+      }
+    }
+    .ant-calendar-footer-btn{
+      .ant-calendar-time-picker-btn{
+        color: $blue-theme;
+        &.ant-calendar-time-picker-btn-disabled{
+          color: rgba(0, 0, 0, 0.25);
+          &:hover{
+            cursor: not-allowed;
+          }
+        }
+      }
+      .ant-calendar-ok-btn{
+        background-color: $blue-theme;
+        border-color: $blue-theme;
+        &.ant-calendar-ok-btn-disabled{
+          color: rgba(0, 0, 0, 0.25);
+          background-color: #f5f5f5;
+          border-color: #d9d9d9;
+          &:hover{
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+    // 选择时间
+    .ant-calendar-time-picker-select{
+      li{
+        &:hover{
+          background: $blue-theme-rgb;
+        }
+      }
+    }
+    // 快捷时间范围按钮
+    .ant-btn{
+      &.isActive{
+        color: $blue-theme;
+        border-color: $blue-theme;
+      }
+    }
+  }
+    // 时间范围区间
+  .ant-calendar-range .ant-calendar-in-range-cell::before{
+    background: $blue-theme-rgb;
+  }
+  // 抽屉
+  .ant-drawer-content-wrapper {
+    .ant-drawer-content {
+      .ant-drawer-wrapper-body {
+        .ant-drawer-header {
+          background: $blue-theme;
+          .ant-drawer-title {
+            color: #ffffff;
+          }
+          & button {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+//   抽屉底部按钮
+.drawerFooter {
+    border-color: $blue-theme;
+    background: #ffffff;
+  } 
+// 内容区
+.layout-content{
+  background: url('../assets/images/blue/content-bg.png');
+  .wrap{
+      background: rgba($color: #fff, $alpha: 0.9);
+      overflow-y: scroll;
+      box-shadow: 5px 3px 0px rgba($color: #999, $alpha: 0.5);
+      .filter{
+        border-color: $blue-theme;
+      }
+  }
+}
+
+// header头部
+.app-header{
+  // tab页面
+.ant-tabs {
+  .ant-tabs-nav-wrap{
+    .ant-tabs-tab{
+        background: rgba($color: #fff, $alpha: 0);
+        border-color: rgba($color: #fff, $alpha: 0.5);
+        color: #fff;
+        i{
+          color: #fff;
+          &:hover{
+              color: $blue-theme-hover;
+          }
+        }
+      &:hover{
+        color: $blue-theme-hover;
+      }
+      &.ant-tabs-tab-active{
+        background: rgba($color: #fff, $alpha: 0.9);
+        color: $blue-theme;
+        i{
+          color: $blue-theme;
+        }
+      }
+    }
+  }
+}
+  background: url('../assets/images/blue/navbar-bg.png');
+  i{
+      color: #fff;
+  }
+  .user-header{
+      span{
+          color: #fff;
+          &:hover{
+              color: $blue-theme-hover;
+          }
+      }
+  }
+.trigger{
+  &:hover{
+      color: $blue-theme;
+  }
+}
+}
+
+// 登录页面
+.login-wrapper{
+  background-image: url('./images/blue/login-bg.png');
+  .server-ip{
+      color: #fff;
+      &:hover{
+        // color: $blue-theme;
+      }
+    }
+  .login-card{
+    background: rgba($color: #fff, $alpha: 0.2);
+    box-shadow: 0px 0px 100px rgba($color: $blue-theme, $alpha: 0.1);
+  }
+  .btn-login{
+    background: rgba($color: $blue-theme-hover, $alpha: 0.8);
+  }
+}
+// 下拉菜单组件
+.ant-dropdown-menu{
+.ant-dropdown-menu-item{
+  &:hover{
+    background-color: $blue-theme-rgb;
+  }
+}
+}
+  // loading
+  @keyframes loading {
+    0%{
+      transform: scaleZ(0deg);
+    }
+    50%{
+      transform: scaleZ(180deg);
+    }
+    100%{
+      transform: rotateZ(360deg);
+    }
+  }
+// loading
+  .ant-spin{
+    .ant-spin-dot-spin{
+      background: url('./images/logo_small.png') no-repeat;
+      background-size: cover;
+      animation: loading 1.5s;
+      animation-iteration-count: infinite;
+      i{
+        // display: none;
+        background: transparent;
+      }
+    }
+  }
+
+// 复选框
+.ant-checkbox:hover{
+  &.ant-checkbox-checked{
+    .ant-checkbox-inner{
+      border-color: $blue-theme;
+    }
+  }
+  .ant-checkbox-inner{
+    border-color: $blue-theme;
+  }
+}
+.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after{
+  border-color: #ffffff;
+}
+.ant-checkbox-indeterminate .ant-checkbox-inner::after{
+  background-color: $blue-theme;
+}
+.ant-checkbox-checked:hover .ant-checkbox-inner,
+.ant-checkbox-indeterminate:hover .ant-checkbox-inner{
+  border-color: $blue-theme;
+}
+  .ant-checkbox-checked .ant-checkbox-inner{
+    background-color: $blue-theme;
+    border-color: $blue-theme;
+  }
+// 树形复选框
+.ant-tree-checkbox:hover .ant-tree-checkbox-inner{
+  border-color: $blue-theme;
+}
+  .ant-tree-checkbox-checked .ant-tree-checkbox-inner{
+    background-color: $blue-theme;
+    border-color: $blue-theme;
+    &:hover{
+      border-color: $blue-theme;
+    }
+  }
+  .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner{
+    &::after{
+      background-color: $blue-theme;
+    }
+  }
+  // element树形复选框
+  .el-tree{
+    .el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{
+      background-color: $blue-theme;
+      border-color: $blue-theme;
+    }
+    .el-checkbox__input.is-focus .el-checkbox__inner{
+      border-color: $blue-theme;
+    }
+    .el-checkbox__inner{
+      width: 16px;
+      height: 16px;
+      &:hover{
+        border-color: $blue-theme;
+      }
+      &::before{
+        height: 4px;
+      }
+      &::after{
+        left: 5px;
+        top: 2px;
+        border-width: 2px;
+      }
+    }
+  }
+
+  // 单选按钮
+  .ant-radio-wrapper{
+    .ant-radio{
+      .ant-radio-inner{
+        &::after{
+          background-color: $blue-theme;
+        }
+        border-color: $blue-theme;
+      }
+    }
+  }
+  // 标签页
+  .ant-tabs-nav .ant-tabs-tab{
+    &.ant-tabs-tab-active{
+      color: $blue-theme;
+    }
+    &:hover{
+      color: $blue-theme;
+    }
+  }
+  .ant-tabs-ink-bar{
+    background-color: $blue-theme;
+  }
+  // 模态框
+  .ant-modal{
+    .ant-modal-close{
+      i{
+        color: #ffffff;
+      }
+    }
+    .ant-modal-header{
+      background-color: $blue-theme;
+      border-bottom-color: $blue-theme;
+      .ant-modal-title{
+        color: #ffffff;
+      }
+    }
+    .ant-modal-footer {
+      border-top-color: $blue-theme;
+    }
+  }
+  // 目录树
+  .file-layout{
+    .filter{
+      border-color: $blue-theme;
+    }
+  }
+  // 列表圆点
+  .listSpot{
+    width: 10px;
+    height: 10px;
+    background: $blue-theme;
+    border-radius: 5px;
+    margin-top: 6px;
+  }
+
+  // 上传组件样式
+  .ant-upload button{
+    border-radius: 0px 20px 20px  0px;
+    background-color: $blue-theme;
+    color: #fff;
+    &:hover{
+      background-color: $blue-theme;
+      color: #fff;
+    }
+  }
+  .upload-input{
+    &:hover{
+      border: 1px solid #d9d9d9;
+      border-right: none;
+    }
+  }
+}
+
diff --git a/src/pages/script/script/index.vue b/src/pages/script/script/index.vue
new file mode 100644
index 0000000..d56e90b
--- /dev/null
+++ b/src/pages/script/script/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <div ref="tableBox" style="height: 100%;">
+    <div ref="filter" class="filter">
+      <a-button type="primary" icon="plus" @click="handleUploadScript">上传脚本</a-button>
+    </div>
+
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :data-source="scriptTable"
+      :pagination="pagination"
+      :scroll="{x: 900, y: tableHeight - 50}"
+      @change="change"
+    >
+      <a slot="name" slot-scope="text">{{ text }}</a>
+      <a slot="path" slot-scope="text">{{ text }}</a>
+      <a slot="md5" slot-scope="text">{{ text }}</a>
+      <a slot="createTime" slot-scope="text">{{ text }}</a>
+
+      <template slot="operation" slot-scope="text, record">
+      </template>
+    </a-table>
+
+    <!-- 上传脚本弹框 -->
+    <a-modal
+      v-model="uploadVisible"
+      title="上传脚本"
+      width="700px"
+      :footer="null"
+      :mask-closable="false"
+      :destroy-on-close="true"
+    >
+      <FileUpload :url="'/script/upload'" @on-success="uploadSuccess" />
+    </a-modal>
+
+  </div>
+</template>
+
+<script>
+import { getScriptListApi } from '@/api/script'
+import FileUpload from '@/components/file-upload'
+
+export default {
+  components: {
+    FileUpload,
+  },
+  data() {
+    return {
+      tableHeight: 0,
+      uploadVisible: false,
+      loading: false,
+      selectedRow: null,
+      scriptTable: [],
+      total: 0,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      columns: [
+        { title: '脚本名称', dataIndex: 'name', key: 'name', width: 100, ellipsis: true },
+        { title: '脚本路径', dataIndex: 'path', key: 'path', width: 100, ellipsis: true },
+        { title: 'MD5', dataIndex: 'md5', key: 'md5', width: 100, ellipsis: true },
+        { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 100, ellipsis: true },
+        { title: '操作', dataIndex: 'operation', key: 'operation', scopedSlots: { customRender: 'operation' }, width: 60, ellipsis: true, align: 'center' }
+      ],
+      buttonLoading: false
+    }
+  },
+  computed: {
+    pagination() {
+      return {
+        total: this.total,
+        current: this.listQuery.pageNum || 1,
+        pageSize: this.listQuery.pageSize || 10,
+        pageSizeOptions: ['10', '20', '50', '100'],
+        showSizeChanger: true,
+        showTotal: (total) => {
+          return `共 ${total} 条`
+        }
+      }
+    }
+  },
+  created() {
+    this.loadData()
+  },
+  mounted() {
+    setTimeout(() => {
+      this.tableHeight = this.$refs.tableBox.clientHeight - 140
+    })
+  },
+  methods: {
+    loadData() {
+      this.loading = true
+      getScriptListApi({
+        pageNum: this.listQuery.pageNum,
+        pageSize: this.listQuery.pageSize
+      })
+        .then((res) => {
+          if (res.code === 200) {
+            this.scriptTable = res.data?.list
+            this.total = Number(res.data?.total || 0)
+          }
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.loading = false
+        })
+    },
+
+    // 分页、排序、筛选变化时触发
+    change(pagination) {
+      this.listQuery.pageNum = pagination.current
+      this.listQuery.pageSize = pagination.pageSize
+      this.loadData()
+    },
+
+    handleUploadScript() {
+      this.uploadVisible = true
+    },
+
+    uploadSuccess(res) {
+      this.$notification.success({
+        message: `上传脚本${res.data.name || ''}成功`,
+        duration: 2
+      })
+      this.uploadVisible = false
+      this.loadData()
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.ant-btn{
+  margin-right: 10px;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 118eeda..70f2005 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,6 +39,12 @@ const children = [
     name: 'repository-source',
     meta: { title: '软件源模板列表' },
     component: () => import('@/pages/repository/source')
+  },
+  {
+    path: '/script/script',
+    name: 'script-script',
+    meta: { title: '脚本列表' },
+    component: () => import('@/pages/script/script')
   }
 ]
 
diff --git a/src/router/route-menu.js b/src/router/route-menu.js
index dfdbf57..64c826f 100644
--- a/src/router/route-menu.js
+++ b/src/router/route-menu.js
@@ -10,9 +10,7 @@ const routeMenuMap = {
   'user': '/user/list',
   'repository_source': '/repository/source',
   'repository_package': '/repository/package',
-  'manageScript': '/script/script',
-  'manageCommand': '/script/command',
-  'upgrade': '/upgrade/list'
+  'manageScript': '/script/script'
 }
 
 export default routeMenuMap
-- 
Gitee