@phelan/design 0.0.1

package/packages/styles/src/editor.scss

@@ -0,0 +1,13 @@
+@use './theme.scss';
+.m-editor {
+  &.m-dialog.el-dialog {
+    min-height: 590px;
+    .default-btn {
+      height: 42px;
+    }
+  }
+
+  .view-area {
+    margin-bottom: 16px;
+  }
+}

package/packages/styles/src/empty.scss

@@ -0,0 +1,12 @@
+@use './theme.scss';
+.m-empty {
+	.el-empty__description {
+		margin-top: 6px;
+		p {
+			color: var(--el-text-color-disabled);
+		}
+	}
+	.el-empty__image {
+		width: 80px;
+	}
+}

package/packages/styles/src/file-task-dialog.scss

@@ -0,0 +1,13 @@
+@use './theme.scss';
+.m-file-task-dialog {
+  .m-search-panel {
+    padding-top: 0;
+  }
+  .m-pagination .el-pagination{
+    float: right;
+    margin-top: 16px;
+  }
+	.el-dialog__footer{ 
+		display: none;
+	}
+}

package/packages/styles/src/image.scss

@@ -0,0 +1,6 @@
+@use './theme.scss';
+
+.m-image {
+  border-radius: 4px;
+  background: #343d46;
+}

package/packages/styles/src/import-dialog.scss

@@ -0,0 +1,122 @@
+@use './theme.scss';
+.m-import-dialog {
+  box-sizing: border-box;
+  .content {
+    overflow: auto;
+    position: relative;
+    .el-upload {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    .el-upload-dragger {
+      background-color: #f5f5f6;
+      height: 209px;
+      border-radius: 4px;
+      color: #71777e;
+      border: 1px dashed #d3dcec;
+      &:hover {
+        background: #f2f7ff;
+        border: 1px dashed #0d3a93;
+        .m-icon svg {
+          color: #0d3a93;
+        }
+      }
+      &.is-dragover {
+        background: #fff;
+        border: 1px dashed #d3dcec;
+        color: #71777e;
+      }
+    }
+  }
+
+  .haveUplodLimit {
+    border: 1px dashed #0d3a93;
+    border-radius: 4px;
+    &:hover {
+      border: 1px dashed #0d3a93;
+    }
+    .el-upload-dragger {
+      background-color: #fff;
+      border: 0;
+      .m-icon svg {
+        color: #0d3a93;
+      }
+      &:hover {
+        border: 0;
+        background: #fff;
+      }
+    }
+  }
+
+  .el-upload-list {
+    margin: 0 16px;
+    .el-upload-list__item {
+      // border: 1px solid #d3dcec;
+      padding: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-radius: 4px;
+      color: #0d3a93;
+      .close-icon {
+        display: none;
+      }
+      &:hover {
+        background: #f2f7ff;
+        .check-icon {
+          display: none;
+        }
+        .close-icon {
+          display: block;
+        }
+      }
+
+      .left {
+        display: flex;
+        align-items: center;
+        width: calc(100% - 16px);
+        padding-right: 8px;
+        .m-icon {
+          margin-right: 8px;
+        }
+
+        .file-name {
+          flex: 1;
+          white-space: nowrap; /* 防止文本换行 */
+          overflow: hidden; /* 隐藏溢出的内容 */
+          text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
+        }
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .el-upload__text {
+    font-size: 16px;
+    color: #71777e;
+    em {
+      margin-left: 4px;
+      color: #0d3a93;
+      font-weight: 500;
+      text-decoration-line: underline;
+      text-decoration-skip-ink: none;
+      text-decoration-thickness: auto;
+      text-underline-offset: auto;
+      text-underline-position: from-font;
+    }
+  }
+  .file-template {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    .text {
+      margin-right: 16px;
+    }
+    margin-bottom: 16px;
+  }
+}

package/packages/styles/src/independent-nav.scss

@@ -0,0 +1,37 @@
+@use './theme.scss';
+
+.independent-nav {
+  --independent-nav-bg-color: var(--el-color-white);
+  --independent-nav-border-color: #e7e7e7;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: var(--independent-nav-bg-color);
+  border-bottom: 1px solid var(--independent-nav-border-color);
+
+  &__logo-outer {
+    flex: none;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    margin: 0 24px;
+  }
+
+  &__main,
+  &__right {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__main {
+    flex: auto;
+  }
+
+  &__right {
+    flex: none;
+    justify-content: flex-end;
+    margin: 0 0 0 24px;
+  }
+}

package/packages/styles/src/index.scss

@@ -0,0 +1,46 @@
+@use './variables.scss';
+@use './theme.scss';
+@use './button.scss';
+@use './date-picker.scss';
+@use './drawer.scss';
+@use './breadcrumb.scss';
+@use './nav.scss';
+@use './arrow-steps.scss';
+@use './arrow-step.scss';
+@use './independent-nav.scss';
+@use './dialog.scss';
+@use './radio.scss';
+@use './checkbox.scss';
+@use './search-panel.scss';
+@use './table.scss';
+@use './tabs.scss';
+@use './column-table.scss';
+@use './card.scss';
+@use './description.scss';
+@use './steps.scss';
+@use './tag.scss';
+@use './time-picker.scss';
+@use './time-select.scss';
+@use './pagination.scss';
+@use './calendar.scss';
+@use './link.scss';
+@use './select.scss';
+@use './cascader.scss';
+@use './empty.scss';
+@use './batch-copy.scss';
+@use './action-menu.scss';
+@use './tree.scss';
+@use './tree-select.scss';
+@use './switch.scss';
+@use './image.scss';
+@use './popover.scss';
+@use './tooltip.scss';
+@use './editor.scss';
+@use './message.scss';
+@use './batch-editor.scss';
+@use './input.scss';
+@use './input-number.scss';
+@use './import-dialog.scss';
+@use './file-task-dialog.scss';
+@use './table-grid.scss';
+@use './table-head-editor.scss';

package/packages/styles/src/input-number.scss

@@ -0,0 +1,34 @@
+@use './theme.scss';
+
+.m-input-number {
+  --m-input-number-width: 150px;
+  --m-input-border-color: #d3dcec;
+  --m-input-focus-box-shadow-color: #e3ecf9;
+  --m-input-border-radius: 2px;
+  --el-input-border-color: var(--m-input-border-color);
+  --el-border: 1px solid var(--el-input-border-color);
+  --el-input-border: var(--el-border);
+  --el-input-hover-border-color: var(--el-color-primary);
+  --el-input-hover-border: 1px solid var(--el-input-hover-border-color);
+  --el-input-focus-border-color: var(--el-color-primary);
+  --el-input-focus-border: 1px solid var(--el-input-focus-border-color);
+  --el-input-border-radius: var(--m-input-border-radius);
+
+  width: var(--m-input-number-width);
+
+  .el-input-number__decrease:hover ~ .el-input:not(.is-disabled),
+  .el-input-number__increase:hover ~ .el-input:not(.is-disabled) {
+    .el-input__wrapper {
+      border: var(--el-input-focus-border);
+      box-shadow: 0 0 0 2px var(--m-input-focus-box-shadow-color);
+    }
+  }
+}
+
+.el-form-item {
+  & > .el-form-item__content {
+    & > .m-input-number {
+      --m-input-number-width: 100%;
+    }
+  }
+}

package/packages/styles/src/input.scss

@@ -0,0 +1,28 @@
+@use './theme.scss';
+
+.m-input,
+.m-input-number .el-input {
+  --m-input-border-color: #d3dcec;
+  --m-input-focus-box-shadow-color: #e3ecf9;
+  --m-input-border-radius: 2px;
+  --el-input-border-color: var(--m-input-border-color);
+  --el-border: 1px solid var(--el-input-border-color);
+  --el-input-border: var(--el-border);
+  --el-input-hover-border-color: var(--el-color-primary);
+  --el-input-hover-border: 1px solid var(--el-input-hover-border-color);
+  --el-input-focus-border-color: var(--el-color-primary);
+  --el-input-focus-border: 1px solid var(--el-input-focus-border-color);
+  --el-input-border-radius: var(--m-input-border-radius);
+
+  .el-input__wrapper {
+    padding: 0 11px;
+    border: var(--el-border);
+    box-shadow: unset;
+
+    &:hover,
+    &.is-focus {
+      border: var(--el-input-focus-border);
+      box-shadow: 0 0 0 2px var(--m-input-focus-box-shadow-color);
+    }
+  }
+}

package/packages/styles/src/link.scss

@@ -0,0 +1,70 @@
+.m-link {
+    &.el-link--default {
+        color: var(--el-color-black, #101316);
+
+        &:hover {
+            color: var(--el-text-color-secondary, #71777e);
+        }
+    }
+    &.el-link--primary {
+        color: var(--el-color-primary, #0d3a93);
+
+        &:hover {
+            color: var(--el-color-primary-light-3, #5574b3);
+        }
+    }
+    &.el-link--success {
+        color: var(--el-color-success, #009258);
+
+        &:hover {
+            color: var(--el-color-success-light-3, #0eaf6b);
+        }
+    }
+    &.el-link--warning {
+        color: var(--el-color-warning, #ff6200);
+
+        &:hover {
+            color: var(--el-color-warning-light-3, #ff7800);
+        }
+    }
+    &.el-link--danger {
+        color: var(--el-color-danger, #d70000);
+        
+        &:hover {
+            color: var(--el-color-danger-light-3, #e34c4c);
+        }
+    }
+
+    &.is-disabled{
+        color: var(--el-text-color-disabled, #9AA4B2);
+        &:hover {
+            color: var(--el-text-color-disabled, #9AA4B2);
+        }
+    }
+
+    // 下划线样式
+    &.is-underline {
+        
+        &:hover {
+            &::after{
+                border-bottom: 1px solid currentColor;
+            }
+        }
+    }
+
+    &.is-underline-always {
+        &::after{
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0;
+            bottom: 0;
+            border-bottom: 1px solid currentColor;
+        }
+    }
+    
+    .el-icon{
+        margin-right: 8px;
+    }
+}

package/packages/styles/src/message.scss

@@ -0,0 +1,12 @@
+// Message 消息提示样式
+// Message 是命令式组件，主要通过 Element Plus 的样式
+// 这里可以添加自定义样式覆盖
+
+.m-message {
+  padding: 14px 24px;
+
+  .el-message__content {
+    font-size: 16px;
+    margin-left: 6px;
+  }
+}

package/packages/styles/src/mixins.scss

@@ -0,0 +1,60 @@
+// 清除浮动
+@mixin clearfix {
+    &::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+// 文本省略
+@mixin text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 多行文本省略
+@mixin text-ellipsis-multiline($lines: 2) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// 居中
+@mixin center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// 垂直居中
+@mixin vertical-center {
+    display: flex;
+    align-items: center;
+}
+
+// 水平居中
+@mixin horizontal-center {
+    display: flex;
+    justify-content: center;
+}
+
+// 滚动条样式
+@mixin scrollbar($width: 8px, $thumb-color: #c1c1c1, $track-color: #f1f1f1) {
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $thumb-color;
+        border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: $track-color;
+    }
+}

package/packages/styles/src/nav.scss

@@ -0,0 +1,12 @@
+@use './theme.scss';
+
+.m-nav {
+  --m-nav-bg-white: #f7f9fc;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  height: 56px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/packages/styles/src/overrides.scss

@@ -0,0 +1,25 @@
+// Element Plus 样式覆写
+@use "./variables.scss" as *;
+
+// 按钮样式覆写
+.el-button {
+    // 自定义按钮样式
+    &.m-button-custom {
+        border-radius: 6px;
+        font-weight: 500;
+    }
+}
+
+// 表格样式覆写
+.el-table {
+    // 自定义表格样式
+    &.m-table-custom {
+        .el-table__header {
+            th {
+                background-color: #f5f7fa;
+                color: $text-color-primary;
+                font-weight: 600;
+            }
+        }
+    }
+}

package/packages/styles/src/pagination.scss

@@ -0,0 +1,161 @@
+@use './theme.scss';
+.m-pagination {
+  --m-pagination-hover-bg-color: #4164aa;
+  --m-pagination-disabled-bg-color: #f5f5f6;
+  --m-pagination-hover-more-bg-color: #f0f2f5;
+  .el-pagination {
+    background: var(--el-color-white);
+    .el-select {
+      width: 112px;
+      .el-select__suffix .el-icon {
+        font-size: 16px;
+      }
+    }
+    .el-input {
+      width: 60px;
+      &.is-disabled .el-input__wrapper {
+        background-color: var(--el-color-white);
+      }
+    }
+    .el-pagination__total,
+    .el-pagination__jump {
+      color: var(--el-text-color-secondary);
+    }
+    .el-input,
+    .el-select {
+      color: var(--el-color-black);
+    }
+
+    .el-select-dropdown__list {
+      margin: 0;
+      padding: 8px;
+    }
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      &:disabled .el-icon {
+        color: var(--el-border-color);
+      }
+      // TODO 兼容文档样式问题
+      margin-top: 0;
+    }
+    .btn-prev,
+    .btn-next {
+      .el-icon {
+        font-size: 16px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+
+    .btn-prev,
+    .el-pagination__jump,
+    .el-pagination__sizes {
+      margin-left: 8px;
+    }
+    .btn-next {
+      margin-right: 0;
+    }
+    .el-pager {
+      padding: 0;
+      margin: 0;
+      li {
+        border-radius: 3px;
+        &.is-active {
+          font-weight: 400;
+        }
+        // 更多的icon替换逻辑
+        &.more {
+          &::after {
+            content: var(--more-icon);
+            display: block;
+            font-size: 14px;
+            line-height: 1;
+            width: 14px;
+            height: 14px;
+            background-color: var(--el-border-colore);
+          }
+          // 原来的icon大小
+          svg {
+            display: none;
+          }
+          &:hover:not(.is-disabled) {
+            background-color: var(--m-pagination-hover-more-bg-color);
+            color: var(--el-color-primary);
+            svg {
+              font-size: 16px;
+              display: block;
+            }
+
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+    // 有背景时候hover行为
+    &.is-background .el-pager li:hover {
+      background-color: var(--m-pagination-hover-bg-color);
+      color: var(--el-color-white);
+    }
+  }
+  // 置灰样式
+  &[disabled] {
+    .el-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .btn-prev .el-icon,
+      .btn-next .el-icon,
+      .el-pager .more svg {
+        color: var(--el-text-color-disabled);
+      }
+
+      .el-pager li.is-disabled,
+      .btn-prev,
+      .btn-next {
+        box-sizing: border-box;
+        background-color: var(--m-pagination-disabled-bg-color);
+        color: var(--el-text-color-disabled);
+        border: 1px solid var(--el-border-color);
+      }
+
+      // 更多的置灰逻辑
+      .el-pager li.more {
+        &::after {
+          content: var(--more-disabled-icon);
+        }
+        &:hover {
+          svg {
+            display: none;
+          }
+          &::after {
+            content: var(--more-disabled-icon);
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 修改下拉框的样式
+.m-pagination-popper {
+  &.el-popper {
+    .el-select-dropdown .el-select-dropdown__wrap {
+      .el-scrollbar__view {
+        padding: 6px;
+        .el-select-dropdown__item {
+          height: 32px;
+          border-radius: 4px;
+          margin: 2px;
+        }
+      }
+      .el-select-dropdown__item.is-selected {
+        font-weight: 500;
+      }
+    }
+    .el-popper__arrow {
+      display: none;
+    }
+  }
+}

package/packages/styles/src/popover.scss

@@ -0,0 +1,4 @@
+@use './theme.scss';
+
+.m-popover {
+}