初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/props.d.ts

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

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/props.js

@@ -0,0 +1 @@
+const props={alpha:{type:Number,value:1},content:{type:String},height:{type:Number},isRepeat:{type:Boolean,value:!0},layout:{type:String,value:"rectangular"},lineSpace:{type:Number,value:16},movable:{type:Boolean,value:!1},moveInterval:{type:Number,value:3e3},offset:{type:Array},removable:{type:Boolean,value:!0},rotate:{type:Number,value:-22},watermarkContent:{type:null},width:{type:Number},x:{type:Number},y:{type:Number},zIndex:{type:Number}};export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/type.d.ts

@@ -0,0 +1,77 @@
+export interface TdWatermarkProps {
+    alpha?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    height?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    isRepeat?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    layout?: {
+        type: StringConstructor;
+        value?: 'rectangular' | 'hexagonal';
+    };
+    lineSpace?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    movable?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    moveInterval?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    offset?: {
+        type: ArrayConstructor;
+        value?: Array<number>;
+    };
+    removable?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    rotate?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    watermarkContent?: {
+        type: null;
+        value?: WatermarkText | WatermarkImage | Array<WatermarkText | WatermarkImage>;
+    };
+    width?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    x?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    y?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    zIndex?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+}
+export interface WatermarkText {
+    fontColor?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder';
+    text?: string;
+}
+export interface WatermarkImage {
+    isGrayscale?: boolean;
+    url?: string;
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/type.js

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

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/utils/generateBase64Url.d.ts

@@ -0,0 +1,14 @@
+export default function generateBase64Url(canvas: any, { width, height, gapX, gapY, offsetLeft, offsetTop, rotate, alpha, watermarkContent, lineSpace, watermarkColor, layout, }: {
+    width: any;
+    height: any;
+    gapX: any;
+    gapY: any;
+    offsetLeft: any;
+    offsetTop: any;
+    rotate: any;
+    alpha: any;
+    watermarkContent: any;
+    lineSpace: any;
+    watermarkColor: any;
+    layout: any;
+}, onFinish: any): void;

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/utils/generateBase64Url.js

@@ -0,0 +1 @@
+import{systemInfo}from"../../common/utils";export default function generateBase64Url(t,{width:a,height:e,gapX:o,gapY:l,offsetLeft:r,offsetTop:n,rotate:s,alpha:i,watermarkContent:c,lineSpace:f,watermarkColor:h,layout:g},m){const d="hexagonal"===g,p=t.getContext("2d");if(!p)return console.warn("当前环境不支持Canvas, 无法绘制水印"),void m("");const u=systemInfo.pixelRatio||1;let v={width:o+a};const x=(o+a)*u,w=(l+e)*u,y=a*u,I=e*u,C=x,A=w,D=(o+a)*u,R=(l+e)*u;t.width=x,t.height=w,d&&(t.width=2*x,t.height=2*w,v={width:o+2*a+a/2}),p.translate(r*u,n*u),p.globalAlpha=i,p.fillStyle="transparent",p.fillRect(0,0,y,I);const S=(t,a,e,o)=>{t.translate(a,e),t.rotate(Math.PI/180*Number(o)),t.translate(-a,-e)},$=Array.isArray(c)?c:[Object.assign({},c)];let b=0,E=0,L=0;$.forEach(t=>{t.top=b,t.url?(b+=e,L+=d?2:1):t.text&&(b+=f)});const U=(o,l=0,r=0,n=0,i=0)=>{var c,f;if(o.url){const{url:c,isGrayscale:f=!1}=o,h=t.createImage();h.crossOrigin="anonymous",h.referrerPolicy="no-referrer",h.src=c,h.onload=()=>{var c,g;if(null===(c=p.save)||void 0===c||c.call(p),S(p,n,i,s),f){p.drawImage(h,l,r+o.top*u,a*u,e*u);const t=p.getImageData(0,0,p.canvas.width,p.canvas.height),n=t.data;for(let t=0;t<n.length;t+=4){const a=(n[t]+n[t+1]+n[t+2])/3;n[t]=a,n[t+1]=a,n[t+2]=a}p.putImageData(t,0,0)}else p.drawImage(h,l,r+o.top*u,a*u,e*u);null===(g=p.restore)||void 0===g||g.call(p),E+=1,E===L&&m(t.toDataURL(),v)}}else if(o.text){const{text:t,fontSize:a=16,fontFamily:e="normal",fontWeight:g="normal"}=o,m=(null==o?void 0:o.fontColor)||h;null===(c=p.save)||void 0===c||c.call(p),S(p,n,i,s),((t,a,e,o,l,r,n,s,i)=>{t.font=`normal normal ${r} ${n*u}px/${o}px ${s}`,t.fillStyle=i,t.textAlign="start",t.textBaseline="top",t.fillText(l,a,e)})(p,l,r+o.top*u,I,t,g,a,e,m),null===(f=p.restore)||void 0===f||f.call(p)}};$.forEach(t=>{U(t,0,0,0,0)}),d&&$.forEach(t=>{U(t,D,R,C,A)}),0===L&&m(t.toDataURL(),v)}

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/utils/randomMovingStyle.d.ts

@@ -0,0 +1,10 @@
+export default function randomMovingStyle(): {
+    left0: string;
+    left25: string;
+    left50: string;
+    left75: string;
+    top0: string;
+    top25: string;
+    top50: string;
+    top75: string;
+};

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/utils/randomMovingStyle.js

@@ -0,0 +1 @@
+export default function randomMovingStyle(){const t=Math.floor(4*Math.random()),o=Math.floor(70*Math.random())+30;return{left0:`${1===t?90:3===t?0:o}%`,left25:`${0===t?90:2===t?0:100-o}%`,left50:`${1===t?0:3===t?90:100-o}%`,left75:`${0===t?0:2===t?90:o}%`,top0:`${0===t?0:2===t?95:o}%`,top25:`${1===t?95:3===t?0:o}%`,top50:`${0===t?95:2===t?0:100-o}%`,top75:`${1===t?0:3===t?95:100-o}%`}}

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/watermark.d.ts

@@ -0,0 +1,19 @@
+import { SuperComponent } from '../common/src/index';
+export default class Watermark extends SuperComponent {
+    externalClasses: string[];
+    properties: import("./type").TdWatermarkProps;
+    data: {
+        classPrefix: string;
+        watermarkStyle: {};
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    observers: {
+        'watermarkContent, movable, rotate, x, y, width, height, alpha, lineSpace, moveInterval, zIndex, rotate, offset, removable, isRepeat, layout'(): void;
+    };
+    methods: {
+        watermarkColor(): "rgba(238, 238, 238, 0.1)" | "rgba(0, 0, 0, 0.1)";
+        renderWatermark(): void;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/watermark.js

@@ -0,0 +1 @@
+import{__awaiter,__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import generateBase64Url from"./utils/generateBase64Url";import randomMovingStyle from"./utils/randomMovingStyle";import{appBaseInfo}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-watermark`;let Watermark=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.properties=props,this.data={classPrefix:name,watermarkStyle:{}},this.lifetimes={attached(){this.renderWatermark()}},this.observers={"watermarkContent, movable, rotate, x, y, width, height, alpha, lineSpace, moveInterval, zIndex, rotate, offset, removable, isRepeat, layout"(){this.renderWatermark()}},this.methods={watermarkColor:()=>"dark"===appBaseInfo.theme?"rgba(238, 238, 238, 0.1)":"rgba(0, 0, 0, 0.1)",renderWatermark(){wx.createSelectorQuery().in(this).select("#watermarkCanvas").fields({node:!0,size:!0}).exec(e=>__awaiter(this,void 0,void 0,function*(){var t;if(!(null===(t=e[0])||void 0===t?void 0:t.node))return void console.error("Canvas node not found");const r=e[0].node,a=this.properties,o=a.movable?0:a.x,n=a.movable?0:a.y,i=a.offset||[],m=i[0]||o/2,s=i[1]||n/2,l={width:a.width,height:a.height,rotate:a.movable?0:a.rotate,lineSpace:a.lineSpace,alpha:a.alpha,gapX:o,gapY:n,watermarkContent:a.watermarkContent,offsetLeft:m,offsetTop:s,watermarkColor:this.watermarkColor(),layout:a.layout};generateBase64Url(r,l,(e,t)=>{let r={};if(a.movable){const{left0:e,left25:t,left50:a,left75:o,top0:n,top25:i,top50:m,top75:s}=randomMovingStyle();r={"--watermark-left-0":e,"--watermark-left-25":t,"--watermark-left-50":a,"--watermark-left-75":o,"--watermark-top-0":n,"--watermark-top-25":i,"--watermark-top-50":m,"--watermark-top-75":s}}this.setData({watermarkStyle:Object.assign({zIndex:a.zIndex,position:"absolute",left:0,right:0,top:0,bottom:0,width:"100%",height:"100%",backgroundSize:`${(null==t?void 0:t.width)||o.value+a.width}px`,pointerEvents:"none",backgroundRepeat:a.movable?"no-repeat":"repeat",backgroundImage:`url('${e}')`,animation:a.movable?`watermark infinite ${4*a.moveInterval/60}s`:"none"},r)})})}))}}}};Watermark=__decorate([wxComponent()],Watermark);export default Watermark;

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/watermark.json

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

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/watermark.wxml

@@ -0,0 +1 @@
+<wxs module="_" src="../common/utils.wxs"/><view class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}"><block wx:if="{{content}}">{{content}}</block><slot name="content"/><slot/><canvas type="2d" id="watermarkCanvas" style="display: none; width: 100%; height: 100%"/><view id="watermark" style="{{_._style(watermarkStyle)}}"></view></view>

miniprogram/miniprogram_npm/tdesign-miniprogram/watermark/watermark.wxss

@@ -0,0 +1,7 @@
+@import '../common/style/index.wxss';.t-watermark{position:relative;overflow:hidden;width:100%;}
+@keyframes watermark{
+0%{left:var(--watermark-left-0);top:var(--watermark-top-0);}
+25%{left:var(--watermark-left-25);top:var(--watermark-top-25);}
+50%{left:var(--watermark-left-50);top:var(--watermark-top-50);transform:translateX(-100%);}
+75%{left:var(--watermark-left-75);top:var(--watermark-top-75);}
+100%{left:var(--watermark-left-0);top:var(--watermark-top-0);}}