feat(Guide): add guide component for mobile-vue (#1734)

* feat(Guide): add guide component for mobile-vue * style(Guide): fix lint error * fix: update style variable name
Tencent · Mar 1, 2024 · 6404627 · 6404627
1 parent a2e0367
commit 6404627
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 1 deletion.
diff --git a/docs/mobile/api_v2/guide.md b/docs/mobile/api_v2/guide.md
@@ -6,4 +6,17 @@ isComponent: true
 toc: false
 ---
 
-### 基础引导
+### 基础引导
+{{ base }}
+
+### 不带遮罩的引导
+{{ no-mask }}
+
+### 弹窗形式的引导
+{{ dialog }}
+
+### 气泡与弹窗混合的引导
+{{ popover-dialog }}
+
+### 自定义气泡
+{{ custom-popover }}
diff --git a/style/mobile/components/guide/_index.less b/style/mobile/components/guide/_index.less
@@ -0,0 +1,135 @@
+@import "../../base.less";
+
+@import "./_var.less";
+
+@guide: ~"@{prefix}-guide";
+
+.@{guide} {
+  &--absolute {
+    position: absolute;
+  }
+
+  &--fixed {
+    position: fixed;
+  }
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: @guide-overlay-z-index;
+  }
+
+  &__highlight {
+    z-index: @guide-highlight-z-index;
+    transition: @anim-duration-base @anim-time-fn-ease-out;
+    border-radius: @guide-highlight-border-radius;
+
+    &--mask {
+      box-shadow: 0 0 0 0 @mask-active, @mask-active 0 0 0 5000px;
+    }
+
+    &--dialog {
+      box-shadow: none;
+    }
+
+    &--nomask {
+      border-radius: @guide-highlight-border-radius;
+      border: 2px solid @brand-color;
+      box-sizing: border-box;
+    }
+  }
+
+  &__reference {
+    z-index: @guide-reference-z-index;
+  }
+
+  &__wrapper {
+    .@{prefix}-popover {
+      &__content {
+        border: 1px solid @guide-popover-border-color;
+      }
+    }
+    .@{prefix}-popover[data-popper-placement^="bottom"] .@{prefix}-popover__content {
+      margin-top: @guide-popover-margin-top;
+    }
+
+    &--content {
+      .@{prefix}-popover__content {
+        background: none;
+        box-shadow: none;
+        padding: 0;
+        border: none;
+      }
+    }
+  }
+
+  &__content {
+    &--popover {
+      padding: @guide-popover-content-padding;
+    }
+
+    &--dialog {
+      padding: @guide-dialog-content-padding;
+      min-width: var(--td-guide-dialog-width, 311px);
+      .@{guide}__title, .@{guide}__desc {
+        text-align: center;
+      }
+    }
+  }
+
+  &__content--popover &__tooltip {
+    min-width: var(--td-guide-tooltip-min-width, 240px);
+    max-width: var(--td-guide-tooltip-max-width, 270px);
+  }
+
+  &__title {
+    text-align: left;
+    color: @text-color-primary;
+    font: @guide-title-font-size;
+    font-weight: 700;
+  }
+
+  &__desc {
+    margin-top: @guide-tooltip-desc-margin-top;
+    text-align: left;
+    color: @text-color-secondary;
+    font-size: @guide-body-font-size;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    margin-top: @guide-footer-popover-margin-top;
+
+    button {
+      margin-right: @guide-action-margin-right;
+    }
+
+    button:last-child {
+      margin-right: 0;
+    }
+
+    &--popover {
+      justify-content: flex-end;
+    }
+
+    &--dialog {
+      margin-top: @spacer-3;
+      padding: @guide-dialog-footer-padding;
+
+      button:last-child {
+        flex-grow: 1;
+      }
+
+      .@{guide} {
+        &__action {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
diff --git a/style/mobile/components/guide/_var.less b/style/mobile/components/guide/_var.less
@@ -0,0 +1,35 @@
+// 层级变量
+@guide-z-index: 999999;
+@guide-overlay-z-index: @guide-z-index - 2;
+@guide-highlight-z-index: @guide-z-index - 1;
+@guide-reference-z-index: @guide-z-index;
+
+// margin 间距相关
+@comp-margin-xxl: 24px;
+@comp-margin-l: 16px;
+@comp-margin-m: 12px;
+@comp-margin-xs: 4px;
+@guide-footer-popover-margin-top: @comp-margin-xxl;
+@guide-dialog-desc-margin-top: @comp-margin-xxl;
+@guide-tooltip-desc-margin-top: @comp-margin-xs;
+@guide-action-margin-right: @comp-margin-m;
+@guide-popover-margin-top: @comp-margin-l;
+
+// padding 相关
+@comp-padding-xs: 4px;
+@comp-padding-xxl: 24px;
+@guide-popover-content-padding: @comp-padding-xs;
+@guide-dialog-content-padding: @comp-padding-xxl 0;
+@guide-dialog-footer-padding: 0 @comp-padding-xxl;
+
+// border 相关
+@guide-highlight-border-radius: @radius-small; // 3px
+
+// color 相关
+@guide-popover-border-color: @gray-color-4;
+
+// font 相关
+@font-title-small: 16px;
+@font-body-small: 14px;
+@guide-title-font-size: @font-title-small;
+@guide-body-font-size: @font-body-small;