wip: 迁移 v3-admin v3.1.3 版本代码

src/styles/index.scss

@@ -0,0 +1,42 @@
+@import './mixins.scss'; // mixins
+@import './transition.scss'; // transition
+@import './theme/register.scss'; // 注册主题
+
+.app-container {
+  padding: 20px;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  background-color: #f0f2f5; // 全局背景色
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+    sans-serif;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+a,
+a:focus,
+a:hover {
+  color: inherit;
+  outline: none;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}

src/styles/mixins.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}

src/styles/theme/dark/index.scss

@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';

src/styles/theme/dark/setting.scss

@@ -0,0 +1,14 @@
+// 主题名称
+$theme-name: 'dark';
+// 主题背景颜色
+$theme-bg-color: #151515;
+// active 状态下主题背景颜色
+$active-theme-bg-color: #409eff;
+// 默认文字颜色
+$font-color: #c0c4cc;
+// active 状态下文字颜色
+$active-font-color: #fff;
+// hover 状态下文字颜色
+$hover-color: #fff;
+// 边框颜色
+$border-color: #303133;

src/styles/theme/register.scss

@@ -0,0 +1,2 @@
+// 注册的主题
+@import '@/styles/theme/dark/index.scss';

src/styles/theme/theme.scss

@@ -0,0 +1,214 @@
+.theme-#{$theme-name} {
+  /** Layout */
+
+  .app-wrapper {
+    background-color: $theme-bg-color;
+    color: $font-color;
+    // 侧边栏
+    .sidebar-container {
+      .sidebar-logo-container {
+        background-color: lighten($theme-bg-color, 2%) !important;
+      }
+      .el-menu {
+        background-color: lighten($theme-bg-color, 4%) !important;
+        .el-menu-item {
+          background-color: lighten($theme-bg-color, 4%) !important;
+          &.is-active,
+          &:hover {
+            background-color: lighten($theme-bg-color, 8%) !important;
+            color: $active-font-color !important;
+          }
+        }
+      }
+      .el-sub-menu__title {
+        background-color: lighten($theme-bg-color, 4%) !important;
+      }
+    }
+
+    // 顶部导航栏
+    .navbar {
+      background-color: $theme-bg-color;
+      .el-breadcrumb__inner {
+        a {
+          color: $font-color;
+          &:hover {
+            color: $hover-color;
+          }
+        }
+        .no-redirect {
+          color: $font-color;
+        }
+      }
+      .right-menu {
+        .el-icon {
+          color: $font-color;
+        }
+        .el-avatar {
+          background: lighten($theme-bg-color, 20%);
+          .el-icon {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    // tags-view
+    .tags-view-container {
+      background-color: $theme-bg-color !important;
+      border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
+      .tags-view-item {
+        background-color: $theme-bg-color !important;
+        color: $font-color !important;
+        border: 1px solid $border-color !important;
+        &.active {
+          background-color: $active-theme-bg-color !important;
+          color: $active-font-color !important;
+          border-color: $border-color !important;
+        }
+      }
+      .contextmenu {
+        // 右键菜单
+        background-color: lighten($theme-bg-color, 8%);
+        color: $font-color;
+        li:hover {
+          background-color: lighten($theme-bg-color, 16%);
+          color: $active-font-color;
+        }
+      }
+    }
+
+    // 右侧设置面板
+    .handle-button {
+      background-color: lighten($theme-bg-color, 20%) !important;
+    }
+    .el-drawer.rtl {
+      background-color: $theme-bg-color;
+      .drawer-title,
+      .drawer-item {
+        color: $font-color;
+      }
+    }
+  }
+
+  /** app-main 主要写 view 页面的黑暗样式 */
+
+  .app-main {
+    // 指令权限页面 /permission/directive
+    .permission-alert {
+      background-color: lighten($theme-bg-color, 8%);
+    }
+    // 监控页面 /monitor
+    .monitor {
+      background-color: $theme-bg-color;
+    }
+  }
+
+  /** login 页面 */
+
+  .login-container {
+    background-color: $theme-bg-color;
+    color: $font-color;
+    .login-card {
+      background-color: lighten($theme-bg-color, 4%) !important;
+    }
+    .el-icon {
+      color: $font-color;
+    }
+  }
+
+  /** element-plus */
+
+  // 侧边栏的 item 的 popper
+  .el-popper {
+    border: none !important;
+    .el-menu {
+      background-color: lighten($theme-bg-color, 4%) !important;
+      .el-menu-item {
+        background-color: lighten($theme-bg-color, 4%) !important;
+        &.is-active,
+        &:hover {
+          background-color: lighten($theme-bg-color, 8%) !important;
+          color: $active-font-color !important;
+        }
+      }
+      .el-sub-menu__title {
+        background-color: lighten($theme-bg-color, 4%) !important;
+      }
+    }
+  }
+
+  // 下拉菜单
+  .el-dropdown__popper .el-dropdown__list {
+    background-color: lighten($theme-bg-color, 8%);
+    .el-dropdown-menu {
+      background-color: lighten($theme-bg-color, 8%);
+      .el-dropdown-menu__item {
+        color: $font-color;
+        &.is-disabled {
+          color: #606266;
+        }
+        &:not(.is-disabled):hover {
+          background-color: lighten($theme-bg-color, 16%);
+          color: $active-font-color;
+        }
+      }
+      .el-dropdown-menu__item--divided:before {
+        background-color: lighten($theme-bg-color, 8%);
+      }
+    }
+  }
+  .el-popper__arrow::before {
+    // 下拉菜单顶部三角区域
+    background-color: lighten($theme-bg-color, 8%) !important;
+    border: lighten($theme-bg-color, 8%) !important;
+  }
+
+  // 单选框按钮样式
+  .el-radio-button__inner {
+    background-color: lighten($theme-bg-color, 8%);
+    color: $active-font-color;
+    border: 1px solid $border-color;
+  }
+  .el-radio-button:first-child .el-radio-button__inner {
+    border-left: none;
+  }
+
+  // el-tag
+  .el-tag {
+    background-color: lighten($theme-bg-color, 8%);
+    border-color: $border-color;
+    color: $active-font-color;
+    &.el-tag--info {
+      background-color: lighten($theme-bg-color, 8%);
+      border-color: $border-color;
+      color: $active-font-color;
+    }
+  }
+
+  // tabs 标签页
+  .el-tabs--border-card {
+    background: lighten($theme-bg-color, 8%);
+    border: 1px solid $border-color;
+    .el-tabs__header {
+      background-color: lighten($theme-bg-color, 8%);
+      border-bottom: 1px solid $border-color;
+      .el-tabs__item.is-active {
+        background-color: lighten($theme-bg-color, 8%);
+        border-right-color: $border-color;
+        border-left-color: $border-color;
+      }
+    }
+  }
+
+  // 卡片 card
+  .el-card {
+    background: lighten($theme-bg-color, 8%);
+    border: 1px solid $border-color;
+    color: $font-color;
+  }
+
+  // 输入框 input
+  .el-input__wrapper {
+    background: lighten($theme-bg-color, 8%) !important;
+  }
+}

src/styles/transition.scss

@@ -0,0 +1,48 @@
+// See https://vuejs.org/v2/guide/transitions.html for detail
+
+// fade
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+// fade-transform
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// breadcrumb
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all 0.5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}