y-admin-pro 0.0.1

package/packages/ele-tooltip/props.ts

@@ -0,0 +1,85 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { useTooltipProps, tooltipEmits as elTooltipEmits } from 'element-plus';
+import type { StyleValue } from '../ele-app/types';
+import { omit } from '../utils/common';
+type TooltipExclude =
+  | 'onUpdate:visible'
+  | 'style'
+  | 'onMouseenter'
+  | 'onMouseleave'
+  | 'onClick'
+  | 'onKeydown'
+  | 'onFocus'
+  | 'onBlur'
+  | 'onContextmenu'
+  // 类型去掉几个复杂的避免实例化过深且可能无限
+  | 'className'
+  | 'popperClass'
+  | 'popperStyle'
+  | 'id'
+  | 'role'
+  | 'strategy'
+  | 'open'
+  | 'pure'
+  | 'focusOnShow'
+  | 'trapping'
+  | 'referenceEl'
+  | 'triggerTargetEl'
+  | 'stopPopperMouseEvent'
+  | 'boundariesPadding'
+  | 'fallbackPlacements';
+const normalizeProps = omit(useTooltipProps, [
+  'onUpdate:visible',
+  'style',
+  'onMouseenter',
+  'onMouseleave',
+  'onClick',
+  'onKeydown',
+  'onFocus',
+  'onBlur',
+  'onContextmenu'
+] as TooltipExclude[]);
+
+/**
+ * 属性
+ */
+export const tooltipProps = {
+  className: String,
+  popperClass: String,
+  popperStyle: Object as PropType<StyleValue>,
+  ...normalizeProps,
+  /** 自定义内容样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 自定义背景色 */
+  bg: String,
+  /** 自定义箭头颜色 */
+  arrowBg: String,
+  /** 宽度 */
+  width: [String, Number],
+  /** 是否是气泡卡片 */
+  isPopover: Boolean
+};
+
+export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;
+
+/**
+ * 事件
+ */
+export type TooltipEmits = {
+  'update:visible': (visible: boolean) => boolean;
+  'before-show': (e: Event) => boolean;
+  'before-hide': (e: Event) => boolean;
+  show: (e: Event) => boolean;
+  hide: (e: Event) => boolean;
+  open: (e: any) => boolean;
+  close: (e: any) => boolean;
+};
+
+export const tooltipEmits = elTooltipEmits as unknown as TooltipEmits;
+
+/**
+ * 属性名
+ */
+export type TooltipPropKeys = Array<keyof typeof tooltipProps>;
+
+export const tooltipPropKeys = Object.keys(tooltipProps) as TooltipPropKeys;

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

@@ -0,0 +1,100 @@
+@use '../../style/util.scss' as *;
+
+/* 文字提示主题变量 */
+@mixin set-tooltip-var($var) {
+  .el-popper {
+    @include set-ele-var('popper', $var);
+  }
+
+  .el-popper.is-dark,
+  .ele-tooltip {
+    @include set-ele-var('tooltip', $var);
+  }
+
+  .ele-tooltip.is-light {
+    @include set-ele-var('tooltip-light', $var);
+  }
+
+  .ele-popover {
+    @include set-ele-var('popover', $var);
+  }
+}
+
+/* 底层气泡样式 */
+@mixin popper-style($selector) {
+  #{$selector} {
+    border-radius: eleVar('popper', 'radius');
+
+    &.is-light {
+      background: eleVar('popper', 'bg');
+      border: eleVar('popper', 'border');
+      box-shadow: eleVar('popper', 'shadow');
+
+      & > .el-popper__arrow::before {
+        background: eleVar('popper', 'arrow-bg');
+        border: eleVar('popper', 'border');
+        box-shadow: eleVar('popper', 'arrow-shadow');
+      }
+    }
+
+    .el-popper__arrow {
+      width: eleVar('popper', 'arrow-size');
+      height: eleVar('popper', 'arrow-size');
+
+      &::before {
+        width: eleVar('popper', 'arrow-size');
+        height: eleVar('popper', 'arrow-size');
+        clip-path: polygon(300% -200%, 300% 300%, -200% 300%);
+      }
+    }
+
+    &[data-popper-placement^='top'] > .el-popper__arrow {
+      bottom: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='bottom'] > .el-popper__arrow {
+      top: eleVar('popper', 'arrow-offset');
+
+      &::before {
+        clip-path: polygon(-200% 300%, -200% -200%, 300% -200%);
+      }
+    }
+
+    &[data-popper-placement^='left'] > .el-popper__arrow {
+      right: eleVar('popper', 'arrow-offset');
+
+      &::before {
+        clip-path: polygon(-200% -200%, 300% -200%, 300% 300%);
+      }
+    }
+
+    &[data-popper-placement^='right'] > .el-popper__arrow {
+      left: eleVar('popper', 'arrow-offset');
+
+      &::before {
+        clip-path: polygon(300% 300%, -200% 300%, -200% -200%);
+      }
+    }
+
+    &.is-dark {
+      color: eleVar('tooltip', 'color');
+      font-size: eleVar('tooltip', 'font-size');
+      line-height: eleVar('tooltip', 'line-height');
+      padding: eleVar('tooltip', 'padding');
+      background: eleVar('tooltip', 'bg');
+      border: eleVar('tooltip', 'border');
+      box-shadow: eleVar('tooltip', 'shadow');
+      border-radius: eleVar('tooltip', 'radius');
+
+      & > .el-popper__arrow::before {
+        background: eleVar('tooltip', 'arrow-bg');
+        border: eleVar('tooltip', 'border');
+        box-shadow: eleVar('tooltip', 'arrow-shadow');
+      }
+    }
+
+    &.is-prevent-event .el-popper__arrow {
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tooltip-var($ele);
+
+@include popper-style('.ele-popper.el-popper');
+
+.ele-tooltip-body,
+.ele-popover-body {
+  box-sizing: border-box;
+}
+
+.ele-tooltip-body {
+  padding: eleVar('tooltip', 'padding');
+  position: relative;
+  z-index: 2;
+}
+
+.ele-popper.el-popper.ele-tooltip {
+  color: eleVar('tooltip', 'color');
+  font-size: eleVar('tooltip', 'font-size');
+  line-height: eleVar('tooltip', 'line-height');
+  padding: 0;
+  background: eleVar('tooltip', 'bg');
+  border: eleVar('tooltip', 'border');
+  box-shadow: eleVar('tooltip', 'shadow');
+  border-radius: eleVar('tooltip', 'radius');
+
+  & > .el-popper__arrow::before {
+    background: eleVar('tooltip', 'arrow-bg');
+    border: eleVar('tooltip', 'border');
+    box-shadow: eleVar('tooltip', 'arrow-shadow');
+  }
+
+  &.is-dark {
+    padding: 0;
+  }
+
+  &.is-light {
+    color: eleVar('tooltip-light', 'color');
+    background: eleVar('tooltip-light', 'bg');
+    border: eleVar('tooltip-light', 'border');
+    box-shadow: eleVar('tooltip-light', 'shadow');
+
+    & > .el-popper__arrow::before {
+      background: eleVar('tooltip-light', 'arrow-bg');
+      border: eleVar('tooltip-light', 'border');
+      box-shadow: eleVar('tooltip-light', 'arrow-shadow');
+    }
+  }
+
+  &.is-danger,
+  &.is-danger > .el-popper__arrow::before {
+    background: elVar('color-danger');
+    border-color: elVar('color-danger');
+  }
+
+  &.is-warning,
+  &.is-warning > .el-popper__arrow::before {
+    background: elVar('color-warning');
+    border-color: elVar('color-warning');
+  }
+
+  &.is-success,
+  &.is-success > .el-popper__arrow::before {
+    background: elVar('color-success');
+    border-color: elVar('color-success');
+  }
+}
+
+/* 气泡卡片 */
+.ele-popper.ele-popover {
+  color: eleVar('popover', 'color');
+  font-size: eleVar('popover', 'font-size');
+  line-height: inherit;
+  text-align: left;
+  min-width: 150px;
+  padding: 0;
+}
+
+.ele-popover-content {
+  padding: eleVar('popover', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-popover-title {
+  color: eleVar('popover', 'title-color');
+  font-size: eleVar('popover', 'title-font-size');
+  font-weight: eleVar('popover', 'title-font-weight');
+  padding: eleVar('popover', 'title-padding');
+  border-bottom: eleVar('popover', 'title-border');
+}

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

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

package/packages/ele-tour/index.vue

@@ -0,0 +1,227 @@
+<!-- 漫游式引导 -->
+<template>
+  <Teleport to="body">
+    <div
+      :class="['ele-tour', { 'show-mask': showMask }, { 'is-open': visible }]"
+      :style="{ zIndex: zIndex }"
+    >
+      <div class="ele-tour-box" :style="boxStyle"></div>
+      <div ref="triggerRef" class="ele-tour-reference" :style="boxStyle"></div>
+      <EleTooltip
+        v-bind="tooltipProps"
+        ref="tooltipRef"
+        :virtualRef="triggerRef"
+        :virtualTriggering="true"
+        :disabled="!visible"
+        :hideAfter="0"
+      >
+        <template #body>
+          <ReceiverView v-if="steps && step" class="ele-popover-body">
+            <div v-if="step.title" class="ele-tour-title">
+              <slot name="title" :step="step" :current="modelValue">
+                {{ step.title }}
+              </slot>
+            </div>
+            <div class="ele-tour-text">
+              <slot name="text" :step="step" :current="modelValue">
+                {{ step.description }}
+              </slot>
+            </div>
+            <slot name="footer" :step="step" :current="modelValue">
+              <div class="ele-tour-footer">
+                <div class="ele-tour-counter">
+                  {{ (modelValue || 0) + 1 }}/{{ steps.length }}
+                </div>
+                <div class="ele-tour-action">
+                  <ElButton v-if="!isLast" size="small" @click="handleFinish">
+                    {{ lang.skip }}
+                  </ElButton>
+                  <ElButton
+                    v-if="modelValue !== 0"
+                    size="small"
+                    @click="handlePrev"
+                  >
+                    {{ lang.prev }}
+                  </ElButton>
+                  <ElButton
+                    v-if="!isLast"
+                    size="small"
+                    type="primary"
+                    @click="handleNext"
+                  >
+                    {{ lang.next }}
+                  </ElButton>
+                  <ElButton
+                    v-if="isLast"
+                    size="small"
+                    type="primary"
+                    @click="handleFinish"
+                  >
+                    {{ lang.finish }}
+                  </ElButton>
+                </div>
+              </div>
+            </slot>
+          </ReceiverView>
+        </template>
+      </EleTooltip>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+  import type { Ref } from 'vue';
+  import { ref, shallowRef, onMounted, watch, nextTick } from 'vue';
+  import { ElButton } from 'element-plus';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import ReceiverView from '../ele-config-provider/components/receiver-view';
+  import type { StyleValue } from '../ele-app/types';
+  import type { EleTooltipProps, EleTooltipInstance } from '../ele-app/plus';
+  import { useLocale } from '../ele-config-provider/receiver';
+  import { getOffset, getPopperProps, scrollIntoView } from './util';
+  import type { TourStep, TourLocale } from './types';
+  import { tourProps, tourEmits } from './props';
+
+  defineOptions({ name: 'EleTour' });
+
+  const props = defineProps(tourProps);
+
+  const emit = defineEmits(tourEmits);
+
+  const { lang } = useLocale<TourLocale>('tour', props);
+
+  /** 气泡触发组件 */
+  const triggerRef = ref<any>(null);
+
+  /** 气泡组件 */
+  const tooltipRef = ref<EleTooltipInstance>(null);
+
+  /** 气泡组件属性 */
+  const tooltipProps = shallowRef<EleTooltipProps>({});
+
+  /** 是否打开引导 */
+  const visible = ref<boolean>(false);
+
+  /** 当前步骤 */
+  const step = shallowRef<TourStep | null>(null);
+
+  /** 是否是最后一步 */
+  const isLast = ref<boolean>(false);
+
+  /** 盒子样式 */
+  const boxStyle: Ref<StyleValue> = ref<StyleValue>({});
+
+  /** 是否显示遮罩 */
+  const showMask = ref<boolean>(false);
+
+  /** 开始引导 */
+  const start = () => {
+    if (
+      !props.steps ||
+      props.modelValue == null ||
+      props.modelValue < 0 ||
+      props.modelValue >= props.steps.length
+    ) {
+      close();
+      return;
+    }
+    step.value = props.steps[props.modelValue];
+    if (!step.value) {
+      return;
+    }
+    isLast.value = props.modelValue === props.steps.length - 1;
+    const { mask, popoverProps, target, padding } = step.value;
+    showMask.value = mask ?? props.mask;
+    const el = typeof target === 'function' ? target() : target;
+    if (el) {
+      scrollIntoView(el);
+      // 气泡形式
+      const { width, height } = el.getBoundingClientRect();
+      const { top, left } = getOffset(el);
+      const space = padding ?? props.padding ?? 0;
+      boxStyle.value = {
+        width: width + space + space + 'px',
+        height: height + space + space + 'px',
+        top: top - space + 'px',
+        left: left - space + 'px'
+      };
+    } else {
+      // 弹窗形式
+      boxStyle.value = {
+        width: '0px',
+        height: '0px',
+        top: '50%',
+        left: '50%'
+      };
+    }
+    // 显示
+    visible.value = true;
+    tooltipProps.value = getPopperProps(true, !el, popoverProps as any);
+    nextTick(() => {
+      updatePopper();
+    });
+  };
+
+  /** 关闭引导 */
+  const close = () => {
+    visible.value = false;
+    boxStyle.value = {};
+    step.value = null;
+    showMask.value = false;
+    tooltipProps.value = getPopperProps();
+  };
+
+  /** 更新步骤值 */
+  const updateModelValue = (value?: number | null) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 上一步 */
+  const handlePrev = () => {
+    if (
+      props.modelValue != null &&
+      props.steps != null &&
+      props.steps.length &&
+      props.modelValue > 0
+    ) {
+      updateModelValue(props.modelValue - 1);
+    }
+  };
+
+  /** 下一步 */
+  const handleNext = () => {
+    if (
+      props.modelValue != null &&
+      props.steps != null &&
+      props.steps.length &&
+      props.modelValue < props.steps.length - 1
+    ) {
+      updateModelValue(props.modelValue + 1);
+    }
+  };
+
+  /** 结束 */
+  const handleFinish = () => {
+    updateModelValue(null);
+  };
+
+  /** 更新气泡位置 */
+  const updatePopper = () => {
+    tooltipRef.value && tooltipRef.value.updatePopper();
+  };
+
+  onMounted(() => {
+    start();
+  });
+
+  watch(
+    () => props.modelValue,
+    () => {
+      start();
+    }
+  );
+
+  defineExpose({
+    tooltipRef
+  });
+</script>

package/packages/ele-tour/props.ts

@@ -0,0 +1,38 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { TourStep, TourLocale } from './types';
+
+/**
+ * 属性
+ */
+export const tourProps = {
+  /** 当前处于第几步 */
+  modelValue: Number,
+  /** 步骤 */
+  steps: {
+    type: Array as PropType<TourStep[]>,
+    required: true
+  },
+  /** 是否开启遮罩层 */
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  /** 高亮区内间距 */
+  padding: {
+    type: Number,
+    default: 6
+  },
+  /** 层级 */
+  zIndex: Number,
+  /** 国际化 */
+  locale: Object as PropType<Partial<TourLocale>>
+};
+
+export type TourProps = ExtractPropTypes<typeof tourProps>;
+
+/**
+ * 事件
+ */
+export const tourEmits = {
+  'update:modelValue': (_value?: number | null) => true
+};

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

@@ -0,0 +1,101 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-tour {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: elVar('index', 'popper');
+  display: none;
+
+  &.is-open {
+    display: block;
+  }
+}
+
+/* 带高亮的遮罩 */
+.ele-tour-box {
+  position: absolute;
+  border: 2px solid elVar('color-primary');
+  border-radius: elVar('border-radius', 'base');
+  transition: (
+    left $transition-base,
+    top $transition-base,
+    width $transition-base,
+    height $transition-base
+  );
+}
+
+.ele-tour.show-mask > .ele-tour-box {
+  border: none;
+  box-shadow: 0 0 0 1000vw elVar('overlay-color', 'lighter');
+}
+
+/* 气泡定位元素 */
+.ele-tour-reference {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+/* 标题 */
+.ele-tour-title {
+  font-weight: bold;
+  color: elVar('text-color', 'primary');
+  margin-bottom: 8px;
+}
+
+/* 内容 */
+.ele-tour-text {
+  font-size: elVar('font-size', 'small');
+}
+
+/* 底部 */
+.ele-tour-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+}
+
+/* 指示器 */
+.ele-tour-counter {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'extra-small');
+}
+
+/* 操作按钮 */
+.ele-tour-action {
+  flex: 1;
+  text-align: right;
+
+  .el-button {
+    padding-left: 8px;
+    padding-right: 8px;
+
+    & + .el-button {
+      margin-left: 8px;
+    }
+  }
+}
+
+.ele-tour-popover > .ele-popover-body {
+  padding: 12px 16px;
+}
+
+/* 气泡弹窗效果 */
+.ele-tour-popover.ele-tour-modal {
+  margin: 0 auto;
+  left: 0 !important;
+  top: 50% !important;
+  right: 0 !important;
+  bottom: auto !important;
+  transform: translateY(-50.1%) !important;
+  transform-origin: center !important;
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+
+  & > .el-popper__arrow {
+    display: none;
+  }
+}

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

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/index';
+import '../../ele-tooltip/style/index';
+import './index.scss';

package/packages/ele-tour/types.ts

@@ -0,0 +1,42 @@
+import type { ElePopoverProps } from '../ele-app/plus';
+
+/**
+ * 引导步骤指向元素
+ */
+export type TourStepTarget = HTMLElement | (() => HTMLElement);
+
+/**
+ * 引导步骤
+ */
+export interface TourStep {
+  /** 指向元素 */
+  target?: TourStepTarget;
+  /** 标题 */
+  title?: string;
+  /** 描述 */
+  description?: string;
+  /** 内间距 */
+  padding?: number;
+  /** 是否开启遮罩层 */
+  mask?: boolean;
+  /** 气泡组件属性 */
+  popoverProps?: ElePopoverProps;
+}
+
+/**
+ * 元素距离
+ */
+export interface Offset {
+  top: number;
+  left: number;
+}
+
+/**
+ * 国际化
+ */
+export interface TourLocale {
+  skip: string;
+  prev: string;
+  next: string;
+  finish: string;
+}