e2hang/HuajisheTools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

New Huajishe Check ChaoXing

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

38
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/README.en-US.md Normal file
View File

@@ -0,0 +1,38 @@
:: BASE_DOC ::
## API
### Skeleton 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
animation | String | none | options: gradient/flashed/none | N
delay | Number | 0 | \- | N
loading | Boolean | true | \- | N
row-col | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N
theme | String | text | options: avatar/image/text/paragraph | N
### Skeleton External Classes
className | Description
-- | --
t-class | \-
t-class-col | \-
t-class-row | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | -
--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | -
--td-skeleton-bg-color | @bg-color-page | -
--td-skeleton-circle-border-radius | @radius-circle | -
--td-skeleton-circle-height | 96rpx | -
--td-skeleton-rect-border-radius | @radius-default | -
--td-skeleton-rect-height | 32rpx | -
--td-skeleton-row-spacing | @spacer-2 | -
--td-skeleton-text-border-radius | @radius-small | -
--td-skeleton-text-height | 32rpx | -

86
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/README.md Normal file
View File

@@ -0,0 +1,86 @@
---
title: Skeleton 骨架屏
description: 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-94%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-skeleton": "tdesign-miniprogram/skeleton/skeleton"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/CY7gyimz7GS8" 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>
### 骨架屏类型
基础骨架屏
{{ theme }}
单元格骨架屏
{{ cell-group }}
宫格骨架屏
{{ grid }}
图文组合骨架屏
{{ image-group }}
### 组件动效
{{ animation }}
## API
### Skeleton Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
row-col | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N
theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
### Skeleton External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-col | 行样式类
t-class-row | 列样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | -
--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | -
--td-skeleton-bg-color | @bg-color-page | -
--td-skeleton-circle-border-radius | @radius-circle | -
--td-skeleton-circle-height | 96rpx | -
--td-skeleton-rect-border-radius | @radius-default | -
--td-skeleton-rect-height | 32rpx | -
--td-skeleton-row-spacing | @spacer-2 | -
--td-skeleton-text-border-radius | @radius-small | -
--td-skeleton-text-height | 32rpx | -

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

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

22
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/props.js Normal file
View File

@@ -0,0 +1,22 @@
const props = {
animation: {
type: String,
value: 'none',
},
delay: {
type: Number,
value: 0,
},
loading: {
type: Boolean,
value: true,
},
rowCol: {
type: Array,
},
theme: {
type: String,
value: 'text',
},
};
export default props;

25
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.d.ts vendored Normal file
View File

@@ -0,0 +1,25 @@
import { SuperComponent } from '../common/src/index';
import { SkeletonRowColObj } from './type';
import { ClassName, Styles } from '../common/common';
export default class Skeleton extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdSkeletonProps;
data: {
prefix: string;
classPrefix: string;
parsedRowcols: any[];
};
observers: {
rowCol(): void;
'loading, delay'(): void;
};
lifetimes: {
attached(): void;
};
methods: {
init(): void;
getColItemClass(obj: SkeletonRowColObj): ClassName;
getColItemStyle(obj: SkeletonRowColObj): Styles;
isShowSkeleton(): void;
};
}

135
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.js Normal file
View File

@@ -0,0 +1,135 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { isNumber, classNames } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-skeleton`;
const ThemeMap = {
avatar: [{ type: 'circle', size: '96rpx' }],
image: [{ type: 'rect', size: '144rpx' }],
text: [
[
{ width: '24%', height: '32rpx', marginRight: '32rpx' },
{ width: '76%', height: '32rpx' },
],
1,
],
paragraph: [1, 1, 1, { width: '55%' }],
};
let Skeleton = class Skeleton extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-col`, `${prefix}-class-row`];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
parsedRowcols: [],
};
this.observers = {
rowCol() {
this.init();
},
'loading, delay'() {
this.isShowSkeleton();
},
};
this.lifetimes = {
attached() {
this.init();
this.isShowSkeleton();
},
};
this.methods = {
init() {
const { theme, rowCol } = this.properties;
const rowCols = [];
if (rowCol.length) {
rowCols.push(...rowCol);
}
else {
rowCols.push(...ThemeMap[theme || 'text']);
}
const parsedRowcols = rowCols.map((item) => {
if (isNumber(item)) {
return [
{
class: this.getColItemClass({ type: 'text' }),
style: {},
},
];
}
if (Array.isArray(item)) {
return item.map((col) => {
return Object.assign(Object.assign({}, col), { class: this.getColItemClass(col), style: this.getColItemStyle(col) });
});
}
const nItem = item;
return [
Object.assign(Object.assign({}, nItem), { class: this.getColItemClass(nItem), style: this.getColItemStyle(nItem) }),
];
});
this.setData({
parsedRowcols,
});
},
getColItemClass(obj) {
return classNames([
`${name}__col`,
`${name}--type-${obj.type || 'text'}`,
`${name}--animation-${this.properties.animation}`,
]);
},
getColItemStyle(obj) {
const styleName = [
'width',
'height',
'marginRight',
'marginLeft',
'margin',
'size',
'background',
'backgroundColor',
'borderRadius',
];
const style = {};
styleName.forEach((name) => {
if (name in obj) {
const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
if (name === 'size') {
[style.width, style.height] = [px, px];
}
else {
style[name] = px;
}
}
});
return style;
},
isShowSkeleton() {
const { loading, delay } = this.properties;
if (!loading || delay === 0) {
this.setData({
isShow: loading,
});
return;
}
setTimeout(() => {
this.setData({
isShow: loading,
});
}, delay);
},
};
}
};
Skeleton = __decorate([
wxComponent()
], Skeleton);
export default Skeleton;

5
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.json Normal file
View File

@@ -0,0 +1,5 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}

25
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.wxml Normal file
View File

@@ -0,0 +1,25 @@
<wxs src="../common/utils.wxs" module="_" />
<view wx:if="{{ isShow }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class ">
<view wx:if="{{ parsedRowcols.length }}" class="{{classPrefix}}__content">
<view
wx:for="{{parsedRowcols}}"
wx:for-index="index"
wx:for-item="row"
wx:key="index"
class="{{classPrefix}}__row {{prefix}}-class-row"
>
<view
wx:for="{{ row }}"
wx:for-index="index"
wx:for-item="col"
wx:key="index"
class="{{col.class}} {{prefix}}-class-col"
style="{{_._style(col.style)}}"
></view>
</view>
</view>
</view>
<view wx:else class="class {{classPrefix}}__content">
<slot />
</view>

103
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.wxss Normal file
View File

@@ -0,0 +1,103 @@
.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-skeleton {
box-sizing: border-box;
}
.t-skeleton__row {
display: flex;
margin-bottom: var(--td-skeleton-row-spacing, var(--td-spacer-2, 32rpx));
align-items: center;
justify-content: space-between;
}
.t-skeleton__row:only-child,
.t-skeleton__row:last-child {
margin-bottom: 0;
}
.t-skeleton__col {
background-color: var(--td-skeleton-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
display: flex;
align-items: center;
justify-content: center;
}
.t-skeleton__col:first-child:last-child,
.t-skeleton__col:last-child {
margin-right: 0;
}
.t-skeleton--type-text {
width: 100%;
height: var(--td-skeleton-text-height, 32rpx);
border-radius: var(--td-skeleton-text-border-radius, var(--td-radius-small, 6rpx));
}
.t-skeleton--type-rect {
width: 100%;
height: var(--td-skeleton-rect-height, 32rpx);
border-radius: var(--td-skeleton-rect-border-radius, var(--td-radius-default, 12rpx));
}
.t-skeleton--type-circle {
width: var(--td-skeleton-circle-height, 96rpx);
height: var(--td-skeleton-circle-height, 96rpx);
border-radius: var(--td-skeleton-circle-border-radius, var(--td-skeleton-circle-border-radius, var(--td-radius-circle, 50%)));
flex-shrink: 0;
}
.t-skeleton--animation-gradient {
position: relative;
overflow-x: hidden;
}
.t-skeleton--animation-gradient::after {
content: ' ';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--td-skeleton-animation-gradient, rgba(0, 0, 0, 0.04)), rgba(255, 255, 255, 0));
animation: t-skeleton--gradient 1.5s linear 2s infinite;
}
.t-skeleton--animation-flashed {
animation: t-skeleton--flashed 2s linear 2s infinite;
}
@keyframes t-skeleton--gradient {
0% {
transform: translateX(-100%) skewX(-15deg);
}
100% {
transform: translateX(100%) skewX(-15deg);
}
}
@keyframes t-skeleton--flashed {
0% {
opacity: 1;
}
50% {
background-color: var(--td-skeleton-animation-flashed, rgba(230, 230, 230, 0.3));
opacity: 0.3;
}
100% {
opacity: 1;
}
}

32
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/skeleton/type.d.ts vendored Normal file
View File

@@ -0,0 +1,32 @@
export interface TdSkeletonProps {
animation?: {
type: StringConstructor;
value?: 'gradient' | 'flashed' | 'none';
};
delay?: {
type: NumberConstructor;
value?: number;
};
loading?: {
type: BooleanConstructor;
value?: boolean;
};
rowCol?: {
type: ArrayConstructor;
value?: SkeletonRowCol;
};
theme?: {
type: StringConstructor;
value?: 'avatar' | 'image' | 'text' | 'paragraph';
};
}
export declare type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
export interface SkeletonRowColObj {
width?: string;
size?: string;
height?: string;
marginRight?: string;
marginLeft?: string;
margin?: string;
type?: 'rect' | 'circle' | 'text';
}

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

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