初始化项目, 添加TDesign等包

This commit is contained in:
zhengw
2025-11-28 16:49:36 +08:00
commit 3e53beb7bb
980 changed files with 39201 additions and 0 deletions

View File

@@ -0,0 +1,93 @@
import { SuperComponent } from '../common/src/index';
export default class ImageViewer extends SuperComponent {
externalClasses: string[];
properties: {
backgroundColor?: {
type: StringConstructor;
value?: string;
};
closeBtn?: {
type: null;
value?: string | boolean | object;
};
deleteBtn?: {
type: null;
value?: string | boolean | object;
};
images?: {
type: ArrayConstructor;
value?: string[];
};
initialIndex?: {
type: NumberConstructor;
value?: Number;
};
lazy?: {
type: BooleanConstructor;
value?: boolean;
};
showIndex?: {
type: BooleanConstructor;
value?: boolean;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
};
};
data: {
prefix: string;
classPrefix: string;
currentSwiperIndex: number;
loadedImageIndexes: any[];
windowHeight: number;
windowWidth: number;
swiperStyle: {};
imagesStyle: {};
maskTop: number;
};
options: {
multipleSlots: boolean;
};
controlledProps: {
key: string;
event: string;
}[];
ready(): void;
observers: {
'visible,initialIndex,images'(visible: any, initialIndex: any, images: any): void;
closeBtn(v: any): void;
deleteBtn(v: any): void;
};
methods: {
calcMaskTop(): void;
saveScreenSize(): void;
calcImageDisplayStyle(imageWidth: any, imageHeight: any): {
styleObj: {
width: string;
height: string;
left: string;
transform: string;
};
} | {
styleObj: {
width: string;
height: string;
left?: undefined;
transform?: undefined;
};
};
onImageLoadSuccess(e: WechatMiniprogram.TouchEvent): void;
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
onClose(e: any): void;
onDelete(): void;
};
}

View File

@@ -0,0 +1 @@
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import{styles,calcIcon,systemInfo}from"../common/utils";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-image-viewer`;let ImageViewer=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.properties=Object.assign({},props),this.data={prefix:prefix,classPrefix:name,currentSwiperIndex:0,loadedImageIndexes:[],windowHeight:0,windowWidth:0,swiperStyle:{},imagesStyle:{},maskTop:0},this.options={multipleSlots:!0},this.controlledProps=[{key:"visible",event:"close"}],this.observers={"visible,initialIndex,images"(e,t,s){e&&(null==s?void 0:s.length)&&this.setData({loadedImageIndexes:[],currentSwiperIndex:t>=s.length?s.length-1:t})},closeBtn(e){this.setData({_closeBtn:calcIcon(e,"close")})},deleteBtn(e){this.setData({_deleteBtn:calcIcon(e,"delete")})}},this.methods={calcMaskTop(){if(this.data.usingCustomNavbar){const e=(null===wx||void 0===wx?void 0:wx.getMenuButtonBoundingClientRect())||null,{statusBarHeight:t}=systemInfo;e&&t&&this.setData({maskTop:e.top-t+e.bottom})}},saveScreenSize(){const{windowHeight:e,windowWidth:t}=systemInfo;this.setData({windowHeight:e,windowWidth:t})},calcImageDisplayStyle(e,t){const{windowWidth:s,windowHeight:i}=this.data,a=e/t;if(e<s&&t<i)return{styleObj:{width:2*e+"rpx",height:2*t+"rpx",left:"50%",transform:"translate(-50%, -50%)"}};if(a>=1)return{styleObj:{width:"100vw",height:s/a*2+"rpx"}};const n=a*i*2;return n<s?{styleObj:{width:`${n}rpx`,height:"100vh",left:"50%",transform:"translate(-50%, -50%)"}}:{styleObj:{width:"100vw",height:s/e*t*2+"rpx"}}},onImageLoadSuccess(e){const{detail:{width:t,height:s},currentTarget:{dataset:{index:i}}}=e,{mode:a,styleObj:n}=this.calcImageDisplayStyle(t,s),o=this.data.imagesStyle,r=this.data.swiperStyle;this.data.loadedImageIndexes.includes(i)||this.setData({loadedImageIndexes:[...this.data.loadedImageIndexes,i]}),this.setData({swiperStyle:Object.assign(Object.assign({},r),{[i]:{style:`height: ${n.height}`}}),imagesStyle:Object.assign(Object.assign({},o),{[i]:{mode:a,style:styles(Object.assign({},n))}})})},onSwiperChange(e){const{detail:{current:t}}=e;this.setData({currentSwiperIndex:t}),this._trigger("change",{index:t})},onClose(e){const{source:t}=e.currentTarget.dataset;this._trigger("close",{visible:!1,trigger:t||"button",index:this.data.currentSwiperIndex})},onDelete(){this._trigger("delete",{index:this.data.currentSwiperIndex})}}}ready(){this.saveScreenSize(),this.calcMaskTop()}};ImageViewer=__decorate([wxComponent()],ImageViewer);export default ImageViewer;

View File

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

View File

@@ -0,0 +1 @@
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./image-viewer.wxs" module="utils"/><view wx:if="{{visible}}" id="{{classPrefix}}" class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle, '--td-image-viewer-top: ' + maskTop + 'px'])}}" aria-modal="{{true}}" aria-role="dialog" aria-label="图片查看器" catchtouchmove="true"><view class="{{classPrefix}}__mask" data-source="overlay" bind:tap="onClose" style="{{_._style([backgroundColor && '--td-image-viewer-mask-bg-color: ' + backgroundColor])}}" aria-role="button" aria-label="关闭"/><block wx:if="{{images && images.length}}"><view class="{{classPrefix}}__content"><swiper class="swiper" style="{{swiperStyle[currentSwiperIndex].style}}" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange" bindtap="onClose" tabindex="0"><swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image"><t-image wx:if="{{!lazy || utils.shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes) }}" t-class="t-image--external" style="{{imagesStyle[index].style || ''}}" mode="aspectFit" src="{{item}}" data-index="{{index}}" class="{{classPrefix}}__image" bindload="onImageLoadSuccess"></t-image></swiper-item></swiper></view><view class="{{classPrefix}}__nav"><view class="{{classPrefix}}__nav-close" catch:tap="onClose" aria-role="button" aria-label="关闭"><slot name="close-btn"/><template wx:if="{{_closeBtn}}" is="icon" data="{{ ..._closeBtn }}"/></view><view wx:if="{{showIndex}}" class="{{classPrefix}}__nav-index">{{currentSwiperIndex + 1}}/{{images.length}}</view><view class="{{classPrefix}}__nav-delete" bind:tap="onDelete" aria-role="button" aria-label="删除"><slot name="delete-btn"/><template is="icon" data="{{ ..._deleteBtn }}"/></view></view></block></view>

View File

@@ -0,0 +1,7 @@
function shouldLoadImage(index, currentIndex, loadedIndexes) {
return Math.abs(index - currentIndex) <= 1 || (loadedIndexes && loadedIndexes.indexOf(index) !== -1);
}
module.exports = {
shouldLoadImage: shouldLoadImage,
};

View File

@@ -0,0 +1,13 @@
@import '../common/style/index.wxss';.t-image-viewer{position:fixed;top:var(--td-image-viewer-top,var(--td-position-fixed-top,0));left:0;bottom:0;right:0;z-index:1001;transform:translateZ(0);overflow:hidden;}
.t-image-viewer__mask{position:absolute;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:var(--td-image-viewer-mask-bg-color,var(--td-mask-active,rgba(0,0,0,.6)));}
.t-image-viewer__content{width:100vw;display:inline-block;position:absolute;top:50%;transform:translateY(-50%);z-index:1005;}
.t-image-viewer .swiper{outline:0;}
.t-image-viewer__image{width:100%;display:inline-block;position:absolute;top:50%;transform:translateY(-50%);}
.t-image-viewer .t-image--external{width:inherit;height:inherit;display:block;}
.t-image-viewer__nav{width:100%;position:absolute;display:flex;align-items:center;justify-content:space-between;height:var(--td-image-viewer-nav-height,96rpx);background-color:var(--td-image-viewer-nav-bg-color,#000);left:0;color:var(--td-image-viewer-nav-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));z-index:1005;}
.t-image-viewer__nav-close{margin-left:var(--td-image-viewer-close-margin-left,var(--td-spacer-1,24rpx));}
.t-image-viewer__nav-close:empty{display:none;}
.t-image-viewer__nav-delete{margin-right:var(--td-image-viewer-delete-margin-right,var(--td-spacer-1,24rpx));}
.t-image-viewer__nav-delete:empty{display:none;}
.t-image-viewer__nav-close,.t-image-viewer__nav-delete{font-size:48rpx;}
.t-image-viewer__nav-index{flex:1;font-size:var(--td-image-viewer-nav-index-font-size,var(--td-font-size-base,28rpx));text-align:center;}

View File

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

View File

@@ -0,0 +1 @@
const props={backgroundColor:{type:String,value:""},closeBtn:{type:null,value:!1},deleteBtn:{type:null,value:!1},images:{type:Array,value:[]},initialIndex:{type:Number,value:0},lazy:{type:Boolean,value:!0},showIndex:{type:Boolean,value:!1},usingCustomNavbar:{type:Boolean,value:!1},visible:{type:Boolean,value:null},defaultVisible:{type:Boolean,value:!1}};export default props;

View File

@@ -0,0 +1,42 @@
export interface TdImageViewerProps {
backgroundColor?: {
type: StringConstructor;
value?: string;
};
closeBtn?: {
type: null;
value?: string | boolean | object;
};
deleteBtn?: {
type: null;
value?: string | boolean | object;
};
images?: {
type: ArrayConstructor;
value?: Array<string>;
};
initialIndex?: {
type: NumberConstructor;
value?: Number;
};
lazy?: {
type: BooleanConstructor;
value?: boolean;
};
showIndex?: {
type: BooleanConstructor;
value?: boolean;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
};
}

View File

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