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

79
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/README.en-US.md Normal file
View File

@@ -0,0 +1,79 @@
:: BASE_DOC ::
## API
### Grid 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
align | String | center | options: left/center | N
border | Boolean / Object | false | Typescript：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
column | Number | 4 | \- | N
gutter | Number | - | \- | N
hover | Boolean | false | \- | N
theme | String | default | options: default/card | N
### Grid External Classes
className | Description
-- | --
t-class | \-
### GridItem 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
badge-props | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
description | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
icon | String / Object | - | \- | N
image | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
jump-type | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N
layout | String | vertical | options: vertical/horizontal | N
text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
url | String | - | \- | N
### GridItem Events
name | params | description
-- | -- | --
click | \- | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### GridItem External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-description | \-
t-class-image | \-
t-class-text | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-grid-bg-color | @bg-color-container | -
--td-grid-card-radius | @radius-large | -
--td-grid-item-bg-color | @bg-color-container | -
--td-grid-item-description-color | @font-gray-3 | -
--td-grid-item-description-font-size | 24rpx | -
--td-grid-item-description-line-height | 40rpx | -
--td-grid-item-description-padding-top | 8rpx | -
--td-grid-item-horizontal-text-description-top | 4rpx | -
--td-grid-item-horizontal-text-padding-left | 24rpx | -
--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
--td-grid-item-image-middle-width | 80rpx | -
--td-grid-item-image-small-width | 64rpx | -
--td-grid-item-image-width | 96rpx | -
--td-grid-item-padding | 32rpx | -
--td-grid-item-text-color | @font-gray-1 | -
--td-grid-item-text-font-size | 28rpx | -
--td-grid-item-text-line-height | 44rpx | -
--td-grid-item-text-middle-font-size | 24rpx | -
--td-grid-item-text-padding-top | 16rpx | -
--td-grid-item-text-small-font-size | 24rpx | -

140
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/README.md Normal file
View File

@@ -0,0 +1,140 @@
---
title: Grid 宫格
description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-97%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-grid": "tdesign-miniprogram/grid/grid",
"t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/6H70dimL7jSK" 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>
### 组件类型
基础宫格
{{ base }}
带说明的宫格
{{ description }}
带边框的宫格
{{ border }}
带徽章的宫格
{{ badge }}
可滑动的宫格
{{ scroll }}
### 组件样式
可传图标的宫格
{{ icon-grid }}
多行宫格
{{ multiple }}
卡片宫格
{{ card }}
## API
### Grid Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
align | String | center | 内容对齐方式。可选项：left/center | N
border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
gutter | Number | - | 间隔大小 | N
hover | Boolean | false | 是否开启点击反馈 | N
theme | String | default | 宫格的风格。可选项：default/card | N
### Grid External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
### GridItem Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
badge-props | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
text | String / Slot | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
url | String | - | 点击后的跳转链接 | N
### GridItem Events
名称 | 参数 | 描述
-- | -- | --
click | \- | 点击子项后触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### GridItem External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-description | 描述样式类
t-class-image | 图片样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-grid-bg-color | @bg-color-container | -
--td-grid-card-radius | @radius-large | -
--td-grid-item-bg-color | @bg-color-container | -
--td-grid-item-description-color | @font-gray-3 | -
--td-grid-item-description-font-size | 24rpx | -
--td-grid-item-description-line-height | 40rpx | -
--td-grid-item-description-padding-top | 8rpx | -
--td-grid-item-horizontal-text-description-top | 4rpx | -
--td-grid-item-horizontal-text-padding-left | 24rpx | -
--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
--td-grid-item-image-middle-width | 80rpx | -
--td-grid-item-image-small-width | 64rpx | -
--td-grid-item-image-width | 96rpx | -
--td-grid-item-padding | 32rpx | -
--td-grid-item-text-color | @font-gray-1 | -
--td-grid-item-text-font-size | 28rpx | -
--td-grid-item-text-line-height | 44rpx | -
--td-grid-item-text-middle-font-size | 24rpx | -
--td-grid-item-text-padding-top | 16rpx | -
--td-grid-item-text-small-font-size | 24rpx | -

22
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/grid.d.ts vendored Normal file
View File

@@ -0,0 +1,22 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Grid extends SuperComponent {
externalClasses: string[];
relations: RelationsOptions;
properties: import("./type").TdGridProps;
data: {
prefix: string;
classPrefix: string;
contentStyle: string;
};
observers: {
'column,hover,align,gutter,border'(): void;
};
lifetimes: {
attached(): void;
};
methods: {
doForChild(action: (item: WechatMiniprogram.Component.TrivialInstance) => void): void;
updateContentStyle(): void;
getContentMargin(): string;
};
}

66
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/grid.js Normal file
View File

@@ -0,0 +1,66 @@
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 { isObject, SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-grid`;
let Grid = class Grid extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = ['t-class'];
this.relations = {
'../grid-item/grid-item': {
type: 'descendant',
},
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
contentStyle: '',
};
this.observers = {
'column,hover,align,gutter,border'() {
this.updateContentStyle();
this.doForChild((child) => child.updateStyle());
},
};
this.lifetimes = {
attached() {
this.updateContentStyle();
},
};
this.methods = {
doForChild(action) {
this.$children.forEach(action);
},
updateContentStyle() {
const contentStyles = [];
const marginStyle = this.getContentMargin();
marginStyle && contentStyles.push(marginStyle);
this.setData({
contentStyle: contentStyles.join(';'),
});
},
getContentMargin() {
const { gutter } = this.properties;
let { border } = this.properties;
if (!border)
return `margin-left:-${gutter}rpx; margin-top:-${gutter}rpx`;
if (!isObject(border))
border = {};
const { width = 2 } = border;
return `margin-left:-${width}rpx; margin-top:-${width}rpx`;
},
};
}
};
Grid = __decorate([
wxComponent()
], Grid);
export default Grid;

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

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

16
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/grid.wxml Normal file
View File

@@ -0,0 +1,16 @@
<wxs src="../common/utils.wxs" module="_" />
<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [theme])}} class {{prefix}}-class">
<view wx:if="{{column > 0}}" class="{{classPrefix}}__content" style="{{ contentStyle }}">
<slot />
</view>
<scroll-view
wx:else
scroll-x
scroll-with-animation
class="{{classPrefix}}__content"
style="{{ 'white-space: nowrap;' + contentStyle }}"
>
<slot />
</scroll-view>
</view>

40
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/grid.wxss Normal file
View File

@@ -0,0 +1,40 @@
.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-grid {
position: relative;
overflow: hidden;
background-color: var(--td-grid-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-grid__content {
width: auto;
}
.t-grid--card {
margin: 0 32rpx;
border-radius: var(--td-grid-card-radius, var(--td-radius-large, 18rpx));
overflow: hidden;
}

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

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

26
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/props.js Normal file
View File

@@ -0,0 +1,26 @@
const props = {
align: {
type: String,
value: 'center',
},
border: {
type: null,
value: false,
},
column: {
type: Number,
value: 4,
},
gutter: {
type: Number,
},
hover: {
type: Boolean,
value: false,
},
theme: {
type: String,
value: 'default',
},
};
export default props;

30
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/grid/type.d.ts vendored Normal file
View File

@@ -0,0 +1,30 @@
export interface TdGridProps {
align?: {
type: StringConstructor;
value?: 'left' | 'center';
};
border?: {
type: null;
value?: boolean | {
color?: string;
width?: string;
style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset';
};
};
column?: {
type: NumberConstructor;
value?: number;
};
gutter?: {
type: NumberConstructor;
value?: number;
};
hover?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'default' | 'card';
};
}

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

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