@utogether/udp-core 1.0.0

package/src/style/dark.scss

@@ -0,0 +1,218 @@
+@use 'sass:color';
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
+
+// 默认主题
+html[data-vxe-ui-theme='dark'] {
+  // 字体颜色
+  --vxe-ui-font-color: #fff !important;
+  --vxe-ui-table-font-color: #fff !important;
+  --el-bg-color: #020409;
+
+  // 禁用颜色
+  --vxe-ui-font-disabled-color: #fff;
+
+  // --el-disabled-text-color: #040404;
+  // --vxe-ui-input-disabled-background-color: #fafafa;
+  // --el-disabled-bg-color: #fafafa;
+}
+
+/* 整体暗色风格适配 */
+html.dark {
+  /* 自定义深色背景颜色 */
+  $border-style: #303030;
+  $color-white: #fff;
+
+  /* 常用border-color 需要时可取用 */
+  --udp-border-color: rgb(253 253 253 / 12%);
+
+  /* switch关闭状态下的color 需要时可取用 */
+  --udp-switch-off-color: #ffffff3f;
+
+  .ut-grid-wrapper,
+  .ut-content,
+  .ut-content-top,
+  .ut-content-body,
+  .ut-divider-wrapper,
+  .system-navbar,
+  .tags-view,
+  .contextmenu,
+  .sidebar-container,
+  .horizontal-header,
+  .sidebar-logo-container,
+  .horizontal-header .el-sub-menu__title,
+  .horizontal-header .submenu-title-noDropdown,
+  .home-page {
+    background: var(--el-bg-color) !important;
+  }
+
+  .ut-content-body,
+  .ut-divider-wrapper,
+  .ut-content-top {
+    border-color: var(--el-bg-color) !important;
+  }
+
+  .app-main,
+  .app-main-nofixed-header {
+    background: #020409 !important;
+  }
+
+  .logic-flow-view,
+  .wangeditor {
+    filter: invert(0.9) hue-rotate(180deg);
+  }
+
+  /* 标签页 */
+  .tags-view {
+    .arrow-left,
+    .arrow-right {
+      border-right: 1px solid $border-style;
+      box-shadow: none;
+    }
+
+    .arrow-right {
+      border-left: 1px solid $border-style;
+    }
+
+    .scroll-item {
+      .el-icon-close {
+        &:hover {
+          color: rgb(255 255 255 / 85%) !important;
+          background-color: rgb(255 255 255 / 12%);
+        }
+      }
+    }
+
+    .chrome-tab {
+      .tag-title {
+        color: #666;
+      }
+
+      &:hover {
+        .chrome-tab__bg {
+          color: #333;
+        }
+
+        .tag-title {
+          color: #adadad;
+        }
+      }
+    }
+  }
+
+  /* vxe-table */
+  .vxe-table--header-wrapper,
+  .vxe-table--body-wrapper {
+    color: var(--el-text-color-primary);
+    background: var(--el-bg-color) !important;
+
+    .vxe-body--row.row--stripe {
+      background-color: inherit !important;
+    }
+
+    .vxe-cell > span:first-child:not(.vxe-cell--title) {
+      color: var(--vxe-ui-table-font-color);
+    }
+  }
+
+  .vxe-table--render-default .vxe-body--row.row--current .col--checkbox {
+    background-color: inherit !important;
+  }
+
+  // .vxe-toolbar {
+  //   border-color: var(--el-table-row-hover-bg-color) !important;
+  //   background: var(--el-table-row-hover-bg-color) !important;
+  //   color: var(--el-table-header-text-color);
+  // }
+
+  .vxe-table--header {
+    color: var(--el-table-header-text-color);
+    background: var(--el-table-row-hover-bg-color) !important;
+    border-color: var(--el-table-row-hover-bg-color) !important;
+  }
+
+  /* 项目配置面板 */
+  .right-panel-items {
+    .el-divider__text {
+      --el-bg-color: var(--el-bg-color);
+    }
+
+    .el-divider--horizontal {
+      border-top: none;
+    }
+  }
+
+  /* 表单设计器 */
+  .design-form {
+    .el-main.config-content,
+    .el-header,
+    .el-main.widget-empty,
+    .widget-form-list,
+    .el-aside,
+    .widget-view {
+      background: var(--el-bg-color) !important;
+    }
+
+    .form-edit-widget-label a {
+      color: $color-white;
+      background: var(--el-color-primary);
+      border: none;
+      border-radius: 5px;
+    }
+
+    .el-aside {
+      color: $color-white;
+    }
+  }
+
+  /* element-plus */
+  .el-table__cell {
+    background: var(--el-bg-color);
+  }
+
+  .el-card {
+    --el-card-bg-color: var(--el-bg-color);
+
+    // border: none !important;
+  }
+
+  .el-backtop {
+    --el-backtop-bg-color: var(--el-color-primary-light-9);
+    --el-backtop-hover-bg-color: var(--el-color-primary);
+  }
+
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    background: transparent;
+  }
+
+  /* 自定义菜单搜索样式 */
+  .udp-search-dialog {
+    .el-dialog__footer {
+      box-shadow:
+        0 -1px 0 0 #555a64,
+        0 -3px 6px 0 rgb(69 98 155 / 12%);
+    }
+
+    .search-footer {
+      .search-footer-item {
+        color: rgb(235 235 235 / 60%);
+
+        .icon {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  /* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
+  .udp-scrollbar {
+    scrollbar-color: rgb(63 64 66) transparent;
+
+    ::-webkit-scrollbar-thumb {
+      background-color: rgb(63 64 66);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgb(92 93 96);
+    }
+  }
+}

package/src/style/element-plus.scss

@@ -0,0 +1,206 @@
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+/******** select start *********/
+
+.el-select > .el-select__wrapper.is-disabled {
+  background-color: var(--vxe-ui-input-disabled-background-color);
+}
+
+/******** select *********/
+
+/** drawer */
+.el-drawer {
+  &__header {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+
+  &__body {
+    padding: 0;
+  }
+}
+
+/***************  */
+
+/** drawer */
+.el-backtop {
+  z-index: 4096;
+}
+
+/***************  */
+
+.el-upload {
+  input[type='file'] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+.el-button--small {
+  height: 25px;
+  padding: 5px 15px;
+}
+
+// dropdown
+
+.el-dropdown {
+  // &-menu {
+  //   // padding: 2px 0 !important;
+  //   // &__item {
+  //   //   padding-bottom: 5px !important;
+  //   // }
+  // }
+  .el-button--small {
+    height: 25px;
+    padding: 2px 3px;
+    font-size: 12px;
+  }
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.is-dark {
+  z-index: 99999 !important;
+}
+
+.el-popper {
+  z-index: 99999 !important;
+}
+
+/* nprogress 适配 element-plus 的主题色 */
+#nprogress {
+  & .bar {
+    background-color: var(--el-color-primary) !important;
+  }
+
+  & .peg {
+    box-shadow:
+      0 0 10px var(--el-color-primary),
+      0 0 5px var(--el-color-primary) !important;
+  }
+
+  & .spinner-icon {
+    border-top-color: var(--el-color-primary);
+    border-left-color: var(--el-color-primary);
+  }
+}
+
+.el-dropdown-menu .el-dropdown-menu__item {
+  // margin-top: 8px;
+  padding: 2px 5px 2px 0;
+}
+
+.el-message {
+  z-index: 8688 !important;
+}
+
+.el-message__closeBtn {
+  transform: none;
+}
+
+// 详情view
+.el-scrollbar__view {
+  width: 100%;
+  height: 100%;
+
+  .ut-main-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.el-select-dropdown__item {
+  padding: 0 10px !important;
+}
+
+/* 自定义菜单搜索样式 */
+.udp-search-dialog {
+  @media screen and (width > 760px) and (width <= 940px) {
+    .el-input__inner {
+      font-size: 12px;
+    }
+  }
+
+  @media screen and (width <= 470px) {
+    .el-input__inner {
+      font-size: 12px;
+    }
+  }
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding-top: 12px;
+    padding-bottom: 0;
+  }
+
+  .el-input__inner {
+    font-size: 1.2em;
+  }
+
+  .el-dialog__footer {
+    padding-bottom: 10px;
+    box-shadow:
+      0 -1px 0 0 #e0e3e8,
+      0 -3px 6px 0 rgb(69 98 155 / 12%);
+  }
+}
+
+/* 自定义popover */
+.udp-popper {
+  padding: 0 !important;
+}
+
+// 重置disable 颜色
+.el-input.is-disabled .el-input__inner {
+  color: #040404;
+  -webkit-text-fill-color: #040404;
+}
+
+/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
+.udp-scrollbar {
+  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
+
+  /* Firefox */
+  scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
+  ::-webkit-scrollbar {
+    width: 6px; /* 滚动条宽度 */
+  }
+
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background: transparent; /* 轨道颜色 */
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(221 222 224);
+    border-radius: 4px;
+  }
+
+  /* 滚动条滑块：hover状态 */
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgb(199 201 203); /* 滑块hover颜色 */
+  }
+}

package/src/style/index.scss

@@ -0,0 +1,76 @@
+@use 'theme';
+@use 'clear-mixin';
+@use 'transition';
+@use 'element-plus';
+@use 'sidebar';
+@use 'button';
+@use 'vxetable';
+@use 'dark';
+
+/* 自定义全局 CssVar */
+:root {
+  --udp-transition-duration: 0.016s;
+
+  /* 常用border-color 需要时可取用 */
+  --udp-border-color: rgb(5 5 5 / 6%);
+
+  /* switch关闭状态下的color 需要时可取用 */
+  --udp-switch-off-color: #a6a6a6;
+  --el-text-color-regular: #000;
+
+  /** 主题色 */
+  --udp-theme-sub-menu-active-text: initial;
+  --udp-theme-menu-bg: none;
+  --udp-theme-menu-hover: none;
+  --udp-theme-sub-menu-bg: transparent;
+  --udp-theme-sub-menu-active-bg: none;
+  --udp-theme-nav-text-color: none;
+  --udp-theme-menu-text: initial;
+  --udp-theme-sidebar-logo: #001529;
+  --udp-theme-menu-title-hover: initial;
+  --udp-theme-menu-active-before: transparent;
+}
+
+/* 灰色模式 */
+.html-grey {
+  filter: grayscale(100%);
+}
+
+/* 色弱模式 */
+.html-weakness {
+  filter: invert(80%);
+}
+
+.ut-main-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: #f7f8f9;
+
+  .ut-page-header {
+    padding: 5px 10px;
+    margin-bottom: 5px;
+    border-bottom: 1px solid #e0ebf6;
+  }
+
+  .ut-page-content {
+    margin: 5px;
+    border: 1px solid #e0ebf6;
+    border-radius: 5px;
+  }
+}
+
+// 自定义插件的css
+.ut-coSelect-option {
+  float: right;
+  font-size: 13px;
+  color: #8492a6;
+}
+
+.ut-success {
+  color: #34a782;
+}
+
+.ut-danger {
+  color: #f56c6c;
+}