y-admin-pro 0.0.1

package/packages/ele-split-panel/props.ts

@@ -0,0 +1,51 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+
+/**
+ * 属性
+ */
+export const splitPanelProps = {
+  /** 默认大小 */
+  size: String,
+  /** 最小尺寸 */
+  minSize: Number,
+  /** 最大尺寸 */
+  maxSize: Number,
+  /** 间距 */
+  space: String,
+  /** 自定义边栏样式 */
+  customStyle: Object as PropType<StyleValue>,
+  /** 自定义边栏容器样式 */
+  customWrapStyle: Object as PropType<StyleValue>,
+  /** 自定义内容样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 是否可折叠 */
+  allowCollapse: Boolean,
+  /** 折叠按钮样式 */
+  collapseStyle: Object as PropType<StyleValue>,
+  /** 是否折叠 */
+  collapse: Boolean,
+  /** 是否垂直方向 */
+  vertical: Boolean,
+  /** 是否反向布局 */
+  reverse: Boolean,
+  /** 是否可拉伸宽度 */
+  resizable: Boolean,
+  /** 内部表格弹性布局 */
+  flexTable: Boolean,
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: null
+  }
+};
+
+export type SplitPanelProps = ExtractPropTypes<typeof splitPanelProps>;
+
+/**
+ * 事件
+ */
+export const splitPanelEmits = {
+  /** 更新折叠状态 */
+  'update:collapse': (_collapse: boolean) => true
+};

package/packages/ele-split-panel/style/index.scss

@@ -0,0 +1,360 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-split-panel {
+  display: flex;
+  position: relative;
+  --ele-split-size: 200px;
+  --ele-split-space: 16px;
+
+  /* 侧边容器 */
+  & > .ele-split-panel-wrap {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: calc(var(--ele-split-size) + var(--ele-split-space));
+    display: flex;
+    justify-content: flex-end;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 1;
+
+    /* 侧边 */
+    & > .ele-split-panel-side {
+      flex-shrink: 0;
+      width: var(--ele-split-size);
+      border: 1px solid elVar('border-color', 'light');
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    /* 间距 */
+    & > .ele-split-panel-space {
+      flex-shrink: 0;
+      width: var(--ele-split-space);
+      box-sizing: border-box;
+      position: relative;
+
+      /* 拉伸线 */
+      .ele-split-resize-line {
+        width: 12px;
+        height: 100%;
+        position: absolute;
+        left: -6px;
+        z-index: 4;
+        cursor: e-resize;
+
+        &::after {
+          content: '';
+          width: 3px;
+          height: 100%;
+          display: block;
+          margin: 0 auto;
+        }
+
+        &:hover::after {
+          background: elVar('color-primary');
+        }
+      }
+    }
+  }
+
+  /* 内容 */
+  & > .ele-split-panel-body {
+    flex: 1;
+    overflow: auto;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  /* 折叠按钮 */
+  & > .ele-split-collapse-button {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: var(--ele-split-size);
+    border-radius: 50%;
+    border: 1px solid elVar('border-color', 'extra-light');
+    box-sizing: border-box;
+    margin: -12px 0 0 -12px;
+    background: elVar('bg-color', 'overlay');
+    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    z-index: 5;
+
+    .ele-split-collapse-icon {
+      font-size: 14px;
+      color: elVar('text-color', 'secondary');
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: scaleX(1);
+
+      & > svg {
+        stroke-width: 5;
+      }
+    }
+
+    &:hover .ele-split-collapse-icon {
+      color: elVar('text-color', 'primary');
+    }
+  }
+
+  /* 折叠状态 */
+  &.is-collapse {
+    & > .ele-split-panel-wrap {
+      width: 0 !important;
+      pointer-events: none;
+      opacity: 0;
+    }
+
+    & > .ele-split-collapse-button {
+      left: 0;
+
+      .ele-split-collapse-icon {
+        transform: scaleX(-1);
+      }
+    }
+  }
+
+  /* 垂直 */
+  &.is-vertical {
+    flex-direction: column;
+
+    & > .ele-split-panel-wrap {
+      flex-direction: column;
+      height: calc(var(--ele-split-size) + var(--ele-split-space));
+      width: auto;
+
+      & > .ele-split-panel-side {
+        height: var(--ele-split-size);
+        width: auto;
+      }
+
+      & > .ele-split-panel-space {
+        height: var(--ele-split-space);
+        width: auto;
+
+        .ele-split-resize-line {
+          width: 100%;
+          height: 12px;
+          left: auto;
+          top: -6px;
+          cursor: n-resize;
+
+          &::after {
+            width: 100%;
+            height: 3px;
+            margin: 4px 0 0 0;
+          }
+        }
+      }
+    }
+
+    & > .ele-split-collapse-button {
+      top: var(--ele-split-size);
+      left: 50%;
+
+      .ele-split-collapse-icon {
+        transform: scaleY(1);
+      }
+    }
+
+    &.is-collapse {
+      & > .ele-split-panel-wrap {
+        width: auto !important;
+        height: 0 !important;
+      }
+
+      & > .ele-split-collapse-button {
+        top: 0;
+
+        .ele-split-collapse-icon {
+          transform: scaleY(-1);
+        }
+      }
+    }
+  }
+
+  /* 反向 */
+  &.is-reverse {
+    flex-direction: row-reverse;
+
+    & > .ele-split-panel-wrap {
+      flex-direction: row-reverse;
+
+      & > .ele-split-panel-space .ele-split-resize-line {
+        left: auto;
+        right: -6px;
+      }
+    }
+
+    & > .ele-split-collapse-button {
+      left: auto;
+      right: var(--ele-split-size);
+      margin: -12px -12px 0 0;
+
+      .ele-split-collapse-icon {
+        transform: scaleX(-1);
+      }
+    }
+
+    &.is-collapse > .ele-split-collapse-button {
+      right: 0;
+
+      .ele-split-collapse-icon {
+        transform: scaleX(1);
+      }
+    }
+
+    &.is-vertical {
+      flex-direction: column-reverse;
+
+      & > .ele-split-panel-wrap {
+        flex-direction: column-reverse;
+
+        & > .ele-split-panel-space .ele-split-resize-line {
+          top: auto;
+          right: auto;
+          bottom: -6px;
+        }
+      }
+
+      & > .ele-split-collapse-button {
+        left: 50%;
+        top: auto;
+        bottom: var(--ele-split-size);
+        margin: 0 0 -12px -12px;
+
+        .ele-split-collapse-icon {
+          transform: scaleY(-1);
+        }
+      }
+
+      &.is-collapse > .ele-split-collapse-button {
+        bottom: 0;
+
+        .ele-split-collapse-icon {
+          transform: scaleY(1);
+        }
+      }
+    }
+  }
+
+  /* 拉伸状态 */
+  &.is-resizing {
+    user-select: none;
+
+    & > .ele-split-panel-wrap,
+    & > .ele-split-collapse-button {
+      transition: none;
+    }
+  }
+
+  /* 遮罩层 */
+  .ele-split-panel-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    backdrop-filter: blur(6px);
+    background: rgba(158, 158, 158, 0.2);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+    display: none;
+    z-index: 2;
+  }
+
+  /* 内部表格弹性布局 */
+  &.is-flex-table {
+    flex: 1;
+    overflow: auto;
+
+    & > .ele-split-panel-body,
+    & > .ele-split-panel-wrap > .ele-split-panel-side {
+      display: flex;
+      flex-direction: column;
+
+      & > .ele-pro-table {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+
+        & > .el-table {
+          flex: 1;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+/* 小屏幕样式 */
+@media screen and (max-width: 768px) {
+  .ele-split-panel.is-responsive:not(.is-vertical) {
+    &:not(.is-collapse) {
+      overflow: hidden !important;
+    }
+
+    & > .ele-split-panel-wrap {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+
+      & > .ele-split-panel-side {
+        background: elVar('bg-color');
+        border: none;
+        z-index: 3;
+      }
+    }
+
+    & > .ele-split-panel-body {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    & > .ele-split-panel-mask {
+      display: block;
+    }
+
+    &:not(.is-collapse) {
+      & > .ele-split-panel-mask {
+        left: var(--ele-split-size);
+        pointer-events: all;
+        opacity: 1;
+      }
+
+      & > .ele-split-panel-body {
+        transform: translateX(
+          calc(var(--ele-split-size) + var(--ele-split-space))
+        );
+        z-index: 1;
+      }
+    }
+
+    /* 反向 */
+    &.is-reverse {
+      & > .ele-split-panel-wrap {
+        right: 0;
+        left: auto;
+      }
+
+      &:not(.is-collapse) {
+        & > .ele-split-panel-mask {
+          left: 0;
+          right: var(--ele-split-size);
+        }
+
+        & > .ele-split-panel-body {
+          transform: translateX(
+            calc(0px - var(--ele-split-size) - var(--ele-split-space))
+          );
+        }
+      }
+    }
+  }
+}

package/packages/ele-split-panel/style/index.ts

@@ -0,0 +1,2 @@
+import 'element-plus/es/components/icon/style/index';
+import './index.scss';

package/packages/ele-steps/index.vue

@@ -0,0 +1,44 @@
+<!-- 步骤条 -->
+<template>
+  <ElSteps
+    v-bind="omit($props, ['items', 'type'])"
+    ref="stepsRef"
+    :class="[
+      'ele-steps',
+      { 'is-inline': direction === 'horizontal' && type === 'inline' }
+    ]"
+  >
+    <ElStep v-for="(item, index) in optionData" :key="index" v-bind="item">
+      <template
+        v-for="name in Object.keys($slots).filter((k) => 'default' !== k)"
+        #[name]
+      >
+        <slot :name="name" :index="index" :item="item"></slot>
+      </template>
+    </ElStep>
+  </ElSteps>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElSteps, ElStep } from 'element-plus';
+  import type { ElStepInstance } from '../ele-app/el';
+  import { omit } from '../utils/common';
+  import { useProOptions } from '../utils/hook';
+  import type { StepItem } from './types';
+  import { stepsProps } from './props';
+
+  defineOptions({ name: 'EleSteps' });
+
+  const props = defineProps(stepsProps);
+
+  const { optionData, reloadOptions } = useProOptions<StepItem>(props, 'items');
+
+  /** 组件引用 */
+  const stepsRef = ref<ElStepInstance>(null);
+
+  defineExpose({
+    reloadOptions,
+    stepsRef
+  });
+</script>

package/packages/ele-steps/props.ts

@@ -0,0 +1,16 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { stepsProps as elStepsProps } from 'element-plus';
+import type { StepType, StepItem, StepItemsFunction } from './types';
+
+/**
+ * 属性
+ */
+export const stepsProps = {
+  ...elStepsProps,
+  /** 步骤条数据 */
+  items: Array as PropType<StepItem[] | StepItemsFunction>,
+  /** 类型 */
+  type: String as PropType<StepType>
+};
+
+export type StepsProps = ExtractPropTypes<typeof stepsProps>;

package/packages/ele-steps/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 步骤条主题变量 */
+@mixin set-step-var($var) {
+  .ele-steps {
+    @include set-ele-var('step', $var);
+  }
+}

package/packages/ele-steps/style/index.scss

@@ -0,0 +1,208 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-step-var($ele);
+
+.ele-steps .el-step {
+  .el-step__head {
+    width: auto;
+    position: static;
+    display: flex;
+  }
+
+  .el-step__main {
+    padding: eleVar('step', 'margin') 0 0 0;
+    box-sizing: border-box;
+  }
+
+  /* 线条 */
+  .el-step__line {
+    background: none;
+    border-style: solid;
+    border-width: eleVar('step', 'line-size');
+    border-color: eleVar('step', 'line-color');
+    transition: border-color $transition-base;
+  }
+
+  .el-step__line-inner {
+    display: none;
+  }
+
+  /* 图标 */
+  .el-step__icon {
+    width: auto;
+    height: auto;
+    display: flex;
+    color: eleVar('step', 'color');
+    font-size: eleVar('step', 'icon-size');
+    background: none;
+    transition: (
+      color $transition-base,
+      border-color $transition-base,
+      background-color $transition-base
+    );
+
+    &.is-text {
+      width: eleVar('step', 'icon-size');
+      height: eleVar('step', 'icon-size');
+      line-height: eleVar('step', 'icon-size');
+      font-size: eleVar('step', 'icon-font-size');
+      font-weight: eleVar('step', 'icon-font-weight');
+      background: eleVar('step', 'icon-bg');
+      border: eleVar('step', 'icon-border');
+    }
+
+    .el-step__icon-inner {
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      transform: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  /* 标题 */
+  .el-step__title {
+    color: eleVar('step', 'color');
+    font-size: eleVar('step', 'font-size');
+    font-weight: eleVar('step', 'font-weight');
+    line-height: eleVar('step', 'line-height');
+    padding: 0;
+  }
+
+  /* 描述 */
+  .el-step__description {
+    color: eleVar('step', 'text-color');
+    font-size: eleVar('step', 'text-font-size');
+    line-height: eleVar('step', 'text-line-height');
+    margin: eleVar('step', 'text-margin') 0 0 0;
+    padding: 0;
+  }
+
+  /* 当前步骤 */
+  .el-step__head.is-process {
+    .el-step__icon {
+      color: eleVar('step', 'active-icon-bg');
+
+      &.is-text {
+        color: eleVar('step', 'active-icon-color');
+        background: eleVar('step', 'active-icon-bg');
+        border: eleVar('step', 'active-icon-border');
+      }
+    }
+  }
+
+  .el-step__title.is-process {
+    color: eleVar('step', 'active-color');
+  }
+
+  .el-step__description.is-process {
+    color: eleVar('step', 'active-text-color');
+  }
+
+  /* 完成步骤 */
+  .el-step__head.is-finish,
+  .el-step__head.is-success {
+    .el-step__line {
+      border-color: eleVar('step', 'finish-line-color');
+    }
+
+    .el-step__icon {
+      color: eleVar('step', 'finish-icon-color');
+
+      &.is-text {
+        background: eleVar('step', 'finish-icon-bg');
+        border: eleVar('step', 'finish-icon-border');
+      }
+
+      .el-step__icon-inner.is-status {
+        font-size: eleVar('step', 'finish-icon-font-size');
+      }
+    }
+  }
+
+  .el-step__title.is-finish,
+  .el-step__title.is-success {
+    color: eleVar('step', 'finish-color');
+  }
+
+  .el-step__description.is-finish,
+  .el-step__description.is-success {
+    color: eleVar('step', 'finish-text-color');
+  }
+
+  /* 水平 */
+  &.is-horizontal {
+    $space: eleVar('step', 'line-space');
+    $icon-size: eleVar('step', 'icon-size');
+
+    .el-step__line {
+      top: calc((#{$icon-size} - #{eleVar('step', 'line-size')}) / 2);
+      left: calc(#{$icon-size} + #{$space});
+      right: $space;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      height: 0;
+    }
+
+    &.is-center {
+      .el-step__line {
+        left: calc(50% + #{$space} + (#{$icon-size} / 2));
+        right: calc(-50% + #{$space} + (#{$icon-size} / 2));
+      }
+
+      .el-step__head {
+        justify-content: center;
+      }
+    }
+  }
+
+  /* 垂直 */
+  &.is-vertical {
+    $space: eleVar('step', 'line-space');
+    $icon-size: eleVar('step', 'icon-size');
+
+    .el-step__line {
+      left: calc((#{$icon-size} - #{eleVar('step', 'line-size')}) / 2);
+      top: calc(#{$icon-size} + #{$space});
+      bottom: $space;
+      border-right: none;
+      border-top: none;
+      border-bottom: none;
+      width: 0;
+    }
+
+    .el-step__main {
+      padding: 0 0 0 eleVar('step', 'vertical-margin');
+    }
+  }
+}
+
+/* 紧凑风格 */
+.ele-steps.is-inline .el-step {
+  display: flex;
+  align-items: flex-start;
+
+  .el-step__main {
+    flex-grow: 1;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .el-step__title {
+      padding: 0 eleVar('step', 'line-space') 0 eleVar('step', 'margin');
+      background: eleVar('step', 'bg');
+      backdrop-filter: eleVar('step', 'backdrop-filter');
+      position: relative;
+    }
+
+    .el-step__description {
+      padding: 0 eleVar('step', 'margin');
+    }
+  }
+}

package/packages/ele-steps/style/index.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/steps/style/index';
+import 'element-plus/es/components/step/style/index';
+import './index.scss';

package/packages/ele-steps/types.ts

@@ -0,0 +1,19 @@
+import type { ElStepProps } from '../ele-app/el';
+
+/**
+ * 步骤条数据
+ */
+export interface StepItem extends ElStepProps {
+  /** 循环的 key */
+  key?: string | number | symbol;
+}
+
+/**
+ * 步骤条类型
+ */
+export type StepType = 'inline' | null;
+
+/**
+ * 步骤条数据请求方法
+ */
+export type StepItemsFunction = () => Promise<StepItem[]>;