New Huajishe Check ChaoXing

This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions

View File

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

View File

@@ -0,0 +1,18 @@
const props = {
content: {
type: String,
value: '',
},
icon: {
type: String,
},
status: {
type: String,
value: 'default',
},
title: {
type: String,
value: '',
},
};
export default props;

View File

@@ -0,0 +1,34 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class StepItem extends SuperComponent {
options: {
multipleSlots: boolean;
};
relations: RelationsOptions;
externalClasses: string[];
properties: import("./type").TdStepItemProps;
data: {
classPrefix: string;
prefix: string;
index: number;
isDot: boolean;
curStatus: string;
layout: string;
isLastChild: boolean;
sequence: string;
};
observers: {
status(value: any): void;
};
methods: {
updateStatus({ current, currentStatus, index, theme, layout, items, sequence }: {
current: any;
currentStatus: any;
index: any;
theme: any;
layout: any;
items: any;
sequence: any;
}): void;
onTap(): void;
};
}

View File

@@ -0,0 +1,79 @@
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;
};
import { wxComponent, SuperComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-steps-item`;
let StepItem = class StepItem extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.relations = {
'../steps/steps': {
type: 'parent',
},
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-title`,
`${prefix}-class-description`,
`${prefix}-class-extra`,
];
this.properties = props;
this.data = {
classPrefix: name,
prefix,
index: 0,
isDot: false,
curStatus: '',
layout: 'vertical',
isLastChild: false,
sequence: 'positive',
};
this.observers = {
status(value) {
const { curStatus } = this.data;
if (curStatus === '' || value === curStatus)
return;
this.setData({ curStatus: value });
},
};
this.methods = {
updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
let curStatus = this.data.status;
if (curStatus === 'default') {
if (index < Number(current)) {
curStatus = 'finish';
}
else if (index === Number(current)) {
curStatus = currentStatus;
}
}
this.setData({
curStatus,
index,
isDot: theme === 'dot',
layout,
theme,
sequence,
isLastChild: index === (sequence === 'positive' ? items.length - 1 : 0),
});
},
onTap() {
this.$parent.handleClick(this.data.index);
},
};
}
};
StepItem = __decorate([
wxComponent()
], StepItem);
export default StepItem;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}

View File

@@ -0,0 +1,51 @@
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./step-item.wxs" module="t" />
<view
style="{{_._style([style, customStyle])}}"
class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} class {{prefix}}-class"
bind:tap="onTap"
aria-role="{{ariaRole || readonly ? 'option' : 'button'}}"
aria-label="{{ariaLabel || t.getAriaLabel(index, title, content)}}"
aria-current="{{curStatus == 'process'? 'step': ''}}"
>
<!-- icon -->
<view class="{{_.cls(classPrefix + '__anchor', [layout])}}" aria-hidden="true">
<view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
<view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
<slot wx:if="{{icon == 'slot'}}" name="icon" />
<t-icon wx:else name="{{icon}}" size="44rpx" />
</view>
<view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
<t-icon wx:if="{{curStatus == 'finish'}}" name="check" />
<t-icon wx:elif="{{curStatus == 'error'}}" name="close" />
<block wx:else>{{index + 1}}</block>
</view>
</view>
<!-- content -->
<view
class="{{_.cls(classPrefix + '__content', [layout, ['last', isLastChild]])}} {{prefix}}-class-content"
aria-hidden="true"
>
<slot />
<view class="{{_.cls(classPrefix + '__title', [curStatus, layout])}} {{prefix}}-class-title">
{{ title }}
<slot name="title" />
<slot wx:if="{{layout === 'vertical'}}" name="title-right" />
</view>
<view class="{{_.cls(classPrefix + '__description', [layout])}} {{prefix}}-class-description">
{{ content }}
<slot name="content" />
</view>
<view class="{{_.cls(classPrefix + '__extra', [layout])}} {{prefix}}-class-extra">
<slot name="extra" />
</view>
</view>
<view
wx:if="{{!isLastChild}}"
class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])}}"
aria-hidden="true"
/>
</view>

View File

@@ -0,0 +1,7 @@
function getAriaLabel(index, title, content) {
return '第' + (index + 1) + '步,' + title + '' + content;
}
module.exports = {
getAriaLabel: getAriaLabel,
};

View File

@@ -0,0 +1,206 @@
.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-steps-item {
flex: 1;
vertical-align: top;
position: relative;
display: flex;
}
.t-steps-item__circle--default {
color: var(--td-step-item-default-circle-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
background-color: var(--td-step-item-default-circle-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-steps-item__title--default {
color: var(--td-step-item-default-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-steps-item__icon--default {
color: var(--td-step-item-default-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-steps-item__dot--default {
border-color: var(--td-step-item-default-dot-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
background-color: var(--td-step-item-default-dot-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
}
.t-steps-item__circle--process {
color: var(--td-step-item-process-circle-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
background-color: var(--td-step-item-process-circle-bg, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__title--process {
color: var(--td-step-item-process-title-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__icon--process {
color: var(--td-step-item-process-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__dot--process {
border-color: var(--td-step-item-process-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
background-color: var(--td-step-item-process-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__circle--finish {
color: var(--td-step-item-finish-circle-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
background-color: var(--td-step-item-finish-circle-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
}
.t-steps-item__title--finish {
color: var(--td-step-item-finish-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-steps-item__icon--finish {
color: var(--td-step-item-finish-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__dot--finish {
border-color: var(--td-step-item-finish-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
background-color: var(--td-step-item-finish-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__circle--error {
color: var(--td-step-item-error-circle-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
background-color: var(--td-step-item-error-circle-bg, var(--td-error-color-1, #fff0ed));
}
.t-steps-item__title--error {
color: var(--td-step-item-error-title-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-steps-item__icon--error {
color: var(--td-step-item-error-icon-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-steps-item__dot--error {
border-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
background-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-steps-item--horizontal {
flex-direction: column;
justify-content: center;
align-items: center;
}
.t-steps-item__anchor {
display: flex;
align-items: center;
justify-content: center;
}
.t-steps-item__anchor--vertical {
width: var(--td-step-item-circle-size, 44rpx);
height: var(--td-step-item-circle-size, 44rpx);
}
.t-steps-item__circle {
display: flex;
justify-content: center;
align-items: center;
width: var(--td-step-item-circle-size, 44rpx);
height: var(--td-step-item-circle-size, 44rpx);
text-align: center;
border-radius: 50%;
font-size: var(--td-step-item-circle-font-size, 28rpx);
}
.t-steps-item__icon {
z-index: 1;
vertical-align: top;
font-size: var(--td-font-size-base, 28rpx);
position: relative;
}
.t-steps-item__dot {
width: var(--td-step-item-dot-size, 16rpx);
height: var(--td-step-item-dot-size, 16rpx);
border-radius: 50%;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
}
.t-steps-item__content {
text-align: center;
}
.t-steps-item__content--horizontal {
max-width: 80px;
margin-top: 16rpx;
}
.t-steps-item__content--vertical {
margin-left: 16rpx;
flex: 1;
padding-bottom: 32rpx;
}
.t-steps-item__content--vertical.t-steps-item__content--last {
padding-bottom: 0;
}
.t-steps-item__title {
position: relative;
line-height: var(--td-step-item-circle-size, 44rpx);
font-size: var(--td-font-size-base, 28rpx);
}
.t-steps-item__title--process {
font-weight: 600;
}
.t-steps-item__title--vertical {
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8rpx;
}
.t-steps-item__description {
color: var(--td-step-item-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
line-height: 40rpx;
font-size: var(--td-font-size-s, 24rpx);
}
.t-steps-item__description--vertical {
text-align: left;
}
.t-steps-item__extra:not(:empty) {
margin-top: 16rpx;
}
.t-steps-item__line {
background-color: var(--td-step-item-line-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
content: '';
display: block;
position: absolute;
}
.t-steps-item__line--horizontal {
height: 1px;
transform: translateY(-50%);
width: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
top: calc(var(--td-step-item-circle-size, 44rpx) / 2 + 1px);
left: calc(50% + var(--td-step-item-circle-size, 44rpx) / 2 + 16rpx);
}
.t-steps-item__line--horizontal.t-steps-item__line--dot {
top: calc(var(--td-step-item-dot-size, 16rpx) / 2);
}
.t-steps-item__line--finish,
.t-steps-item__line--reverse.t-steps-item__line--process {
background-color: var(--td-step-item-finish-line-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__line--vertical {
height: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
width: 1px;
transform: translateX(-50%);
left: calc(var(--td-step-item-circle-size, 44rpx) / 2);
top: calc(var(--td-step-item-circle-size, 44rpx) + 16rpx);
}
.t-steps-item__line--vertical.t-steps-item__line--dot {
top: var(--td-step-item-circle-size, 44rpx);
height: calc(100% - var(--td-step-item-circle-size, 44rpx));
}
:host {
flex: 1;
vertical-align: top;
position: relative;
align-self: flex-start;
width: inherit;
}

View File

@@ -0,0 +1,19 @@
export interface TdStepItemProps {
content?: {
type: StringConstructor;
value?: string;
};
icon?: {
type: StringConstructor;
value?: string;
};
status?: {
type: StringConstructor;
value?: StepStatus;
};
title?: {
type: StringConstructor;
value?: string;
};
}
export declare type StepStatus = 'default' | 'process' | 'finish' | 'error';

View File

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