初始化

2026-03-26 20:18:20 +08:00
commit 120a5b4dfd
368 changed files with 35926 additions and 0 deletions
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -0,0 +1,14 @@
+@import './reset.css';
+@import './nprogress.css';
+@import './transition.css';
+
+html,
+body,
+#app {
+  height: 100%;
+  font-size: 14px;
+}
+
+html {
+  overflow-x: hidden;
+}
--- a/src/styles/css/nprogress.css
+++ b/src/styles/css/nprogress.css
@@ -0,0 +1,83 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(var(--nprogress-color));
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px rgb(var(--nprogress-color)),
+    0 0 5px rgb(var(--nprogress-color));
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: rgb(var(--nprogress-color));
+  border-left-color: rgb(var(--nprogress-color));
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/styles/css/reset.css
+++ b/src/styles/css/reset.css
@@ -0,0 +1,378 @@
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'; /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  /* background-color: transparent;  */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
--- a/src/styles/css/transition.css
+++ b/src/styles/css/transition.css
@@ -0,0 +1,82 @@
+/* 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);
+}
--- a/src/styles/scss/element-plus.scss
+++ b/src/styles/scss/element-plus.scss
@@ -0,0 +1,486 @@
+$radius: 6px;
+
+html:root,
+html.dark:root {
+  @each $color in (primary, success, warning, info) {
+    --el-color-#{$color}: rgb(var(--#{$color}-color));
+    --el-color-#{$color}-dark-2: rgb(var(--#{$color}-600-color));
+    --el-color-#{$color}-light-3: rgb(var(--#{$color}-400-color));
+    --el-color-#{$color}-light-5: rgb(var(--#{$color}-300-color));
+    --el-color-#{$color}-light-7: rgb(var(--#{$color}-200-color));
+    --el-color-#{$color}-light-9: rgb(var(--#{$color}-color) / 0.1);
+  }
+
+  --el-color-danger: rgb(var(--error-color));
+  --el-color-danger-dark-2: rgb(var(--error-600-color));
+  --el-color-danger-light-3: rgb(var(--error-400-color));
+  --el-color-danger-light-5: rgb(var(--error-300-color));
+  --el-color-danger-light-7: rgb(var(--error-200-color));
+  --el-color-danger-light-9: rgb(var(--error-color) / 0.1);
+
+  --el-menu-item-hover-fill: rgba(0, 0, 0, 0.05);
+
+  --el-menu-item-height: 42px;
+  --business-form-shell-bg: var(--el-color-primary-light-9);
+  --business-form-shell-border: var(--el-color-primary-light-7);
+  --business-form-shell-title-color: var(--el-color-primary-dark-2);
+  --business-form-shell-action-color: var(--el-color-primary);
+  --business-form-shell-radius: 12px;
+}
+html.dark:root,
+.bg-inverted {
+  --el-menu-item-hover-fill: rgba(255, 255, 255, 0.1);
+}
+
+.bg-inverted {
+  .el-menu {
+    // --el-menu-bg-color: var(--el-fill-color-blank);
+    // --el-menu-text-color: var(--el-text-color-primary);
+    --el-menu-bg-color: transparent;
+    --el-menu-text-color: #e5eaf3;
+  }
+}
+
+:focus-visible {
+  outline: 0;
+}
+
+.el-menu--popup {
+  min-width: unset;
+}
+.el-popper {
+  border: none;
+  border-radius: $radius;
+}
+.el-menu {
+  border-right: none;
+  &.el-menu--horizontal {
+    border: none;
+  }
+  .el-sub-menu.is-active {
+    > .el-sub-menu__title {
+      color: var(--el-menu-active-color);
+    }
+  }
+  .el-sub-menu__title:hover,
+  li.el-menu-item:not(.is-disabled):hover,
+  .el-menu-item.is-active {
+    background-color: unset;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: auto;
+      left: 8px;
+      right: 8px;
+      top: 0;
+      bottom: 0;
+      border-radius: $radius;
+      pointer-events: none;
+      background-color: var(--el-menu-item-hover-fill);
+    }
+  }
+  li.el-menu-item {
+    margin-top: 6px;
+    &.is-active,
+    &.is-active:hover {
+      &::before {
+        background-color: var(--el-menu-hover-bg-color);
+      }
+    }
+  }
+  li.el-sub-menu {
+    margin-top: 6px;
+  }
+}
+
+html .el-collapse {
+  --el-collapse-header-font-size: 16px;
+  border: none;
+  .el-collapse-item__header {
+    border: none;
+  }
+  .el-collapse-item__wrap {
+    border: none;
+  }
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+}
+
+.el-card {
+  --el-card-padding: 16px;
+  .el-card__header {
+    font-weight: 500;
+    font-size: 16px;
+    padding-bottom: 0;
+  }
+}
+
+.el-statistic {
+  .el-statistic__content {
+    font-weight: 400;
+    font-size: 24px;
+  }
+}
+
+.el-form {
+  .el-form-item__label {
+    text-align: right;
+    align-items: center;
+    line-height: 1.2;
+  }
+}
+
+.el-dialog {
+  .el-dialog__footer {
+    overflow: hidden;
+  }
+}
+
+.business-form-dialog.el-dialog {
+  padding: 0;
+  overflow: hidden;
+  border-radius: var(--business-form-shell-radius);
+}
+
+.business-form-drawer.el-drawer {
+  overflow: hidden;
+
+  &.rtl {
+    border-radius: var(--business-form-shell-radius) 0 0 var(--business-form-shell-radius);
+  }
+
+  &.ltr {
+    border-radius: 0 var(--business-form-shell-radius) var(--business-form-shell-radius) 0;
+  }
+
+  &.ttb {
+    border-radius: 0 0 var(--business-form-shell-radius) var(--business-form-shell-radius);
+  }
+
+  &.btt {
+    border-radius: var(--business-form-shell-radius) var(--business-form-shell-radius) 0 0;
+  }
+}
+
+.business-form-dialog__header,
+.business-form-drawer__header {
+  padding: 16px 24px 14px !important;
+  background-color: var(--business-form-shell-bg);
+  border-bottom: 1px solid var(--business-form-shell-border);
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+
+.business-form-dialog__body,
+.business-form-drawer__body {
+  padding: 20px 24px 24px !important;
+}
+
+.business-form-dialog__footer,
+.business-form-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--business-form-shell-bg);
+  border-top: 1px solid var(--business-form-shell-border);
+  box-sizing: border-box;
+  padding: 12px 24px 20px !important;
+  border-radius: inherit;
+}
+
+.business-form-dialog__header,
+.business-form-drawer__header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.business-form-dialog__footer,
+.business-form-drawer__footer {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.business-form-dialog__header {
+  .el-dialog__title {
+    color: var(--business-form-shell-title-color);
+    font-weight: 600;
+  }
+
+  .el-dialog__headerbtn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    color: var(--business-form-shell-action-color);
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease;
+
+    .el-dialog__close {
+      color: inherit;
+    }
+
+    &:hover {
+      background-color: var(--el-color-primary-light-7);
+      color: var(--business-form-shell-title-color);
+    }
+  }
+}
+
+.business-form-drawer__header {
+  .el-drawer__title {
+    color: var(--business-form-shell-title-color);
+    font-weight: 600;
+  }
+
+  .el-drawer__close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    color: var(--business-form-shell-action-color);
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease;
+
+    svg {
+      color: inherit;
+    }
+
+    &:hover {
+      background-color: var(--el-color-primary-light-7);
+      color: var(--business-form-shell-title-color);
+    }
+  }
+}
+
+.business-form-dialog__scrollbar,
+.business-form-drawer__scrollbar {
+  width: 100%;
+
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+}
+
+.business-form-dialog__scrollbar-view,
+.business-form-drawer__scrollbar-view,
+.business-form-dialog__content,
+.business-form-drawer__content {
+  overflow-x: hidden;
+}
+
+.business-form-drawer__body {
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.business-form-drawer__scrollbar {
+  flex: 1;
+  min-height: 0;
+}
+
+.business-form-dialog__body {
+  .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+  }
+
+  .el-textarea__inner {
+    overflow-x: hidden;
+    word-break: break-word;
+  }
+}
+
+.business-form-drawer__body {
+  .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+  }
+
+  .el-textarea__inner {
+    overflow-x: hidden;
+    word-break: break-word;
+  }
+}
+
+.business-form-section + .business-form-section {
+  margin-top: 24px;
+}
+
+.business-form-section__title {
+  margin-bottom: 12px;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.business-form-label-with-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.business-form-label-tip {
+  display: inline-flex;
+  align-items: center;
+  color: var(--el-color-primary);
+  font-size: 14px;
+  cursor: help;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--el-color-primary-dark-2);
+  }
+}
+
+.business-form-label-tooltip {
+  max-width: 320px;
+  line-height: 1.6;
+  white-space: normal;
+}
+
+.business-form-label-popover {
+  max-width: 320px;
+}
+
+.business-form-label-popover__title {
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.business-form-label-popover__summary {
+  margin-top: 6px;
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.business-form-label-popover__list {
+  margin-top: 10px;
+}
+
+.business-form-label-popover__item + .business-form-label-popover__item {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+}
+
+.business-form-label-popover__item-title {
+  color: var(--el-text-color-primary);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.business-form-label-popover__item-desc {
+  margin-top: 2px;
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.business-form-radio-group {
+  display: flex;
+  min-height: 32px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 16px;
+}
+
+.business-form-switch-field {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+}
+
+.business-table-action-cell {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 8px;
+}
+
+.business-table-action-button {
+  min-width: 64px;
+  padding: 0 12px;
+}
+
+.business-table-action-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.business-table-action-menu__button {
+  width: 100%;
+  justify-content: center;
+  margin-left: 0 !important;
+}
+
+.el-card {
+  display: flex;
+  flex-direction: column;
+  .el-card__header {
+    border: none;
+  }
+  .el-card__body {
+    height: 100%;
+  }
+}
+
+.el-table {
+  .header {
+    border-top-left-radius: 3px;
+  }
+  .cell {
+    padding: 0;
+  }
+}
+
+.el-tabs {
+  &.segment {
+    border-radius: $radius;
+    border: none;
+    padding: 4px;
+    background-color: var(--el-fill-color-light);
+    --el-tabs-header-height: 30px;
+    .el-tabs__content {
+      display: none;
+    }
+    .el-tabs__header {
+      border: none;
+      .el-tabs__item {
+        border: none;
+        padding: 0 24px;
+        border-radius: $radius;
+      }
+    }
+  }
+}
+
+.el-divider__text {
+  font-size: 16px;
+}
+
+.el-segmented {
+  padding: 5px;
+  border-radius: $radius;
+  .el-segmented__item {
+    border-radius: $radius;
+    padding: 4px 20px;
+  }
+  .el-segmented__item-selected {
+    border-radius: $radius;
+  }
+}
--- a/src/styles/scss/global.scss
+++ b/src/styles/scss/global.scss
@@ -0,0 +1,2 @@
+@forward 'element-plus';
+@forward 'scrollbar';
--- a/src/styles/scss/scrollbar.scss
+++ b/src/styles/scss/scrollbar.scss
@@ -0,0 +1,21 @@
+@mixin scrollbar($size: 7px, $color: rgba(0, 0, 0, 0.5)) {
+  scrollbar-width: thin;
+  scrollbar-color: $color transparent;
+
+  &::-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;
+  }
+}