@phelan/design 0.0.1

package/packages/styles/src/radio.scss

@@ -0,0 +1,54 @@
+@use './theme.scss';
+
+.m-radio {
+  --m-radio-font-weight: 400;
+  --m-radio-input-border-color: #cfd8e9;
+
+  --el-radio-input-border-color: var(--m-radio-input-border-color);
+  --el-radio-font-weight: var(--m-radio-font-weight);
+
+  // 修改选中文字样式
+  .el-radio__input.is-checked + .el-radio__label {
+    color: var(--el-text-color-regular);
+  }
+
+  //修改图标未选中样式
+  .el-radio__inner {
+    border-color: var(--el-radio-input-border-color);
+
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+  }
+
+  // 修改图标选中样式
+  .el-radio__input {
+    .el-radio__inner {
+      width: 16px;
+      height: 16px;
+      background: #fff;
+
+      &::after {
+        width: 8px;
+        height: 8px;
+        background-color: var(--el-color-primary);
+      }
+    }
+  }
+
+  .el-radio__input.is-checked .el-radio__inner {
+    background: #fff;
+  }
+
+  // 修改图标禁用选中样式
+  .el-radio__input.is-disabled.is-checked .el-radio__inner {
+    border-color: var(--el-radio-input-border-color);
+    background: #f3f5f9;
+  }
+
+  //  修改图标禁用未选中样式
+  .el-radio__input.is-disabled .el-radio__inner {
+    border-color: var(--el-radio-input-border-color);
+    background: #f3f5f9;
+  }
+}

package/packages/styles/src/search-panel.scss

@@ -0,0 +1,51 @@
+.m-search-panel {
+  background: #fff;
+  display: flex;
+  padding: 24px;
+
+  .el-form {
+    padding: unset;
+  }
+
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+
+  .m-search-form-area {
+    flex: 1;
+    margin-bottom: -18px;
+  }
+
+  .m-search-fold {
+    margin: 48px 8px 0 10px;
+    min-width: 46px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    font-size: 14px;
+
+    &--en {
+      width: 70px;
+    }
+
+    .fold-btn {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .m-search-operations {
+    display: flex;
+    flex-direction: column;
+    width: 84px;
+    gap: 16px;
+
+    &--nowrap {
+      flex-direction: row-reverse;
+      width: 184px;
+      margin-left: 16px;
+    }
+  }
+}

package/packages/styles/src/select.scss

@@ -0,0 +1,44 @@
+@use './theme.scss';
+
+$prefix: "m-select";
+
+.#{$prefix} {
+  --el-border-radius-base: 2px;
+
+  .el-select__wrapper {
+    border: 1px solid #d3dcec;
+    box-shadow: unset;
+  }
+  .el-select__wrapper.is-hovering {
+    border-color: var(--el-color-primary-light-3);
+    box-shadow: unset;
+  }
+  .el-select__wrapper.is-focused {
+    border-radius: 2px;
+    border: 1px solid var(--el-color-primary);
+    box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+  }
+
+  .el-select-dropdown__wrap {
+    .el-select-dropdown__list {
+      padding: 8px;
+
+      .el-select-dropdown__item {
+        padding: 0 16px 0 8px;
+
+        &.is-hovering {
+          background-color: #f5f5f6;
+
+          &:active {
+            background-color: var(--el-color-primary-light-9);
+          }
+        }
+      }
+    }
+  }
+
+  // popper箭头隐藏
+  .el-popper__arrow::before {
+    display: none;
+  }
+}

package/packages/styles/src/steps.scss

@@ -0,0 +1,336 @@
+@use "./theme.scss";
+
+$prefix: "m-steps";
+$prefixArrow: "m-steps-arrow";
+$prefixNavigation: "m-steps-navigation";
+
+.#{$prefix} {
+    .#{$prefix}-inner {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        height: 52px;
+
+        &--with-description {
+            height: 74px;
+        }
+
+        .#{$prefix}-item {
+            display: flex;
+            align-items: center;
+            position: relative;
+            flex: 1;
+
+            .#{$prefix}-item-icon {
+                flex-shrink: 0;
+                cursor: default;
+                -webkit-user-select: none; /* Safari */
+                user-select: none; /* 标准语法 */
+
+                &-inner {
+                    width: 22px;
+                    height: 22px;
+                    border-radius: 50%;
+                    background: #0d3a93;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0 12px;
+                    &-text {
+                        font-size: ALDI SUED Office;
+                        font-weight: bold;
+                        font-size: 14px;
+                        color: #fff;
+                    }
+                }
+            }
+
+            .#{$prefix}-item-content {
+                position: absolute;
+                overflow: visible;
+                white-space: nowrap;
+                left: 11px;
+                top: 28px;
+
+                &-title {
+                    line-height: 1.5;
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #0d3a93;
+                }
+                &-description {
+                    line-height: 1;
+                    font-size: 14px;
+                    color: #0d3a93;
+                }
+            }
+            .#{$prefix}-line {
+                height: 2px;
+                background: #d9d9d9;
+                flex: 1;
+
+                &--active {
+                    height: 2px;
+                    background: #0d3a93;
+                    flex: 1;
+                }
+            }
+
+            &.#{$prefix}-item--wait {
+                .#{$prefix}-item-icon {
+                    &-inner {
+                        background: #e7e7e7;
+
+                        &-text {
+                            color: #71777e;
+                        }
+                    }
+                }
+
+                .#{$prefix}-item-content {
+                    &-title {
+                        color: #71777e;
+                    }
+                    &-description {
+                        color: #71777e;
+                    }
+                }
+            }
+
+            &.#{$prefix}-item--finish {
+                .#{$prefix}-item-icon {
+                    &-inner {
+                        background: #e3ecf9;
+
+                        &-text {
+                            color: #0d3a93;
+                        }
+                    }
+                }
+
+                .#{$prefix}-item-content {
+                    &-title {
+                        color: #0d3a93;
+                    }
+                    &-description {
+                        color: #71777e;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.#{$prefixArrow} {
+    .#{$prefixArrow}-inner {
+        display: flex;
+        flex: 1;
+
+        .#{$prefixArrow}-item {
+            display: flex;
+            flex: 1;
+
+            .#{$prefixArrow}-item-icon {
+                flex-shrink: 0;
+                cursor: default;
+                -webkit-user-select: none; /* Safari */
+                user-select: none; /* 标准语法 */
+
+                &-inner {
+                    width: 22px;
+                    height: 22px;
+                    border-radius: 50%;
+                    background: #0d3a93;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0 12px;
+                    &-text {
+                        font-size: ALDI SUED Office;
+                        font-weight: bold;
+                        font-size: 14px;
+                        color: #fff;
+                    }
+                }
+            }
+
+            .#{$prefixArrow}-item-content {
+                white-space: nowrap;
+                flex: 1;
+
+                &-title {
+                    line-height: 1.3;
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #0d3a93;
+                }
+                &-description {
+                    line-height: 1.5;
+                    font-size: 14px;
+                    color: #0d3a93;
+                }
+            }
+            .#{$prefixArrow}-item-arrow {
+                color: #71777e;
+                align-self: center;
+            }
+
+            &.#{$prefixArrow}-item--wait {
+                .#{$prefixArrow}-item-icon {
+                    &-inner {
+                        background: #e7e7e7;
+
+                        &-text {
+                            color: #71777e;
+                        }
+                    }
+                }
+
+                .#{$prefixArrow}-item-content {
+                    &-title {
+                        color: #71777e;
+                    }
+                    &-description {
+                        color: #71777e;
+                    }
+                }
+            }
+
+            &.#{$prefixArrow}-item--finish {
+                .#{$prefixArrow}-item-icon {
+                    &-inner {
+                        background: #e3ecf9;
+
+                        &-text {
+                            color: #0d3a93;
+                        }
+                    }
+                }
+
+                .#{$prefixArrow}-item-content {
+                    &-title {
+                        color: #0d3a93;
+                    }
+                    &-description {
+                        color: #71777e;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.#{$prefixNavigation} {
+    height: 54px;
+
+    .#{$prefixNavigation}-inner {
+        display: flex;
+        flex: 1;
+
+        .#{$prefixNavigation}-item {
+            display: flex;
+            flex: 1;
+            position: relative;
+            cursor: pointer;
+
+            .#{$prefixNavigation}-item-icon {
+                flex-shrink: 0;
+                cursor: default;
+                -webkit-user-select: none; /* Safari */
+                user-select: none; /* 标准语法 */
+
+                &-inner {
+                    width: 22px;
+                    height: 22px;
+                    border-radius: 50%;
+                    background: #0d3a93;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0 12px;
+                    &-text {
+                        font-size: ALDI SUED Office;
+                        font-weight: bold;
+                        font-size: 14px;
+                        color: #fff;
+                    }
+                }
+            }
+
+            .#{$prefixNavigation}-item-content {
+                white-space: nowrap;
+                flex: 1;
+
+                &-title {
+                    line-height: 1.3;
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #0d3a93;
+                }
+                &-description {
+                    line-height: 1.5;
+                    font-size: 14px;
+                    color: #0d3a93;
+                }
+            }
+            .#{$prefixNavigation}-line {
+                height: 2px;
+                background: #0d3a93;
+                flex: 1;
+                position: absolute;
+                top: calc(100% + 8px);
+                left: 12px;
+                right: 22px;
+            }
+
+            .#{$prefixNavigation}-item-arrow {
+                color: #71777e;
+                align-self: center;
+            }
+
+            &.#{$prefixNavigation}-item--wait {
+                cursor: not-allowed;
+
+                .#{$prefixNavigation}-item-icon {
+                    &-inner {
+                        background: #e7e7e7;
+
+                        &-text {
+                            color: #71777e;
+                        }
+                    }
+                }
+
+                .#{$prefixNavigation}-item-content {
+                    &-title {
+                        color: #71777e;
+                    }
+                    &-description {
+                        color: #71777e;
+                    }
+                }
+            }
+
+            &.#{$prefixNavigation}-item--finish {
+                .#{$prefixNavigation}-item-icon {
+                    &-inner {
+                        background: #e3ecf9;
+
+                        &-text {
+                            color: #0d3a93;
+                        }
+                    }
+                }
+
+                .#{$prefixNavigation}-item-content {
+                    &-title {
+                        color: #0d3a93;
+                    }
+                    &-description {
+                        color: #71777e;
+                    }
+                }
+            }
+        }
+    }
+}

package/packages/styles/src/switch.scss

@@ -0,0 +1,35 @@
+@use './theme.scss';
+
+.m-switch {
+  --el-switch-on-color: #e3ecf9;
+  --el-switch-off-color: #e7e7e7;
+
+  &.is-checked {
+    .el-switch__core {
+      .el-switch__inner {
+        .is-text {
+          color: var(--el-color-primary);
+        }
+      }
+      .el-switch__action {
+        background-color: var(--el-color-primary);
+        left: calc(100% - 22px);
+      }
+    }
+  }
+  .el-switch__core {
+    min-width: 48px;
+    height: 24px;
+    border-radius: 1000px;
+    .el-switch__inner {
+      .is-text {
+        color: #676d74;
+      }
+    }
+
+    .el-switch__action {
+      background-color: #676d74;
+      left: 5px;
+    }
+  }
+}

package/packages/styles/src/table-grid.scss

@@ -0,0 +1,37 @@
+.m-table-grid {
+    .m-table-grid-search-panel{
+        margin-bottom: 16px;
+    }
+    
+    .m-table-grid-container {
+        .m-button + .m-button {
+            margin-left: 16px;
+        }
+    
+        .m-button + .m-link {
+            margin-left: 16px;
+        }
+    
+        .m-link + .m-link {
+            margin-left: 16px;
+        }
+    
+        .m-link + .m-button {
+            margin-left: 16px;
+        }
+
+        padding: 20px 24px 24px;
+        background-color: #fff;
+        border-radius: 4px;
+
+        .m-table-grid-toolbar {
+            margin-bottom: 10px;
+        }
+    
+        .m-table-grid-pagination {
+            margin-top: 28px;
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+}

package/packages/styles/src/table-head-editor.scss

@@ -0,0 +1,112 @@
+.m-table-head-editor {
+  &__content-checkbox {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #d3dcec;
+    &:hover {
+      background-color: #f5f7fa;
+      cursor: pointer;
+    }
+  }
+
+  .m-tree {
+    --el-tree-node-content-height: 50px;
+    .el-tree-node__content {
+      border-bottom: 1px solid #d3dcec;
+      position: relative;
+
+      // 拖拽指示器 - 在节点上方（before）
+      &.is-drag-before {
+        &::before {
+          content: '';
+          background-color: var(--el-color-primary);
+          position: absolute;
+          height: 2px;
+          width: 100%;
+          top: -1px;
+          left: 0;
+          z-index: 10;
+          pointer-events: none;
+          box-shadow: 0 0 4px rgba(var(--el-color-primary-rgb), 0.5);
+        }
+      }
+
+      // 拖拽指示器 - 在节点下方（after）
+      &.is-drag-after {
+        &::after {
+          content: '';
+          background-color: var(--el-color-primary);
+          position: absolute;
+          height: 2px;
+          width: 100%;
+          bottom: -1px;
+          left: 0;
+          z-index: 10;
+          pointer-events: none;
+          box-shadow: 0 0 4px rgba(var(--el-color-primary-rgb), 0.5);
+        }
+      }
+    }
+
+    .el-tree__drop-indicator {
+      display: none !important;
+    }
+    .el-tree-node > .el-tree-node__children {
+      overflow: visible;
+    }
+  }
+
+  &__fixed-icon {
+    cursor: pointer;
+    transition: color 0.2s;
+    color: var(--el-text-color-secondary);
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+
+    &--active {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &__tree-node {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    margin-right: 16px;
+    height: 50px;
+  }
+
+  &__content-item-icon {
+    display: flex;
+    gap: 12px;
+    font-size: 20px;
+    align-items: center;
+
+    .drag-handle {
+      cursor: move;
+      cursor: grab;
+      display: flex;
+      align-items: center;
+      padding: 4px;
+      color: var(--el-text-color-secondary);
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/packages/styles/src/table.scss

@@ -0,0 +1,33 @@
+@use './theme.scss';
+
+.m-table {
+  --m-table-border-color: #e6ebf4;
+  --m-table-header-bg-color: #f5f5f6;
+  &.m-table-outline {
+    border: 1px solid var(--m-table-border-color);
+    border-bottom: 0;
+    border-radius: 4px;
+
+    &.table-border-bottom {
+      border-bottom: 1px solid var(--m-table-border-color);
+    }
+  }
+
+  &.el-table th.el-table__cell {
+    background: var(--m-table-header-bg-color);
+    color: #343d46;
+  }
+
+  &.el-table .el-table__cell {
+    padding: 14px 0;
+    color: #101316;
+  }
+
+  &.el-table--small .el-table__cell {
+    padding: 11px 0;
+  }
+
+  &.el-table--large .el-table__cell {
+    padding: 16px 0;
+  }
+}