xJourney/wxapp_escort_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start

Browse Source
This commit is contained in:
lik
2026-05-30 21:09:24 +08:00
parent 212c94224b
commit 010cf160a0
1075 changed files with 67487 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
miniprogram_npm/tdesign-miniprogram/guide/README.en-US.md Normal file
View File

@@ -0,0 +1,110 @@
:: BASE_DOC ::
## API
### Guide Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
back-button-props | Object | - | Typescript：`ButtonProps` | N
counter | String / Function | - | Typescript：`string \| ((params: { total: number; current: number }) => string)` | N
current | Number | - | \- | N
default-current | Number | undefined | uncontrolled property | N
finish-button-props | Object | - | Typescript：`ButtonProps` | N
hide-back | Boolean | false | \- | N
hide-counter | Boolean | false | \- | N
hide-skip | Boolean | false | \- | N
highlight-padding | Number | 16 | \- | N
mode | String | popover | options: popover/dialog | N
next-button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | N
show-overlay | Boolean | true | \- | N
skip-button-props | Object | - | Typescript：`ButtonProps` | N
steps | Array | - | Typescript：`Array<GuideStep>` | N
using-custom-navbar | Boolean | false | \- | N
z-index | Number | 999999 | \- | N
### Guide Events
name | params | description
-- | -- | --
back | `(detail: { current: number, total: number })` | \-
change | `(current: number, context?: { total: number })` | \-
finish | `(detail: { current: number, total: number })` | \-
next-step-click | `(detail: { next: number, current: number, total: number })` | \-
skip | `(detail: { current: number, total: number })` | \-
### Guide External Classes
className | Description
-- | --
t-class | \-
t-class-back | \-
t-class-body | \-
t-class-finish | \-
t-class-footer | \-
t-class-next | \-
t-class-popover | \-
t-class-reference | \-
t-class-skip | \-
t-class-title | \-
t-class-tooltip | \-
### GuideStep
name | type | default | description | required
-- | -- | -- | -- | --
back-button-props | Object | - | Typescript：`ButtonProps` | N
body | String | - | \- | N
element | Function | - | required。Typescript：`StepElement` `type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | Y
finish-button-props | Object | - | Typescript：`ButtonProps` | N
highlight-padding | Number | - | \- | N
mode | String | - | options: popover/dialog | N
next-button-props | Object | - | Typescript：`ButtonProps` | N
offset | Array | - | this api is in discussing. do not use it。Typescript：`Array<string \| number>` | N
placement | String | 'top' | Typescript：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | N
show-overlay | Boolean | true | \- | N
skip-button-props | Object | - | Typescript：`ButtonProps` | N
title | String | - | title of current step | N
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-guide-body-color | @font-gray-2 | -
--td-guide-body-font-weight | 400 | -
--td-guide-dialog-body-font-size | @font-size-m | -
--td-guide-dialog-body-line-height | 48rpx | -
--td-guide-dialog-body-margin-top | 16rpx | -
--td-guide-dialog-body-text-align | center | -
--td-guide-dialog-border-radius | @radius-extra-large | -
--td-guide-dialog-footer-button-padding | 0 @spacer-3 | -
--td-guide-dialog-padding | @spacer-3 0 | -
--td-guide-dialog-title-font-size | 36rpx | -
--td-guide-dialog-title-line-height | 52rpx | -
--td-guide-dialog-title-text-align | center | -
--td-guide-dialog-width | 622rpx | -
--td-guide-footer-button-space | @spacer-1 | -
--td-guide-footer-margin-top | @spacer-3 | -
--td-guide-footer-text-align | right | -
--td-guide-popover-bg-color | @font-white-1 | -
--td-guide-popover-body-font-size | @font-size-base | -
--td-guide-popover-body-line-height | 44rpx | -
--td-guide-popover-body-margin-top | 8rpx | -
--td-guide-popover-body-text-align | left | -
--td-guide-popover-border | 2rpx solid @gray-color-4 | -
--td-guide-popover-border-radius | @radius-large | -
--td-guide-popover-max-width | 540rpx | -
--td-guide-popover-min-width | 480rpx | -
--td-guide-popover-padding | @spacer-2 | -
--td-guide-popover-shadow | @shadow-3 | -
--td-guide-popover-title-font-size | @font-size-m | -
--td-guide-popover-title-line-height | 48rpx | -
--td-guide-popover-title-text-align | left | -
--td-guide-reference-border | 4rpx solid @brand-color | -
--td-guide-reference-border-radius | @radius-default | -
--td-guide-reference-mask-color | @font-gray-2 | -
--td-guide-title-color | @font-gray-1 | -
--td-guide-title-font-weight | 600 | -

158
miniprogram_npm/tdesign-miniprogram/guide/README.md Normal file
View File

@@ -0,0 +1,158 @@
---
title: Guide 按钮
description: 逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
spline: base
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-0%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-0%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-0%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-0%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-guide": "tdesign-miniprogram/guide/guide"
}
```
<!-- ## 代码演示
<a href="https://developers.weixin.qq.com/s/F1cSo7mm75SS" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote> -->
### 01 组件类型
#### 基础按钮
{{ base }}
#### 不带遮罩的引导
{{ no-mask }}
#### 弹窗形式的引导
{{ dialog }}
#### 气泡与弹窗混合的引导
{{ multiple }}
#### 自定义气泡
{{ content }}
## API
### Guide Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
back-button-props | Object | - | 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
counter | String / Function | - | 用于自定义渲染计数部分。TS 类型：`string \| ((params: { total: number; current: number }) => string)` | N
current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | N
default-current | Number | undefined | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性 | N
finish-button-props | Object | - | 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
hide-back | Boolean | false | 是否隐藏返回按钮 | N
hide-counter | Boolean | false | 是否隐藏计数 | N
hide-skip | Boolean | false | 是否隐藏跳过按钮 | N
highlight-padding | Number | 16 | 高亮框的内边距，单位rpx | N
mode | String | popover | 引导框的类型。可选项：popover/dialog | N
next-button-props | Object | - | 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | N
show-overlay | Boolean | true | 是否出现遮罩层 | N
skip-button-props | Object | - | 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }。TS 类型：`ButtonProps` | N
steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。TS 类型：`Array<GuideStep>` | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
z-index | Number | 999999 | 提示框的层级 | N
### Guide Events
名称 | 参数 | 描述
-- | -- | --
back | `(detail: { current: number, total: number })` | 点击返回按钮时触发
change | `(current: number, context?: { total: number })` | 当前步骤发生变化时触发
finish | `(detail: { current: number, total: number })` | 点击完成按钮时触发
next-step-click | `(detail: { next: number, current: number, total: number })` | 点击下一步时触发
skip | `(detail: { current: number, total: number })` | 点击跳过按钮时触发
### Guide External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-back | 返回按钮样式类
t-class-body | 高亮框提示内容主体样式类
t-class-finish | 结束按钮样式类
t-class-footer | 高亮框底部操作区域样式类
t-class-next | 下一步按钮样式类
t-class-popover | 引导框样式类
t-class-reference | 高亮框样式类
t-class-skip | 跳过按钮样式类
t-class-title | 高亮框提示内容标题样式类
t-class-tooltip | 高亮框提示内容区域样式类
### GuideStep
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
back-button-props | Object | - | 用于自定义当前引导框的返回按钮的内容。TS 类型：`ButtonProps` | N
body | String | - | 当前步骤提示框的内容，支持插槽：slot="body-{{index}}" (1、当要显示body-{{index}}插槽时，请将body设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N
element | Function | - | 必需。高亮的节点。示例： `() => new Promise((resolve) => this.createSelectorQuery().select('#tdesign').boundingClientRect((rect) => resolve(rect)).exec())`。TS 类型：`StepElement` `type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | Y
finish-button-props | Object | - | 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
highlight-padding | Number | - | 高亮框的内边距，单位rpx | N
mode | String | - | 引导框的类型。可选项：popover/dialog | N
next-button-props | Object | - | 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps` | N
offset | Array | - | 相对于 placement 的偏移量[left, top]，默认单位rpx，示例：[-10, 20] 或 ['10px', '8px'] 或 ['20rpx', '16rpx'] (仅当 `mode` 为 `popover` 时生效)。TS 类型：`Array<string \| number>` | N
placement | String | 'top' | 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)。TS 类型：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | N
show-overlay | Boolean | true | 是否出现遮罩层 | N
skip-button-props | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N
title | String | - | 当前步骤的标题内容，支持插槽：slot="title-{{index}}" (1、当要显示body-{{index}}插槽时，请将title设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-guide-body-color | @font-gray-2 | -
--td-guide-body-font-weight | 400 | -
--td-guide-dialog-body-font-size | @font-size-m | -
--td-guide-dialog-body-line-height | 48rpx | -
--td-guide-dialog-body-margin-top | 16rpx | -
--td-guide-dialog-body-text-align | center | -
--td-guide-dialog-border-radius | @radius-extra-large | -
--td-guide-dialog-footer-button-padding | 0 @spacer-3 | -
--td-guide-dialog-padding | @spacer-3 0 | -
--td-guide-dialog-title-font-size | 36rpx | -
--td-guide-dialog-title-line-height | 52rpx | -
--td-guide-dialog-title-text-align | center | -
--td-guide-dialog-width | 622rpx | -
--td-guide-footer-button-space | @spacer-1 | -
--td-guide-footer-margin-top | @spacer-3 | -
--td-guide-footer-text-align | right | -
--td-guide-popover-bg-color | @font-white-1 | -
--td-guide-popover-body-font-size | @font-size-base | -
--td-guide-popover-body-line-height | 44rpx | -
--td-guide-popover-body-margin-top | 8rpx | -
--td-guide-popover-body-text-align | left | -
--td-guide-popover-border | 2rpx solid @gray-color-4 | -
--td-guide-popover-border-radius | @radius-large | -
--td-guide-popover-max-width | 540rpx | -
--td-guide-popover-min-width | 480rpx | -
--td-guide-popover-padding | @spacer-2 | -
--td-guide-popover-shadow | @shadow-3 | -
--td-guide-popover-title-font-size | @font-size-m | -
--td-guide-popover-title-line-height | 48rpx | -
--td-guide-popover-title-text-align | left | -
--td-guide-reference-border | 4rpx solid @brand-color | -
--td-guide-reference-border-radius | @radius-default | -
--td-guide-reference-mask-color | @font-gray-2 | -
--td-guide-title-color | @font-gray-1 | -
--td-guide-title-font-weight | 600 | -

21
miniprogram_npm/tdesign-miniprogram/guide/content.wxml Normal file
View File

@@ -0,0 +1,21 @@
<import src="../common/template/button.wxml" />
<template name="content">
<slot wx:if="{{!title && !body}}" name="content-{{current}}" />
<block wx:else>
<view class="{{prefix}}-class-tooltip">
<view wx:if="{{title}}" class="{{prefix}}-class-title {{classPrefix}}__title--{{modeType}}">{{title}}</view>
<slot wx:else name="title-{{current}}" />
<view wx:if="{{body}}" class="{{prefix}}-class-body {{classPrefix}}__body--{{modeType}}">{{body}}</view>
<slot wx:else name="body-{{current}}" />
</view>
<view
wx:if="{{current !== -1}}"
class="{{prefix}}-class-footer {{classPrefix}}__footer {{classPrefix}}__footer--{{modeType}}"
>
<template is="button" wx:if="{{current < steps.length - 1 && !hideSkip}}" data="{{...skipButton}}" />
<template is="button" wx:elif="{{current === steps.length - 1 && !hideBack}}" data="{{...backButton}}" />
<template is="button" wx:if="{{current < steps.length - 1}}" data="{{...nextButton}}" />
<template is="button" wx:else data="{{...finishButton}}" />
</view>
</block>
</template>

103
miniprogram_npm/tdesign-miniprogram/guide/guide.d.ts vendored Normal file
View File

@@ -0,0 +1,103 @@
/// <reference types="miniprogram-api-typings" />
import { SuperComponent } from '../common/src/index';
import { TdGuideProps, GuideStep } from './type';
export interface GuideProps extends TdGuideProps {
}
export { GuideStep };
export default class Guide extends SuperComponent {
externalClasses: string[];
properties: TdGuideProps;
options: WechatMiniprogram.Component.ComponentOptions;
data: {
prefix: string;
classPrefix: string;
visible: boolean;
_current: number;
_steps: any[];
buttonProps: {};
referenceStyle: string;
popoverStyle: string;
title: string;
body: string;
nonOverlay: boolean;
modeType: string;
};
controlledProps: {
key: string;
event: string;
}[];
observers: {
'steps, current, showOverlay'(): Promise<void>;
};
lifetimes: {
created(): void;
attached(): void;
};
methods: {
init(): Promise<any>;
placementOffset({ placement, offset }: GuideStep, place: CSSStyleDeclaration): Promise<string>;
buttonProps(step: any, mode: any): {
skipButton: any;
nextButton: any;
backButton: any;
finishButton: any;
};
renderCounter(): any;
buttonContent(button: any): string;
onTplButtonTap(e: any): void;
getPlacement(): {
center: (rect: any, place: any, offset: any) => {
top: string;
left: string;
};
bottom: (rect: any, place: any, offset: any) => {
top: string;
left: string;
};
'bottom-left': (rect: any, place: any, offset: any) => {
top: string;
left: string;
};
'bottom-right': (rect: any, place: any, offset: any) => {
top: string;
right: string;
};
left: (rect: any, place: any, offset: any) => {
top: string;
right: string;
};
'left-top': (rect: any, place: any, offset: any) => {
top: string;
right: string;
};
'left-bottom': (rect: any, place: any, offset: any) => {
bottom: string;
right: string;
};
right: (rect: any, place: any, offset: any) => {
top: string;
left: string;
};
'right-top': (rect: any, place: any, offset: any) => {
top: string;
left: string;
};
'right-bottom': (rect: any, place: any, offset: any) => {
bottom: string;
left: string;
};
top: (rect: any, place: any, offset: any) => {
bottom: string;
left: string;
};
'top-left': (rect: any, place: any, offset: any) => {
bottom: string;
left: string;
};
'top-right': (rect: any, place: any, offset: any) => {
bottom: string;
right: string;
};
};
};
}

270
miniprogram_npm/tdesign-miniprogram/guide/guide.js Normal file
View File

@@ -0,0 +1,270 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import isFunction from 'lodash/isFunction';
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import config from '../common/config';
import { systemInfo, debounce, getRect, isNumber, rpx2px, styles, unitConvert, nextTick } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-guide`;
let Guide = class Guide extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-reference`,
`${prefix}-class-popover`,
`${prefix}-class-tooltip`,
`${prefix}-class-title`,
`${prefix}-class-body`,
`${prefix}-class-footer`,
`${prefix}-class-skip`,
`${prefix}-class-next`,
`${prefix}-class-back`,
`${prefix}-class-finish`,
];
this.properties = props;
this.options = {
pureDataPattern: /^_/,
multipleSlots: true,
};
this.data = {
prefix,
classPrefix: name,
visible: false,
_current: -1,
_steps: [],
buttonProps: {},
referenceStyle: '',
popoverStyle: '',
title: '',
body: '',
nonOverlay: false,
modeType: '',
};
this.controlledProps = [
{
key: 'current',
event: 'change',
},
];
this.observers = {
'steps, current, showOverlay'() {
return __awaiter(this, void 0, void 0, function* () {
this._init();
});
},
};
this.lifetimes = {
created() {
this._init = debounce(() => this.init(), 20);
this._getPlacement = this.getPlacement();
},
attached() {
this._init();
},
};
this.methods = {
init() {
var _a, _b, _c, _d, _e, _f, _g;
return __awaiter(this, void 0, void 0, function* () {
const { steps, current } = this.properties;
const { _steps, _current } = this.data;
const step = steps[current];
if (!step) {
return this.setData({ visible: false });
}
const modeType = ((_a = step.mode) !== null && _a !== void 0 ? _a : this.data.mode) === 'dialog' ? 'dialog' : 'popover';
const showOverlay = (_b = step.showOverlay) !== null && _b !== void 0 ? _b : this.data.showOverlay;
this.setData({ nonOverlay: !showOverlay, modeType });
if (steps === _steps && current === _current)
return;
if (modeType === 'popover') {
const rect = yield step.element();
if (!rect)
return;
const highlightPadding = rpx2px((_c = step.highlightPadding) !== null && _c !== void 0 ? _c : this.data.highlightPadding);
const referenceTop = rect.top - highlightPadding;
const referenceRight = systemInfo.windowWidth - rect.right - highlightPadding;
const referenceBottom = systemInfo.windowHeight - rect.bottom - highlightPadding;
const referenceLeft = rect.left - highlightPadding;
const style = {
top: `${referenceTop}px`,
right: `${referenceRight}px`,
bottom: `${referenceBottom}px`,
left: `${referenceLeft}px`,
};
this.setData({
_steps: this.data.steps,
_current: this.data.current,
visible: true,
referenceStyle: styles(style),
title: (_d = step.title) !== null && _d !== void 0 ? _d : '',
body: (_e = step.body) !== null && _e !== void 0 ? _e : '',
buttonProps: this.buttonProps(step, 'popover'),
});
const popoverStyle = yield this.placementOffset(step, style);
this.setData({ popoverStyle });
}
else {
this.setData({
_steps: this.data.steps,
_current: this.data.current,
visible: true,
title: (_f = step.title) !== null && _f !== void 0 ? _f : '',
body: (_g = step.body) !== null && _g !== void 0 ? _g : '',
buttonProps: this.buttonProps(step, 'dialog'),
});
}
});
},
placementOffset({ placement, offset }, place) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
yield nextTick();
const rect = yield getRect(this, `.${name}__container`);
const style = (_b = (_a = this._getPlacement)[placement]) === null || _b === void 0 ? void 0 : _b.call(_a, rect, place, offset);
return styles(Object.assign({ position: 'absolute' }, style));
});
},
buttonProps(step, mode) {
var _a, _b, _c, _d;
let skipButton = (_a = step.skipButtonProps) !== null && _a !== void 0 ? _a : this.data.skipButtonProps;
const size = mode === 'popover' ? 'extra-small' : 'medium';
skipButton = Object.assign(Object.assign({ theme: 'light', content: '跳过', size }, skipButton), { tClass: `${prefix}-class-skip ${name}__button ${(skipButton === null || skipButton === void 0 ? void 0 : skipButton.class) || ''}`, type: 'skip' });
let nextButton = (_b = step.nextButtonProps) !== null && _b !== void 0 ? _b : this.data.nextButtonProps;
nextButton = Object.assign(Object.assign({ theme: 'primary', content: '下一步', size }, nextButton), { tClass: `${prefix}-class-next ${name}__button ${(nextButton === null || nextButton === void 0 ? void 0 : nextButton.class) || ''}`, type: 'next' });
nextButton = Object.assign(Object.assign({}, nextButton), { content: this.buttonContent(nextButton) });
let backButton = (_c = step.backButtonProps) !== null && _c !== void 0 ? _c : this.data.backButtonProps;
backButton = Object.assign(Object.assign({ theme: 'light', content: '返回', size }, backButton), { tClass: `${prefix}-class-back ${name}__button ${(backButton === null || backButton === void 0 ? void 0 : backButton.class) || ''}`, type: 'back' });
let finishButton = (_d = step.finishButtonProps) !== null && _d !== void 0 ? _d : this.data.finishButtonProps;
finishButton = Object.assign(Object.assign({ theme: 'primary', content: '完成', size }, finishButton), { tClass: `${prefix}-class-finish ${name}__button ${(finishButton === null || finishButton === void 0 ? void 0 : finishButton.class) || ''}`, type: 'finish' });
finishButton = Object.assign(Object.assign({}, finishButton), { content: this.buttonContent(finishButton) });
return {
skipButton,
nextButton,
backButton,
finishButton,
};
},
renderCounter() {
const { steps, current, counter } = this.data;
const stepsTotal = steps.length;
const innerCurrent = current + 1;
const popupSlotCounter = isFunction(counter) ? counter({ total: stepsTotal, current: innerCurrent }) : counter;
return counter ? popupSlotCounter : `(${innerCurrent}/${stepsTotal})`;
},
buttonContent(button) {
const { hideCounter } = this.data;
return `${button.content.replace(/ \(.*?\)/, '')} ${hideCounter ? '' : this.renderCounter()}`;
},
onTplButtonTap(e) {
const { type } = e.target.dataset;
const parmas = { e, current: this.data.current, total: this.data.steps.length };
switch (type) {
case 'next':
this.triggerEvent('next-step-click', Object.assign({ next: this.data.current + 1 }, parmas));
this.setData({ current: this.data.current + 1 });
break;
case 'skip':
this.triggerEvent('skip', parmas);
this.setData({ current: -1 });
break;
case 'back':
this.triggerEvent('back', parmas);
this.setData({ current: 0 });
break;
case 'finish':
this.triggerEvent('finish', parmas);
this.setData({ current: -1 });
break;
default:
break;
}
this.triggerEvent('change', { current: this.data.current });
},
getPlacement() {
const space = rpx2px(32);
const offsetLeft = (offset) => unitConvert(isNumber(offset === null || offset === void 0 ? void 0 : offset[0]) ? `${offset === null || offset === void 0 ? void 0 : offset[0]}rpx` : (offset === null || offset === void 0 ? void 0 : offset[0]) || 0);
const offsetTop = (offset) => unitConvert(isNumber(offset === null || offset === void 0 ? void 0 : offset[1]) ? `${offset === null || offset === void 0 ? void 0 : offset[1]}rpx` : (offset === null || offset === void 0 ? void 0 : offset[1]) || 0);
const bottom = (place) => parseFloat(place.bottom);
const left = (place) => parseFloat(place.left);
const right = (place) => parseFloat(place.right);
const top = (place) => parseFloat(place.top);
const height = (place) => systemInfo.windowHeight - bottom(place) - top(place);
const width = (place) => systemInfo.windowWidth - left(place) - right(place);
return {
center: (rect, place, offset) => ({
top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
}),
bottom: (rect, place, offset) => ({
top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
}),
'bottom-left': (rect, place, offset) => ({
top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
}),
'bottom-right': (rect, place, offset) => ({
top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
}),
left: (rect, place, offset) => ({
top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
}),
'left-top': (rect, place, offset) => ({
top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
}),
'left-bottom': (rect, place, offset) => ({
bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`,
right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
}),
right: (rect, place, offset) => ({
top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
}),
'right-top': (rect, place, offset) => ({
top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
}),
'right-bottom': (rect, place, offset) => ({
bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`,
left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
}),
top: (rect, place, offset) => ({
bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
}),
'top-left': (rect, place, offset) => ({
bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
}),
'top-right': (rect, place, offset) => ({
bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
}),
};
},
};
}
};
Guide = __decorate([
wxComponent()
], Guide);
export default Guide;

9
miniprogram_npm/tdesign-miniprogram/guide/guide.json Normal file
View File

@@ -0,0 +1,9 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-overlay": "../overlay/overlay",
"t-button": "../button/button",
"t-popup": "../popup/popup"
}
}

44
miniprogram_npm/tdesign-miniprogram/guide/guide.wxml Normal file
View File

@@ -0,0 +1,44 @@
<import src="./content.wxml" />
<t-overlay
wx:if="{{modeType === 'popover'}}"
visible="{{visible}}"
using-custom-navbar="{{usingCustomNavbar}}"
background-color="transparent"
z-index="{{zIndex}}"
>
<view class="class {{prefix}}-class {{classPrefix}}">
<view
class="{{prefix}}-class-reference {{classPrefix}}__reference {{nonOverlay ? classPrefix + '__reference--nonoverlay' : ''}}"
style="{{referenceStyle}}"
/>
<view
class="{{prefix}}-class-popover {{classPrefix}}__container {{title || body ? classPrefix + '__container--' + modeType : ''}}"
style="{{popoverStyle}}"
>
<template
is="content"
data="{{ prefix, classPrefix, title, body, steps, current, modeType, hideSkip, hideBack, ...buttonProps }}"
/>
</view>
</view>
</t-overlay>
<t-popup
wx:elif="{{modeType === 'dialog'}}"
visible="{{visible}}"
show-overlay="{{!nonOverlay}}"
using-custom-navbar="{{usingCustomNavbar}}"
z-index="{{zIndex}}"
placement="center"
>
<view class="class {{prefix}}-class {{classPrefix}}">
<view
class="{{prefix}}-class-popover {{classPrefix}}__container {{title || body ? classPrefix + '__container--' + modeType : ''}}"
>
<template
is="content"
data="{{ prefix, classPrefix, title, body, steps, current, modeType, hideSkip, ...buttonProps }}"
/>
</view>
</view>
</t-popup>

99
miniprogram_npm/tdesign-miniprogram/guide/guide.wxss Normal file
View File

@@ -0,0 +1,99 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-guide__reference {
position: absolute;
box-shadow: 0 0 0 0 var(--td-guide-reference-mask-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))), var(--td-guide-reference-mask-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))) 0 0 0 5000px;
border-radius: var(--td-guide-reference-border-radius, var(--td-radius-default, 12rpx));
transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
}
.t-guide__reference--nonoverlay {
box-shadow: none;
border: var(--td-guide-reference-border, 4rpx solid var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-guide__container {
display: inline-block;
}
.t-guide__container--popover {
background-color: var(--td-guide-popover-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
border: var(--td-guide-popover-border, 2rpx solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
border-radius: var(--td-guide-popover-border-radius, var(--td-radius-large, 18rpx));
box-shadow: var(--td-guide-popover-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
padding: var(--td-guide-popover-padding, var(--td-spacer-2, 32rpx));
min-width: var(--td-guide-popover-min-width, 480rpx);
max-width: var(--td-guide-popover-max-width, 540rpx);
}
.t-guide__container--dialog {
background-color: var(--td-guide-popover-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
border-radius: var(--td-guide-dialog-border-radius, var(--td-radius-extra-large, 24rpx));
padding: var(--td-guide-dialog-padding, var(--td-spacer-3, 48rpx) 0);
width: var(--td-guide-dialog-width, 622rpx);
}
.t-guide__title--popover {
text-align: var(--td-guide-popover-title-text-align, left);
color: var(--td-guide-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
font-size: var(--td-guide-popover-title-font-size, var(--td-font-size-m, 32rpx));
font-weight: var(--td-guide-title-font-weight, 600);
line-height: var(--td-guide-popover-title-line-height, 48rpx);
}
.t-guide__title--dialog {
text-align: var(--td-guide-dialog-title-text-align, center);
color: var(--td-guide-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
font-size: var(--td-guide-dialog-title-font-size, 36rpx);
font-weight: var(--td-guide-title-font-weight, 600);
line-height: var(--td-guide-dialog-title-line-height, 52rpx);
}
.t-guide__body--popover {
margin-top: var(--td-guide-popover-body-margin-top, 8rpx);
text-align: var(--td-guide-popover-body-text-align, left);
color: var(--td-guide-body-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
font-size: var(--td-guide-popover-body-font-size, var(--td-font-size-base, 28rpx));
font-weight: var(--td-guide-body-font-weight, 400);
line-height: var(--td-guide-popover-body-line-height, 44rpx);
}
.t-guide__body--dialog {
margin-top: var(--td-guide-dialog-body-margin-top, 16rpx);
text-align: var(--td-guide-dialog-body-text-align, center);
color: var(--td-guide-body-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
font-size: var(--td-guide-dialog-body-font-size, var(--td-font-size-m, 32rpx));
font-weight: var(--td-guide-body-font-weight, 400);
line-height: var(--td-guide-dialog-body-line-height, 48rpx);
}
.t-guide__footer {
text-align: var(--td-guide-footer-text-align, right);
margin-top: var(--td-guide-footer-margin-top, var(--td-spacer-3, 48rpx));
}
.t-guide__footer .t-guide__button + .t-guide__button {
margin-left: var(--td-guide-footer-button-space, var(--td-spacer-1, 24rpx));
}
.t-guide__footer--dialog {
display: flex;
padding: var(--td-guide-dialog-footer-button-padding, 0 var(--td-spacer-3, 48rpx));
}
.t-guide__footer--dialog .t-guide__button:last-child {
flex-grow: 1;
}

3
miniprogram_npm/tdesign-miniprogram/guide/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdGuideProps } from './type';
declare const props: TdGuideProps;
export default props;

60
miniprogram_npm/tdesign-miniprogram/guide/props.js Normal file
View File

@@ -0,0 +1,60 @@
const props = {
backButtonProps: {
type: Object,
},
counter: {
type: null,
},
current: {
type: Number,
value: null,
},
defaultCurrent: {
type: Number,
},
finishButtonProps: {
type: Object,
},
hideBack: {
type: Boolean,
value: false,
},
hideCounter: {
type: Boolean,
value: false,
},
hideSkip: {
type: Boolean,
value: false,
},
highlightPadding: {
type: Number,
value: 16,
},
mode: {
type: String,
value: 'popover',
},
nextButtonProps: {
type: Object,
},
showOverlay: {
type: Boolean,
value: true,
},
skipButtonProps: {
type: Object,
},
steps: {
type: Array,
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
zIndex: {
type: Number,
value: 999999,
},
};
export default props;

87
miniprogram_npm/tdesign-miniprogram/guide/type.d.ts vendored Normal file
View File

@@ -0,0 +1,87 @@
/// <reference types="miniprogram-api-typings" />
import { ButtonProps } from '../button/index';
export interface TdGuideProps {
backButtonProps?: {
type: ObjectConstructor;
value?: ButtonProps;
};
counter?: {
type: StringConstructor;
value?: string | ((params: {
total: number;
current: number;
}) => string);
};
current?: {
type: NumberConstructor;
value?: number;
};
defaultCurrent?: {
type: NumberConstructor;
value?: number;
};
finishButtonProps?: {
type: ObjectConstructor;
value?: ButtonProps;
};
hideBack?: {
type: BooleanConstructor;
value?: boolean;
};
hideCounter?: {
type: BooleanConstructor;
value?: boolean;
};
hideSkip?: {
type: BooleanConstructor;
value?: boolean;
};
highlightPadding?: {
type: NumberConstructor;
value?: number;
};
mode?: {
type: StringConstructor;
value?: 'popover' | 'dialog';
};
nextButtonProps?: {
type: ObjectConstructor;
value?: ButtonProps;
};
showOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
skipButtonProps?: {
type: ObjectConstructor;
value?: ButtonProps;
};
steps?: {
type: ArrayConstructor;
value?: Array<GuideStep>;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
zIndex?: {
type: NumberConstructor;
value?: number;
};
}
export interface GuideStep {
backButtonProps?: ButtonProps;
body?: string;
element: StepElement;
finishButtonProps?: ButtonProps;
highlightPadding?: number;
mode?: 'popover' | 'dialog';
nextButtonProps?: ButtonProps;
offset?: Array<string | number>;
placement?: StepPopoverPlacement;
showOverlay?: boolean;
skipButtonProps?: ButtonProps;
title?: string;
}
export declare type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
export declare type StepPopoverPlacement = 'top' | 'left' | 'right' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'center';

1
miniprogram_npm/tdesign-miniprogram/guide/type.js Normal file
View File

@@ -0,0 +1 @@
export {};