first commit

src/styles/animated.scss

@@ -0,0 +1,20 @@
+@keyframes fade-up {
+	0% {
+		transform: translateY(60px);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@for $i from 0 through 12 {
+  .animated-fade-up-#{$i} {
+    opacity: 0;
+    animation-name: fade-up;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: calc($i/10) + s;
+  }
+}

src/styles/arco-ui/a-card.less

@@ -0,0 +1 @@
+

src/styles/arco-ui/a-descriptions.less

@@ -0,0 +1,11 @@
+.arco-descriptions-layout-inline-horizontal {
+  &.arco-descriptions-size-medium {
+    .arco-descriptions-item {
+      padding-bottom: 8px;
+    }
+  }
+}
+
+.arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label-inline {
+  margin-right: 10px;
+}

src/styles/arco-ui/a-input-number.less

@@ -0,0 +1,13 @@
+// 线性主题优化
+.arco-input-number.arco-input-number-mode-button {
+  .arco-input-prepend {
+    .arco-btn {
+      border-right: 0;
+    }
+  }
+  .arco-input-append {
+    .arco-btn {
+      border-left: 0;
+    }
+  }
+}

src/styles/arco-ui/a-input.less

@@ -0,0 +1,14 @@
+// 线性主题优化
+.arco-input-prepend {
+  border-right: none;
+}
+.arco-input-append {
+  border-left: none;
+}
+
+.arco-input-wrapper .arco-input.arco-input-size-medium,
+.arco-select-view-single.arco-select-view-size-medium .arco-select-view-input {
+  font-size: 13px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}

src/styles/arco-ui/a-menu.less

@@ -0,0 +1,8 @@
+.arco-trigger-menu-item.arco-trigger-menu-selected,
+.arco-trigger-menu-pop-header.arco-trigger-menu-selected {
+  color: rgb(var(--primary-6));
+}
+
+.arco-menu-icon-suffix {
+  transition: all 0.2s;
+}

src/styles/arco-ui/a-message.less

@@ -0,0 +1,28 @@
+.fade-message-enter-from {
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+}
+
+.fade-message-enter-to {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+.fade-message-enter-active,
+.fade-message-appear-active {
+  transition: opacity @transition-duration-3, transform @transition-duration-4;
+}
+
+.fade-message-leave-from {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+.fade-message-leave-to {
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+}
+
+.fade-message-leave-active {
+  position: absolute;
+}

src/styles/arco-ui/a-modal.less

@@ -0,0 +1,46 @@
+.arco-modal-title .arco-icon-exclamation-circle-fill {
+  font-size: 24px;
+}
+
+.arco-modal-title-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.arco-modal-simple {
+  width: 90%;
+  max-width: 400px;
+  padding: 14px 16px;
+  box-sizing: border-box;
+  .arco-modal-header {
+    .arco-modal-title {
+      // justify-content: flex-start;
+      font-size: 18px;
+    }
+  }
+  .arco-modal-body {
+    font-size: 16px;
+  }
+  .arco-modal-footer {
+    margin-top: 15px;
+    text-align: right;
+  }
+}
+
+.arco-drawer-header {
+  height: 56px;
+  padding: 0 24px;
+
+  .arco-drawer-title {
+    font-size: 18px;
+  }
+
+  .arco-drawer-close-btn {
+    font-size: 20px;
+  }
+}
+
+.arco-drawer-body {
+  padding: 16px 24px;
+}

src/styles/arco-ui/a-pagination.less

@@ -0,0 +1,41 @@
+// 分页组件
+.arco-pagination-item {
+  padding: 0 6px;
+  border: 1px solid var(--color-border-3);
+  background-color: var(--color-bg-2);
+  border-radius: var(--border-radius-medium);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: none;
+  box-sizing: border-box;
+  &:hover {
+    color: rgb(var(--primary-6));
+    border: 1px solid rgb(var(--primary-6));
+    background-color: rgba(var(--primary-6), 0.1);
+  }
+  &:active {
+    color: #fff;
+    background-color: rgb(var(--primary-6));
+    border: 1px solid rgb(var(--primary-6));
+  }
+}
+
+.arco-pagination-item-active {
+  color: #fff;
+  background-color: rgb(var(--primary-6));
+  border: 1px solid rgb(var(--primary-6));
+  &:hover {
+    color: #fff;
+    background-color: rgb(var(--primary-6));
+    border: 1px solid rgb(var(--primary-6));
+  }
+}
+
+.arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled,
+.arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled {
+  border-color: var(--color-border-2);
+  &:hover {
+    border-color: var(--color-border-2);
+  }
+}

src/styles/arco-ui/a-picker.less

@@ -0,0 +1,7 @@
+.arco-picker {
+  width: 100%;
+}
+
+.arco-picker-size-medium input {
+  font-size: 13px;
+}

src/styles/arco-ui/a-scrollbar.less

@@ -0,0 +1,19 @@
+.arco-scrollbar-track-direction-vertical {
+  width: 8px;
+}
+.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
+  width: 6px;
+  margin: 0 1px;
+}
+
+.arco-scrollbar-track-direction-horizontal {
+  height: 8px;
+}
+.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
+  height: 6px;
+  margin: 1px 0;
+}
+
+.arco-scrollbar-thumb-bar {
+  background-color: var(--color-neutral-3);
+}

src/styles/arco-ui/a-table.less

@@ -0,0 +1,3 @@
+.arco-table-th {
+  background-color: var(--color-bg-4);
+}

src/styles/arco-ui/a-tree.less

@@ -0,0 +1,18 @@
+.arco-tree-show-line .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::after,
+.arco-tree-show-line .arco-tree-node-indent-block::before {
+  transform: translateX(0);
+  border-color: var(--color-border-3);
+  flex-shrink: 0;
+}
+
+.arco-tree-node-minus-icon,
+.arco-tree-node-plus-icon {
+  border: 1px solid var(--color-border-3);
+  box-sizing: border-box;
+}
+
+.arco-tree-node-switcher-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/styles/arco-ui/index.less

@@ -0,0 +1,58 @@
+@import '@arco-themes/vue-gi-demo/index.less';
+
+@import './a-card.less';
+@import './a-input-number.less';
+@import './a-input.less';
+@import './a-modal.less';
+@import './a-pagination.less';
+@import './a-scrollbar';
+@import './a-tree.less';
+@import './a-descriptions.less';
+@import './a-table.less';
+@import './a-picker.less';
+@import './a-message.less';
+@import './a-menu.less';
+
+@color-menu-dark-bg: var(--color-bg-1);
+@card-color-bg: var(--color-bg-1);
+
+body {
+  --color-text-2: #42464e;
+  --color-text-3: #737a87;
+  --color-text-4: #737a87;
+  --color-bg-4: #f6f8fa;
+  --color-border-3: #dde2e9;
+}
+
+.app-menu-dark:extend(body[arco-theme='dark']) {
+  background-color: #001529 !important;
+  .arco-menu-light {
+    background-color: transparent;
+  }
+  .arco-menu-item,
+  .arco-menu-group-title,
+  .arco-menu-pop-header,
+  .arco-menu-inline-header {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(72, 72, 73);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(95, 95, 96);
+  }
+  ::-ms-scrollbar-thumb {
+    background-color: rgb(72, 72, 73);
+  }
+}
+
+// 禁止文本复制
+.arco-link,
+.arco-menu-title,
+.arco-menu-item-inner,
+.arco-tabs-tab-title,
+.arco-breadcrumb-item,
+.arco-checkbox-label {
+  user-select: none;
+}

src/styles/base.scss

@@ -0,0 +1,70 @@
+@import './var.scss';
+
+body {
+  --margin: 14px; // 通用外边距
+  --padding: 16px; // 通用内边距
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+html {
+  font-size: 14px;
+}
+
+body {
+  overflow: hidden;
+  color: var(--color-text-2);
+  background-color: #f5f7fd; // body背景颜色
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  // font-family: Avenir, Helvetica, Arial, sans-serif;
+  // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \5fae\8f6f\96c5\9ed1, Arial,
+  //   sans-serif;
+}
+
+body[arco-theme='dark'] {
+  background-color: #373739; // body背景颜色-深色模式
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+ul {
+  list-style: none !important;
+  margin-bottom: 0;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.ov-hidden {
+  overflow: hidden;
+}

src/styles/css/transition.css

@@ -0,0 +1,145 @@
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* fade-bottom */
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+/* fade-scale */
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+/* zoom-fade */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
+
+/* zoom-out */
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.15s ease-out;
+}
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* elementUI 的 Dialog 动画 */
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.el-dialog-enter-active {
+  animation: dialog-fade-in 0.3s;
+}
+.el-dialog-leave-active {
+  animation: dialog-fade-out 0.3s;
+}
+
+.el-mask-enter-active {
+  animation: modal-fade-in 0.3s;
+}
+.el-mask-leave-active {
+  animation: modal-fade-out 0.3s;
+}
+
+/* el-fade-bottom */
+.el-fade-enter-active,
+.el-fade-leave-active {
+  transition: all 0.3s;
+}
+.el-fade-enter-from {
+  opacity: 0;
+  transform: scale(1.1, 0.2);
+}
+.el-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.1, 0.2);
+}

src/styles/editor.scss

@@ -0,0 +1,37 @@
+body {
+  --w-e-textarea-bg-color: #fff;
+  --w-e-textarea-color: #333;
+  --w-e-textarea-border-color: #ccc;
+  --w-e-textarea-slight-border-color: #e8e8e8;
+  --w-e-textarea-slight-color: #d4d4d4;
+  --w-e-textarea-slight-bg-color: #f5f2f0;
+  --w-e-textarea-selected-border-color: #b4d5ff;
+  --w-e-textarea-handler-bg-color: #4290f7;
+  --w-e-toolbar-color: #595959;
+  --w-e-toolbar-bg-color: #fff;
+  --w-e-toolbar-active-color: #333;
+  --w-e-toolbar-active-bg-color: #f1f1f1;
+  --w-e-toolbar-disabled-color: #999;
+  --w-e-toolbar-border-color: #e8e8e8;
+  --w-e-modal-button-bg-color: #fafafa;
+  --w-e-modal-button-border-color: #d9d9d9;
+}
+
+body[arco-theme='dark'] {
+  --w-e-textarea-bg-color: var(--color-bg-2);
+  --w-e-textarea-color: var(--color-text-1);
+  --w-e-textarea-border-color: var(--color-border);
+  --w-e-textarea-slight-border-color: var(--color-border-2);
+  --w-e-textarea-slight-color: var(--color-text-4);
+  --w-e-textarea-slight-bg-color: var(--color-bg-2);
+  --w-e-textarea-selected-border-color: var(--color-primary-light-1);
+  --w-e-textarea-handler-bg-color: var(--color-primary-light-4);
+  --w-e-toolbar-color: #ccc;
+  --w-e-toolbar-bg-color: var(--color-bg-2);
+  --w-e-toolbar-active-color: #fff;
+  --w-e-toolbar-active-bg-color: var(--color-secondary-active);
+  --w-e-toolbar-disabled-color: var(--color-text-4);
+  --w-e-toolbar-border-color: var(--color-border);
+  --w-e-modal-button-bg-color: var(--color-fill-2);
+  --w-e-modal-button-border-color: var(--color-border);
+}

src/styles/global.scss

@@ -0,0 +1,248 @@
+/* 全局样式 */
+@import './var.scss';
+
+// 通用外边距
+.gi_margin {
+  margin: $margin;
+}
+
+// 通用内边距
+.gi_padding {
+  padding: $padding;
+}
+
+.gi_relative {
+  position: relative;
+}
+
+.gi_absolute {
+  position: absolute;
+}
+
+.gi_rotate_90deg {
+  transform: rotate(90deg);
+}
+
+.gi_rotate_-90deg {
+  transform: rotate(-90deg);
+}
+
+.gi_rotate_180deg {
+  transform: rotate(180deg);
+}
+
+.gi_rotate_-180deg {
+  transform: rotate(-180deg);
+}
+
+// 通用盒子
+.gi_box {
+  background: var(--color-bg-1);
+  border-radius: $radius-box;
+  overflow: hidden;
+}
+
+.gi_select_input {
+  width: 120px !important;
+}
+
+.gi_search_input {
+  width: 250px !important;
+}
+
+.gi_line_1 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.gi_line_2 {
+  -webkit-line-clamp: 2;
+}
+
+.gi_line_3 {
+  -webkit-line-clamp: 3;
+}
+
+.gi_line_4 {
+  -webkit-line-clamp: 4;
+}
+
+.gi_line_5 {
+  -webkit-line-clamp: 5;
+}
+
+.gi_line_2,
+.gi_line_3,
+.gi_line_4,
+.gi_line_5 {
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box; // 弹性伸缩盒
+  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+}
+
+.gi_mt {
+  margin-top: $margin;
+}
+
+.gi_mb {
+  margin-bottom: $margin;
+}
+
+.gi_ml {
+  margin-left: $margin;
+}
+
+.gi_mr {
+  margin-right: $margin;
+}
+
+.gi_mx {
+  margin: 0 $margin;
+}
+
+.gi_my {
+  margin: $margin 0;
+}
+
+.gi_m0 {
+  margin: 0;
+}
+
+.gi_pt {
+  padding-top: $margin;
+}
+
+.gi_pb {
+  padding-bottom: $margin;
+}
+
+.gi_pl {
+  padding-left: $margin;
+}
+
+.gi_pr {
+  padding-right: $margin;
+}
+
+.gi_px {
+  padding: 0 $padding;
+}
+
+.gi_py {
+  padding: $padding 0;
+}
+
+.gi_p0 {
+  padding: 0;
+}
+
+.gi_round {
+  border-radius: 100px;
+}
+
+.gi_hover_btn {
+  border: 0 !important;
+  background-color: transparent;
+
+  &:hover {
+    background: var(--color-secondary-hover) !important;
+  }
+
+  &:active {
+    background: var(--color-secondary-active) !important;
+  }
+}
+
+.gi_card {
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .arco-card-body {
+    flex: 1;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.gi_table_box {
+  max-height: 100%;
+  overflow: hidden;
+}
+
+// 使用场景，页面内容超出高度会自动滚动
+.gi_page {
+  flex: 1;
+  padding: $margin;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.gi_card_title {
+  .arco-card-header-title::before {
+    content: '';
+    width: 4px;
+    height: 50%;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgb(var(--primary-5));
+    border-radius: 0 4px 4px 0;
+  }
+}
+
+// 通用卡片
+.general-card {
+  height: 100%;
+  overflow-y: auto;
+  & > .arco-card-header {
+    height: auto;
+    padding: 20px;
+    border: none;
+  }
+  & > .arco-card-body {
+    padding: 0 20px 20px 20px;
+  }
+}
+
+// 通用描述
+.general-description {
+  position: relative;
+  .arco-descriptions-title {
+    padding-left: 10px;
+  }
+  .arco-descriptions-title::before {
+    content: '';
+    width: 4px;
+    height: 22px;
+    position: absolute;
+    left: 0;
+    background-color: rgb(var(--primary-5));
+    border-radius: 0 4px 4px 0;
+  }
+}
+
+.arco-table-cell {
+  .circle {
+    display: inline-block;
+    margin-right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgb(var(--blue-6));
+    vertical-align: middle;
+    &.pass {
+      background-color: rgb(var(--green-6));
+    }
+    &.fail {
+      background-color: rgb(var(--red-6));
+    }
+  }
+}

src/styles/index.scss

@@ -0,0 +1,17 @@
+// 基础样式
+@import './base.scss';
+
+// 全局类名样式
+@import './global.scss';
+
+// 自定义原生滚动条样式
+@import './scrollbar-reset.scss';
+
+// 自定义 nprogress 插件进度条颜色
+@import './nprogress.scss';
+
+// 富文本的css主题颜色变量
+@import './editor.scss';
+
+// 动画类名
+@import './animated.scss';

src/styles/mixin.scss

@@ -0,0 +1,18 @@
+@mixin scrollbar($size: 6px, $color: #d9d9d9) {
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: $size;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $color;
+    border-radius: $size;
+  }
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+  &::-webkit-scrollbar-track-piece {
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 0;
+  }
+}

src/styles/nprogress.scss

@@ -0,0 +1,4 @@
+// nprogress插件进度条颜色
+#nprogress .bar {
+  background: rgba(var(--primary-6), 0.5) !important; //自定义颜色
+}

src/styles/scrollbar-reset.scss

@@ -0,0 +1,22 @@
+/* 美化滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 6px;
+  border-radius: 6px;
+  background-color: var(--color-neutral-3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  width: 6px;
+  background-color: var(--color-neutral-4);
+}
+
+::-ms-scrollbar-thumb {
+  width: 6px;
+  border-radius: 6px;
+  background-color: var(--color-neutral-3);
+}

src/styles/var.scss

@@ -0,0 +1,20 @@
+// 颜色变量
+$color-theme: rgb(var(--primary-6));
+$color-primary: rgb(var(--primary-6));
+$color-success: rgb(var(--success-6));
+$color-warning: rgb(var(--warning-6));
+$color-danger: rgb(var(--danger-6));
+$color-info: rgb(var(--gray-6));
+
+$color-text-1: var(--color-text-1); // 标题、重点文本字体颜色
+$color-text-2: var(--color-text-2); // 文本-全局默认字体颜色
+$color-text-3: var(--color-text-3); // 二级文本颜色
+$color-text-4: var(--color-text-4); // 辅助文本颜色
+
+$color-border: var(--color-border); // 边框颜色、分割线颜色
+$color-bg-box: var(--color-bg-1);
+
+$margin: var(--margin);
+$padding: var(--padding);
+
+$radius-box: 2px;