@solar-angular/ui-sun 19.0.0 → 19.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/solar-angular-ui-sun-nav-progress-bar.mjs +5 -3
- package/fesm2022/solar-angular-ui-sun-nav-progress-bar.mjs.map +1 -1
- package/fesm2022/solar-angular-ui-sun-slider-captcha.mjs +63 -79
- package/fesm2022/solar-angular-ui-sun-slider-captcha.mjs.map +1 -1
- package/package.json +3 -3
- package/slider-captcha/slider-captcha.component.d.ts +19 -21
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AsyncPipe } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { inject, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
|
|
5
5
|
import { fadeAnimation } from '@solar-angular/animations';
|
|
6
6
|
import { filter, map, startWith, distinctUntilChanged, shareReplay } from 'rxjs';
|
|
@@ -10,11 +10,13 @@ class SunNavProgressBar {
|
|
|
10
10
|
this.navigating$ = inject(Router).events.pipe(filter(event => [NavigationStart, NavigationEnd, NavigationError, NavigationCancel].some(o => event instanceof o)), map(event => event instanceof NavigationStart), startWith(true), distinctUntilChanged(), shareReplay(1));
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SunNavProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SunNavProgressBar, isStandalone: true, selector: "sun-nav-progress-bar", ngImport: i0, template: `@if (navigating$ | async) {<div @fadeAnimation></div>}`, isInline: true, styles: ["
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SunNavProgressBar, isStandalone: true, selector: "sun-nav-progress-bar", host: { classAttribute: "sun-nav-progress-bar" }, ngImport: i0, template: `@if (navigating$ | async) {<div @fadeAnimation></div>}`, isInline: true, styles: [".sun-nav-progress-bar{--track-color: transparent;--progress-color: var(--color-primary)}.sun-nav-progress-bar>div{position:fixed;top:0;left:0;width:100%;height:2.5px;background:var(--track-color);z-index:999}.sun-nav-progress-bar>div:after{content:\"\";display:block;height:100%;width:40%;transform-origin:left;background:var(--progress-color);animation:sun-nav-progress 1.5s infinite linear}@keyframes sun-nav-progress{0%{transform:translate(250%) scaleX(.2)}80%{transform:translate(0) scaleX(1)}to{transform:translate(0) scaleX(0)}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], animations: [fadeAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SunNavProgressBar, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'sun-nav-progress-bar', template: `@if (navigating$ | async) {<div @fadeAnimation></div>}`, imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeAnimation],
|
|
17
|
+
args: [{ selector: 'sun-nav-progress-bar', template: `@if (navigating$ | async) {<div @fadeAnimation></div>}`, imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [fadeAnimation], host: {
|
|
18
|
+
class: 'sun-nav-progress-bar'
|
|
19
|
+
}, styles: [".sun-nav-progress-bar{--track-color: transparent;--progress-color: var(--color-primary)}.sun-nav-progress-bar>div{position:fixed;top:0;left:0;width:100%;height:2.5px;background:var(--track-color);z-index:999}.sun-nav-progress-bar>div:after{content:\"\";display:block;height:100%;width:40%;transform-origin:left;background:var(--progress-color);animation:sun-nav-progress 1.5s infinite linear}@keyframes sun-nav-progress{0%{transform:translate(250%) scaleX(.2)}80%{transform:translate(0) scaleX(1)}to{transform:translate(0) scaleX(0)}}\n"] }]
|
|
18
20
|
}] });
|
|
19
21
|
|
|
20
22
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"solar-angular-ui-sun-nav-progress-bar.mjs","sources":["../../../packages/ui-sun/nav-progress-bar/nav-progress-bar.component.ts","../../../packages/ui-sun/nav-progress-bar/solar-angular-ui-sun-nav-progress-bar.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';\nimport { fadeAnimation } from '@solar-angular/animations';\nimport { distinctUntilChanged, filter, map, shareReplay, startWith } from 'rxjs';\n\n@Component({\n selector: 'sun-nav-progress-bar',\n template: `@if (navigating$ | async) {<div @fadeAnimation></div>}`,\n imports: [AsyncPipe],\n styleUrl: './nav-progress-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [fadeAnimation]\n})\nexport class SunNavProgressBar {\n navigating$ = inject(Router).events.pipe(\n filter(event =>\n [NavigationStart, NavigationEnd, NavigationError, NavigationCancel].some(o => event instanceof o)\n ),\n map(event => event instanceof NavigationStart),\n startWith(true),\n distinctUntilChanged(),\n shareReplay(1)\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"solar-angular-ui-sun-nav-progress-bar.mjs","sources":["../../../packages/ui-sun/nav-progress-bar/nav-progress-bar.component.ts","../../../packages/ui-sun/nav-progress-bar/solar-angular-ui-sun-nav-progress-bar.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';\nimport { fadeAnimation } from '@solar-angular/animations';\nimport { distinctUntilChanged, filter, map, shareReplay, startWith } from 'rxjs';\n\n@Component({\n selector: 'sun-nav-progress-bar',\n template: `@if (navigating$ | async) {<div @fadeAnimation></div>}`,\n imports: [AsyncPipe],\n styleUrl: './nav-progress-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n animations: [fadeAnimation],\n host: {\n class: 'sun-nav-progress-bar'\n }\n})\nexport class SunNavProgressBar {\n navigating$ = inject(Router).events.pipe(\n filter(event =>\n [NavigationStart, NavigationEnd, NavigationError, NavigationCancel].some(o => event instanceof o)\n ),\n map(event => event instanceof NavigationStart),\n startWith(true),\n distinctUntilChanged(),\n shareReplay(1)\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAkBa,iBAAiB,CAAA;AAZ9B,IAAA,WAAA,GAAA;AAaE,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,CACtC,MAAM,CAAC,KAAK,IACV,CAAC,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAClG,EACD,GAAG,CAAC,KAAK,IAAI,KAAK,YAAY,eAAe,CAAC,EAC9C,SAAS,CAAC,IAAI,CAAC,EACf,oBAAoB,EAAE,EACtB,WAAW,CAAC,CAAC,CAAC,CACf;AACF;+GAVY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,kIAVlB,CAAwD,sDAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0hBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACxD,SAAS,EAIP,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAC,aAAa,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAKhB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,YACtB,CAAwD,sDAAA,CAAA,EAAA,OAAA,EACzD,CAAC,SAAS,CAAC,mBAEH,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,cACzB,CAAC,aAAa,CAAC,EACrB,IAAA,EAAA;AACJ,wBAAA,KAAK,EAAE;AACR,qBAAA,EAAA,MAAA,EAAA,CAAA,0hBAAA,CAAA,EAAA;;;AChBH;;AAEG;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { viewChild, input, numberAttribute, output, signal, afterNextRender, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { withPixel } from '@solar-kit/core';
|
|
4
4
|
import { zip, fromEvent, take } from 'rxjs';
|
|
5
5
|
import * as i1 from '@angular/common/http';
|
|
@@ -35,40 +35,45 @@ class SunSliderCaptcha {
|
|
|
35
35
|
*/
|
|
36
36
|
get quotient() {
|
|
37
37
|
return {
|
|
38
|
-
width: this.width / WIDTH,
|
|
39
|
-
height: this.height / HEIGHT
|
|
38
|
+
width: this.width() / WIDTH,
|
|
39
|
+
height: this.height() / HEIGHT
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
constructor(http) {
|
|
43
43
|
this.http = http;
|
|
44
|
-
this.
|
|
45
|
-
this.
|
|
46
|
-
this.
|
|
47
|
-
this.
|
|
48
|
-
this.
|
|
44
|
+
this.canvasRef = viewChild.required('canvas');
|
|
45
|
+
this.sliderRef = viewChild.required('slider');
|
|
46
|
+
this.srcUrl = input.required();
|
|
47
|
+
this.verifyUrl = input.required();
|
|
48
|
+
this.verifyData = input();
|
|
49
|
+
this.width = input(WIDTH, { transform: numberAttribute });
|
|
50
|
+
this.height = input(HEIGHT, { transform: numberAttribute });
|
|
51
|
+
this.verified = output();
|
|
49
52
|
/** 滑块拼图的x坐标 */
|
|
50
53
|
this.x = 0;
|
|
51
54
|
this.secrets = {};
|
|
55
|
+
this.loading = signal(false);
|
|
56
|
+
this.verifying = signal(false);
|
|
52
57
|
this.alert = {
|
|
53
|
-
type: 'success',
|
|
54
|
-
|
|
55
|
-
|
|
58
|
+
type: signal('success'),
|
|
59
|
+
content: signal(''),
|
|
60
|
+
visible: signal(false)
|
|
56
61
|
};
|
|
57
62
|
/** 滑动开始的X */
|
|
58
63
|
this.dragStartX = -1;
|
|
59
64
|
/** 滑动bar初始的scrollLeft */
|
|
60
65
|
this.scrollLeft = 0;
|
|
61
66
|
this.bar = {
|
|
62
|
-
|
|
63
|
-
background: 'var(--indicator-primary-color)'
|
|
67
|
+
handlerWidth: 42, // 滑块手柄宽度
|
|
68
|
+
background: signal('var(--indicator-primary-color)'), // 滑块背景色
|
|
64
69
|
};
|
|
65
70
|
afterNextRender(() => {
|
|
66
71
|
const dpr = devicePixelRatio;
|
|
67
|
-
this.canvas = this.canvasRef.nativeElement;
|
|
68
|
-
this.canvas.style.width = withPixel(this.width);
|
|
69
|
-
this.canvas.style.height = withPixel(this.height);
|
|
70
|
-
this.canvas.width = withDpr(this.width);
|
|
71
|
-
this.canvas.height = withDpr(this.height);
|
|
72
|
+
this.canvas = this.canvasRef().nativeElement;
|
|
73
|
+
this.canvas.style.width = withPixel(this.width());
|
|
74
|
+
this.canvas.style.height = withPixel(this.height());
|
|
75
|
+
this.canvas.width = withDpr(this.width());
|
|
76
|
+
this.canvas.height = withDpr(this.height());
|
|
72
77
|
this.ctx = this.canvas.getContext('2d');
|
|
73
78
|
this.ctx.scale(dpr, dpr);
|
|
74
79
|
setTimeout(() => {
|
|
@@ -77,13 +82,11 @@ class SunSliderCaptcha {
|
|
|
77
82
|
});
|
|
78
83
|
}
|
|
79
84
|
refresh() {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
this.
|
|
84
|
-
this.
|
|
85
|
-
this.loading = true;
|
|
86
|
-
this.http.post(this.srcUrl, { captchaType: "blockPuzzle" /* CaptchaType.BlockPuzzle */ }, HTTP_OPTIONS).subscribe(response => {
|
|
85
|
+
this.sliderRef().nativeElement.scrollTo(this.width(), 0);
|
|
86
|
+
this.alert.visible.set(false);
|
|
87
|
+
this.bar.background.set('var(--indicator-primary-color)');
|
|
88
|
+
this.loading.set(true);
|
|
89
|
+
this.http.post(this.srcUrl(), { captchaType: "blockPuzzle" /* CaptchaType.BlockPuzzle */ }, HTTP_OPTIONS).subscribe(response => {
|
|
87
90
|
if (response.code === 0) {
|
|
88
91
|
this.secrets.secretKey = response.data.secretKey;
|
|
89
92
|
this.secrets.token = response.data.token;
|
|
@@ -104,51 +107,54 @@ class SunSliderCaptcha {
|
|
|
104
107
|
}
|
|
105
108
|
draw(x = 0) {
|
|
106
109
|
this.x = x;
|
|
107
|
-
|
|
108
|
-
|
|
110
|
+
const width = this.width();
|
|
111
|
+
const height = this.height();
|
|
112
|
+
this.ctx.clearRect(0, 0, width, height);
|
|
113
|
+
this.ctx.drawImage(this.bgImage, 0, 0, width, height);
|
|
109
114
|
this.ctx.drawImage(this.slideImage, this.x, 0, this.quotient.width * PUZZLE_WIDTH, this.quotient.height * PUZZLE_HEIGHT);
|
|
110
|
-
this.loading
|
|
115
|
+
this.loading.set(false);
|
|
111
116
|
}
|
|
112
117
|
slide(x) {
|
|
113
118
|
this.draw(x);
|
|
114
119
|
}
|
|
115
120
|
verify(x) {
|
|
116
|
-
this.verifying
|
|
121
|
+
this.verifying.set(true);
|
|
117
122
|
// 计算出原始移动距离
|
|
118
123
|
x = x / this.quotient.width;
|
|
119
124
|
this.endTime = new Date().getTime();
|
|
120
125
|
const json = JSON.stringify({ x: x, y: 5.0 });
|
|
121
126
|
const pointJson = this.secrets.secretKey ? aesEncrypt(json, this.secrets.secretKey) : json;
|
|
122
|
-
const
|
|
127
|
+
const verifyDataValue = this.verifyData();
|
|
128
|
+
const verifyData = typeof verifyDataValue === 'function' ? verifyDataValue() : verifyDataValue;
|
|
123
129
|
const obj = {
|
|
124
130
|
captchaType: "blockPuzzle" /* CaptchaType.BlockPuzzle */,
|
|
125
131
|
pointJson,
|
|
126
132
|
token: this.secrets.token,
|
|
127
133
|
...verifyData
|
|
128
134
|
};
|
|
129
|
-
this.http.post(this.verifyUrl, obj, HTTP_OPTIONS).subscribe({
|
|
135
|
+
this.http.post(this.verifyUrl(), obj, HTTP_OPTIONS).subscribe({
|
|
130
136
|
next: response => {
|
|
131
137
|
if (response.code !== 0) {
|
|
132
|
-
this.alert.type
|
|
133
|
-
this.alert.
|
|
134
|
-
this.alert.
|
|
135
|
-
this.bar.background
|
|
138
|
+
this.alert.type.set('error');
|
|
139
|
+
this.alert.content.set(response.msg);
|
|
140
|
+
this.alert.visible.set(true);
|
|
141
|
+
this.bar.background.set('var(--indicator-danger-color)');
|
|
136
142
|
this.verified.emit({
|
|
137
143
|
code: -1,
|
|
138
144
|
msg: response.msg,
|
|
139
145
|
data: null
|
|
140
146
|
});
|
|
141
147
|
setTimeout(() => {
|
|
142
|
-
this.alert.
|
|
148
|
+
this.alert.visible.set(false);
|
|
143
149
|
this.refresh();
|
|
144
150
|
}, 1000);
|
|
145
151
|
}
|
|
146
152
|
else {
|
|
147
|
-
this.alert.type
|
|
148
|
-
this.bar.background
|
|
153
|
+
this.alert.type.set('success');
|
|
154
|
+
this.bar.background.set('var(--indicator-primary-color)');
|
|
149
155
|
const seconds = Math.abs(this.endTime - this.beginTime) / 1000;
|
|
150
|
-
this.alert.
|
|
151
|
-
this.alert.
|
|
156
|
+
this.alert.content.set(`${seconds} 秒 验证成功`);
|
|
157
|
+
this.alert.visible.set(true);
|
|
152
158
|
const temp = response.data.token + '---' + json;
|
|
153
159
|
response.data.captcha = this.secrets.secretKey ? aesEncrypt(temp, this.secrets.secretKey) : temp;
|
|
154
160
|
// delete response.data.token;
|
|
@@ -162,20 +168,20 @@ class SunSliderCaptcha {
|
|
|
162
168
|
});
|
|
163
169
|
}
|
|
164
170
|
},
|
|
165
|
-
complete: () => this.verifying
|
|
171
|
+
complete: () => this.verifying.set(false)
|
|
166
172
|
});
|
|
167
173
|
}
|
|
168
174
|
markStart(event) {
|
|
169
|
-
if (!this.loading && !this.verifying) {
|
|
175
|
+
if (!this.loading() && !this.verifying()) {
|
|
170
176
|
event.stopPropagation();
|
|
171
177
|
this.dragStartX = event.clientX;
|
|
172
|
-
this.scrollLeft = this.sliderRef.nativeElement.scrollLeft;
|
|
178
|
+
this.scrollLeft = this.sliderRef().nativeElement.scrollLeft;
|
|
173
179
|
}
|
|
174
180
|
}
|
|
175
181
|
markEnd(event) {
|
|
176
182
|
event.stopPropagation();
|
|
177
183
|
if (this.dragStartX > -1) {
|
|
178
|
-
this.verify(this.width - this.sliderRef.nativeElement.scrollLeft);
|
|
184
|
+
this.verify(this.width() - this.sliderRef().nativeElement.scrollLeft);
|
|
179
185
|
}
|
|
180
186
|
this.dragStartX = -1;
|
|
181
187
|
}
|
|
@@ -185,49 +191,27 @@ class SunSliderCaptcha {
|
|
|
185
191
|
const currentX = event.clientX; // 得到当前的X
|
|
186
192
|
const offset = currentX - this.dragStartX; // 得到拖动的距离
|
|
187
193
|
let left = this.scrollLeft - (offset < 0 ? 0 : offset);
|
|
188
|
-
if (left <= this.bar.
|
|
189
|
-
left = this.bar.
|
|
194
|
+
if (left <= this.bar.handlerWidth) {
|
|
195
|
+
left = this.bar.handlerWidth;
|
|
190
196
|
}
|
|
191
|
-
else if (left >= this.width) {
|
|
192
|
-
left = this.width;
|
|
197
|
+
else if (left >= this.width()) {
|
|
198
|
+
left = this.width();
|
|
193
199
|
}
|
|
194
|
-
this.sliderRef.nativeElement.scrollLeft = left;
|
|
195
|
-
this.slide(this.width - left);
|
|
200
|
+
this.sliderRef().nativeElement.scrollLeft = left;
|
|
201
|
+
this.slide(this.width() - left);
|
|
196
202
|
}
|
|
197
203
|
}
|
|
198
204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SunSliderCaptcha, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
199
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SunSliderCaptcha, isStandalone: true, selector: "sun-slider-captcha", inputs: { srcUrl: "srcUrl", verifyUrl: "verifyUrl", verifyData: "verifyData", width:
|
|
205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SunSliderCaptcha, isStandalone: true, selector: "sun-slider-captcha", inputs: { srcUrl: { classPropertyName: "srcUrl", publicName: "srcUrl", isSignal: true, isRequired: true, transformFunction: null }, verifyUrl: { classPropertyName: "verifyUrl", publicName: "verifyUrl", isSignal: true, isRequired: true, transformFunction: null }, verifyData: { classPropertyName: "verifyData", publicName: "verifyData", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { verified: "verified" }, host: { listeners: { "window:pointerup": "markEnd($event)", "window:pointercancel": "markEnd($event)", "window:pointermove": "moveMarker($event)" }, properties: { "class.sun-slider-captcha-loading": "loading()", "class.sun-slider-captcha-verifying": "verifying()" }, classAttribute: "sun-slider-captcha" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "sliderRef", first: true, predicate: ["slider"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sun-slider-captcha-canvas-container\" [style.width.px]=\"width()\" [style.height.px]=\"height()\">\n <canvas #canvas></canvas>\n @if (alert.visible()) {\n <div\n class=\"sun-slider-captcha-alert\"\n [class.sun-slider-captcha-alert-success]=\"alert.type() === 'success'\"\n [class.sun-slider-captcha-alert-danger]=\"alert.type() === 'error'\">\n {{ alert.content() }}\n </div>\n }\n</div>\n\n<div\n #slider\n class=\"sun-slider-captcha-bar\"\n [style.width.px]=\"width()\"\n (scroll)=\"$event.preventDefault()\"\n (touchmove)=\"$event.preventDefault()\"\n (mousewheel)=\"$event.preventDefault()\">\n <div\n class=\"sun-slider-captcha-trough\"\n draggable=\"false\"\n [style]=\"{ background: bar.background() }\"\n [style.width.px]=\"width()\"></div>\n <div class=\"sun-slider-captcha-track\" [style.width.px]=\"width()\" [draggable]=\"false\">\n <span class=\"sun-slider-captcha-tip\" [draggable]=\"false\">\u62D6\u52A8\u6ED1\u5757\u4EE5\u5B8C\u6210\u62FC\u56FE\u9A8C\u8BC1</span>\n <div class=\"sun-slider-captcha-handler-warpper\" [style.width.px]=\"bar.handlerWidth\">\n <div class=\"sun-slider-captcha-handler\" [draggable]=\"false\" (pointerdown)=\"markStart($event)\">\n <svg viewBox=\"0 0 512 512\">\n <path\n stroke-width=\"32\"\n stroke-linecap=\"round\"\n stroke-miterlimit=\"10\"\n d=\"M80 160h352M80 256h352M80 352h352\"></path>\n </svg>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sun-slider-captcha{--background: white;--indicator-primary-color: var(--color-primary);--indicator-danger-color: var(--color-danger);--alert-success-color: var(--color-success);--alert-danger-color: var(--color-danger);--alert-success-background: #dcfce7;--alert-danger-background: #fee2e2;--handler-color: #94a3b8;--handler-border-color: #e2e8f0;display:inline-block;overflow:hidden}.sun-slider-captcha-canvas-container{position:relative;background:var(--background)}.sun-slider-captcha-alert{position:absolute;width:100%;bottom:0;opacity:.9;text-align:center;padding:4px 0;font-size:14px}.sun-slider-captcha-alert-success{color:var(--alert-success-color);background:var(--alert-success-background)}.sun-slider-captcha-alert-danger{color:var(--alert-danger-color);background:var(--alert-danger-background)}.sun-slider-captcha-bar{font-size:0;height:40px;line-height:40px;overflow:scroll hidden;white-space:nowrap;scrollbar-width:none}.sun-slider-captcha-bar::-webkit-scrollbar{display:none}.sun-slider-captcha-track{display:inline-block;position:relative;font-size:14px;text-align:center;background:var(--background);height:100%}.sun-slider-captcha-trough{display:inline-block;height:100%;vertical-align:top}.sun-slider-captcha-tip{z-index:3;pointer-events:none;-webkit-user-select:none;user-select:none}.sun-slider-captcha-handler{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(--background);border:1px solid var(--handler-border-color)}.sun-slider-captcha-handler>svg{font-size:24px;color:var(--handler-color);width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box;stroke:currentcolor;transform:rotate(90deg)}.sun-slider-captcha-handler-warpper{position:absolute;top:0;left:0;cursor:grab;height:40px}.sun-slider-captcha-loading .sun-slider-captcha-handler-warpper,.sun-slider-captcha-verifying .sun-slider-captcha-handler-warpper{cursor:progress}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
200
206
|
}
|
|
201
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SunSliderCaptcha, decorators: [{
|
|
202
208
|
type: Component,
|
|
203
|
-
args: [{ selector: 'sun-slider-captcha',
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
args: ['class.sun-verify-verifying']
|
|
210
|
-
}], canvasRef: [{
|
|
211
|
-
type: ViewChild,
|
|
212
|
-
args: ['canvas', { static: true }]
|
|
213
|
-
}], sliderRef: [{
|
|
214
|
-
type: ViewChild,
|
|
215
|
-
args: ['slider', { static: true }]
|
|
216
|
-
}], srcUrl: [{
|
|
217
|
-
type: Input
|
|
218
|
-
}], verifyUrl: [{
|
|
219
|
-
type: Input
|
|
220
|
-
}], verifyData: [{
|
|
221
|
-
type: Input
|
|
222
|
-
}], width: [{
|
|
223
|
-
type: Input,
|
|
224
|
-
args: [{ transform: numberAttribute }]
|
|
225
|
-
}], height: [{
|
|
226
|
-
type: Input,
|
|
227
|
-
args: [{ transform: numberAttribute }]
|
|
228
|
-
}], verified: [{
|
|
229
|
-
type: Output
|
|
230
|
-
}], markEnd: [{
|
|
209
|
+
args: [{ selector: 'sun-slider-captcha', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
210
|
+
class: 'sun-slider-captcha',
|
|
211
|
+
'[class.sun-slider-captcha-loading]': `loading()`,
|
|
212
|
+
'[class.sun-slider-captcha-verifying]': `verifying()`,
|
|
213
|
+
}, template: "<div class=\"sun-slider-captcha-canvas-container\" [style.width.px]=\"width()\" [style.height.px]=\"height()\">\n <canvas #canvas></canvas>\n @if (alert.visible()) {\n <div\n class=\"sun-slider-captcha-alert\"\n [class.sun-slider-captcha-alert-success]=\"alert.type() === 'success'\"\n [class.sun-slider-captcha-alert-danger]=\"alert.type() === 'error'\">\n {{ alert.content() }}\n </div>\n }\n</div>\n\n<div\n #slider\n class=\"sun-slider-captcha-bar\"\n [style.width.px]=\"width()\"\n (scroll)=\"$event.preventDefault()\"\n (touchmove)=\"$event.preventDefault()\"\n (mousewheel)=\"$event.preventDefault()\">\n <div\n class=\"sun-slider-captcha-trough\"\n draggable=\"false\"\n [style]=\"{ background: bar.background() }\"\n [style.width.px]=\"width()\"></div>\n <div class=\"sun-slider-captcha-track\" [style.width.px]=\"width()\" [draggable]=\"false\">\n <span class=\"sun-slider-captcha-tip\" [draggable]=\"false\">\u62D6\u52A8\u6ED1\u5757\u4EE5\u5B8C\u6210\u62FC\u56FE\u9A8C\u8BC1</span>\n <div class=\"sun-slider-captcha-handler-warpper\" [style.width.px]=\"bar.handlerWidth\">\n <div class=\"sun-slider-captcha-handler\" [draggable]=\"false\" (pointerdown)=\"markStart($event)\">\n <svg viewBox=\"0 0 512 512\">\n <path\n stroke-width=\"32\"\n stroke-linecap=\"round\"\n stroke-miterlimit=\"10\"\n d=\"M80 160h352M80 256h352M80 352h352\"></path>\n </svg>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sun-slider-captcha{--background: white;--indicator-primary-color: var(--color-primary);--indicator-danger-color: var(--color-danger);--alert-success-color: var(--color-success);--alert-danger-color: var(--color-danger);--alert-success-background: #dcfce7;--alert-danger-background: #fee2e2;--handler-color: #94a3b8;--handler-border-color: #e2e8f0;display:inline-block;overflow:hidden}.sun-slider-captcha-canvas-container{position:relative;background:var(--background)}.sun-slider-captcha-alert{position:absolute;width:100%;bottom:0;opacity:.9;text-align:center;padding:4px 0;font-size:14px}.sun-slider-captcha-alert-success{color:var(--alert-success-color);background:var(--alert-success-background)}.sun-slider-captcha-alert-danger{color:var(--alert-danger-color);background:var(--alert-danger-background)}.sun-slider-captcha-bar{font-size:0;height:40px;line-height:40px;overflow:scroll hidden;white-space:nowrap;scrollbar-width:none}.sun-slider-captcha-bar::-webkit-scrollbar{display:none}.sun-slider-captcha-track{display:inline-block;position:relative;font-size:14px;text-align:center;background:var(--background);height:100%}.sun-slider-captcha-trough{display:inline-block;height:100%;vertical-align:top}.sun-slider-captcha-tip{z-index:3;pointer-events:none;-webkit-user-select:none;user-select:none}.sun-slider-captcha-handler{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(--background);border:1px solid var(--handler-border-color)}.sun-slider-captcha-handler>svg{font-size:24px;color:var(--handler-color);width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box;stroke:currentcolor;transform:rotate(90deg)}.sun-slider-captcha-handler-warpper{position:absolute;top:0;left:0;cursor:grab;height:40px}.sun-slider-captcha-loading .sun-slider-captcha-handler-warpper,.sun-slider-captcha-verifying .sun-slider-captcha-handler-warpper{cursor:progress}\n"] }]
|
|
214
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }], propDecorators: { markEnd: [{
|
|
231
215
|
type: HostListener,
|
|
232
216
|
args: ['window:pointerup', ['$event']]
|
|
233
217
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"solar-angular-ui-sun-slider-captcha.mjs","sources":["../../../packages/ui-sun/slider-captcha/utils.ts","../../../packages/ui-sun/slider-captcha/slider-captcha.component.ts","../../../packages/ui-sun/slider-captcha/slider-captcha.component.html","../../../packages/ui-sun/slider-captcha/solar-angular-ui-sun-slider-captcha.ts"],"sourcesContent":["import { HttpContext } from '@angular/common/http';\nimport { API_TOKEN, AUTH_TOKEN } from '@solar-angular/http';\nimport { encrypt } from 'crypto-js/aes';\nimport { parse } from 'crypto-js/enc-utf8';\nimport { default as mode } from 'crypto-js/mode-ecb';\nimport { default as padding } from 'crypto-js/pad-pkcs7';\n\nexport const HTTP_OPTIONS = {\n withCredentials: true,\n context: new HttpContext().set(API_TOKEN, false).set(AUTH_TOKEN, false)\n};\n\nexport const aesEncrypt = (word: string, secret: string) => {\n const key = parse(secret);\n const src = parse(word);\n const encrypted = encrypt(src, key, { mode, padding });\n return encrypted.toString();\n};\n\nexport function withDpr(value: number) {\n return value * devicePixelRatio;\n}\n","import { HttpClient } from '@angular/common/http';\nimport { afterNextRender, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, numberAttribute, Output, ViewChild } from '@angular/core';\nimport { withPixel } from '@solar-kit/core';\nimport { Result } from '@solar-kit/planets/sun';\nimport { fromEvent, take, zip } from 'rxjs';\nimport { Captcha, CaptchaType } from './model';\nimport { aesEncrypt, HTTP_OPTIONS, withDpr } from './utils';\n\n/** 验证码的原始尺寸 */\nconst HEIGHT = 155, WIDTH = 310;\n/** 拼图的原始尺寸 */\nconst PUZZLE_HEIGHT = 155, PUZZLE_WIDTH = 50;\n\n@Component({\n selector: 'sun-slider-captcha',\n standalone: true,\n templateUrl: './slider-captcha.component.html',\n styleUrl: './slider-captcha.component.scss',\n})\nexport class SunSliderCaptcha {\n @HostBinding('class.sun-verify-loading') loading = false;\n @HostBinding('class.sun-verify-verifying') verifying = false;\n\n @ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;\n @ViewChild('slider', { static: true }) sliderRef!: ElementRef<HTMLDivElement>;\n\n @Input() srcUrl!: string;\n @Input() verifyUrl!: string;\n @Input() verifyData?: Record<string, any> | (() => Record<string, any>);\n @Input({ transform: numberAttribute }) width = WIDTH;\n @Input({ transform: numberAttribute }) height = HEIGHT;\n\n @Output() verified = new EventEmitter<Result<Captcha>>();\n\n private canvas!: HTMLCanvasElement;\n private ctx!: CanvasRenderingContext2D;\n private bgImage!: HTMLImageElement;\n private slideImage!: HTMLImageElement;\n\n /** 滑块拼图的x坐标 */\n x = 0;\n\n secrets: { secretKey: string, token: string } = {} as any;\n\n alert: { type: 'success' | 'error', msg: string, show: boolean } = {\n type: 'success', // error\n msg: '',\n show: false\n };\n\n beginTime!: number;\n endTime!: number;\n\n /** 滑动开始的X */\n dragStartX = -1;\n /** 滑动bar初始的scrollLeft */\n scrollLeft = 0;\n\n bar = {\n blockWidth: 42, // 滑块宽度\n background: 'var(--indicator-primary-color)'\n };\n\n /**\n * 当前尺寸 除于 原始尺寸得到的商\n * 用于等比例缩放\n */\n get quotient() {\n return {\n width: this.width / WIDTH,\n height: this.height / HEIGHT\n };\n }\n\n constructor(private http: HttpClient) {\n afterNextRender(() => {\n const dpr = devicePixelRatio;\n this.canvas = this.canvasRef.nativeElement;\n this.canvas.style.width = withPixel(this.width);\n this.canvas.style.height = withPixel(this.height);\n this.canvas.width = withDpr(this.width);\n this.canvas.height = withDpr(this.height);\n\n this.ctx = this.canvas.getContext('2d')!;\n this.ctx.scale(dpr, dpr);\n\n setTimeout(() => {\n this.refresh();\n });\n })\n }\n\n refresh() {\n setTimeout(() => {\n this.sliderRef.nativeElement.scrollTo(this.width, 0);\n }, 50);\n this.alert.show = false;\n this.bar.background = 'var(--indicator-primary-color)';\n this.loading = true;\n this.http.post<Result<Captcha>>(this.srcUrl, { captchaType: CaptchaType.BlockPuzzle }, HTTP_OPTIONS).subscribe(response => {\n if (response.code === 0) {\n this.secrets.secretKey = response.data.secretKey;\n this.secrets.token = response.data.token;\n this.bgImage = new Image();\n this.slideImage = new Image();\n // this.bgImage.src = `data:image/png;base64,${re.data.jigsawImageBase64}`;\n this.bgImage.src = `data:image/png;base64,${response.data.originalImageBase64}`;\n this.slideImage.src = `data:image/png;base64,${response.data.jigsawImageBase64}`;\n zip(\n fromEvent(this.bgImage, 'load'),\n fromEvent(this.slideImage, 'load'),\n ).pipe(take(1)).subscribe(() => {\n this.beginTime = new Date().getTime();\n this.draw();\n });\n } else {\n console.error(response.msg);\n }\n });\n }\n\n private draw(x = 0) {\n this.x = x;\n this.ctx.clearRect(0, 0, this.width, this.height);\n this.ctx.drawImage(this.bgImage, 0, 0, this.width, this.height);\n this.ctx.drawImage(this.slideImage, this.x, 0, this.quotient.width * PUZZLE_WIDTH, this.quotient.height * PUZZLE_HEIGHT);\n this.loading = false;\n }\n\n slide(x: number) {\n this.draw(x);\n }\n\n verify(x: number) {\n this.verifying = true;\n // 计算出原始移动距离\n x = x / this.quotient.width;\n\n this.endTime = new Date().getTime();\n const json = JSON.stringify({ x: x, y: 5.0 });\n const pointJson = this.secrets.secretKey ? aesEncrypt(json, this.secrets.secretKey) : json;\n const verifyData = typeof this.verifyData === 'function' ? this.verifyData() : this.verifyData;\n const obj = {\n captchaType: CaptchaType.BlockPuzzle,\n pointJson,\n token: this.secrets.token,\n ...verifyData\n };\n this.http.post<Result<Captcha>>(this.verifyUrl, obj, HTTP_OPTIONS).subscribe({\n next: response => {\n if (response.code !== 0) {\n this.alert.type = 'error';\n this.alert.msg = response.msg;\n this.alert.show = true;\n this.bar.background = 'var(--indicator-danger-color)';\n this.verified.emit({\n code: -1,\n msg: response.msg,\n data: null!\n });\n setTimeout(() => {\n this.alert.show = false;\n this.refresh();\n }, 1000);\n } else {\n this.alert.type = 'success';\n this.bar.background = 'var(--indicator-primary-color)';\n const seconds = Math.abs(this.endTime - this.beginTime) / 1000;\n this.alert.msg = ` ${seconds}秒 验证成功`;\n this.alert.show = true;\n const temp = response.data.token + '---' + json;\n response.data.captcha = this.secrets.secretKey ? aesEncrypt(temp, this.secrets.secretKey) : temp;\n // delete response.data.token;\n // delete response.data.captchaType;\n // delete response.data.pointJson;\n // delete response.data.result;\n this.verified.emit({\n code: 0,\n msg: response.msg,\n data: response.data\n });\n }\n },\n complete: () => this.verifying = false\n });\n }\n\n markStart(event: PointerEvent) {\n if (!this.loading && !this.verifying) {\n event.stopPropagation();\n this.dragStartX = event.clientX;\n this.scrollLeft = this.sliderRef.nativeElement.scrollLeft;\n }\n }\n\n @HostListener('window:pointerup', ['$event'])\n @HostListener('window:pointercancel', ['$event'])\n markEnd(event: PointerEvent) {\n event.stopPropagation();\n if (this.dragStartX > -1) {\n this.verify(this.width - this.sliderRef.nativeElement.scrollLeft);\n }\n this.dragStartX = -1;\n }\n\n @HostListener('window:pointermove', ['$event'])\n moveMarker(event: PointerEvent) {\n event.stopPropagation();\n if (this.dragStartX > -1) { // 如果在拖动了\n const currentX = event.clientX; // 得到当前的X\n const offset = currentX - this.dragStartX; // 得到拖动的距离\n\n let left = this.scrollLeft - (offset < 0 ? 0 : offset);\n\n if (left <= this.bar.blockWidth) {\n left = this.bar.blockWidth;\n } else if (left >= this.width) {\n left = this.width;\n }\n this.sliderRef.nativeElement.scrollLeft = left;\n this.slide(this.width - left);\n }\n }\n\n}\n","<div class=\"slide-block\" [style.width.px]=\"width\" [style.height.px]=\"height\">\n <canvas #canvas></canvas>\n @if (alert.show) {\n <div\n class=\"slide-alert\"\n [class.slide-alert-success]=\"alert.type === 'success'\"\n [class.slide-alert-danger]=\"alert.type === 'error'\"\n >\n {{ alert.msg }}\n </div>\n }\n</div>\n\n<div\n #slider\n class=\"verify-bar\"\n [style.width.px]=\"width\"\n (scroll)=\"$event.preventDefault()\"\n (touchmove)=\"$event.preventDefault()\"\n (mousewheel)=\"$event.preventDefault()\"\n>\n <div\n style=\"display: inline-block; height: 40px; vertical-align: top\"\n [style]=\"{ background: bar.background }\"\n [draggable]=\"false\"\n [style.width.px]=\"width\"\n ></div>\n <div class=\"verify-bar-area\" [style.width.px]=\"width\" [draggable]=\"false\">\n <span class=\"verify-msg\" [draggable]=\"false\">拖动滑块以完成拼图验证</span>\n <div class=\"verify-left-bar\" [style.width.px]=\"bar.blockWidth\">\n <div\n class=\"verify-move-block\"\n [draggable]=\"false\"\n (pointerdown)=\"markStart($event)\"\n >\n <svg viewBox=\"0 0 512 512\">\n <path\n stroke-width=\"32\"\n stroke-linecap=\"round\"\n stroke-miterlimit=\"10\"\n d=\"M80 160h352M80 256h352M80 352h352\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"solar-angular-ui-sun-slider-captcha.mjs","sources":["../../../packages/ui-sun/slider-captcha/utils.ts","../../../packages/ui-sun/slider-captcha/slider-captcha.component.ts","../../../packages/ui-sun/slider-captcha/slider-captcha.component.html","../../../packages/ui-sun/slider-captcha/solar-angular-ui-sun-slider-captcha.ts"],"sourcesContent":["import { HttpContext } from '@angular/common/http';\nimport { API_TOKEN, AUTH_TOKEN } from '@solar-angular/http';\nimport { encrypt } from 'crypto-js/aes';\nimport { parse } from 'crypto-js/enc-utf8';\nimport { default as mode } from 'crypto-js/mode-ecb';\nimport { default as padding } from 'crypto-js/pad-pkcs7';\n\nexport const HTTP_OPTIONS = {\n withCredentials: true,\n context: new HttpContext().set(API_TOKEN, false).set(AUTH_TOKEN, false)\n};\n\nexport const aesEncrypt = (word: string, secret: string) => {\n const key = parse(secret);\n const src = parse(word);\n const encrypted = encrypt(src, key, { mode, padding });\n return encrypted.toString();\n};\n\nexport function withDpr(value: number) {\n return value * devicePixelRatio;\n}\n","import { HttpClient } from '@angular/common/http';\nimport { afterNextRender, ChangeDetectionStrategy, Component, ElementRef, HostListener, input, numberAttribute, output, signal, viewChild, ViewEncapsulation } from '@angular/core';\nimport { withPixel } from '@solar-kit/core';\nimport { Result } from '@solar-kit/planets/sun';\nimport { fromEvent, take, zip } from 'rxjs';\nimport { Captcha, CaptchaType } from './model';\nimport { aesEncrypt, HTTP_OPTIONS, withDpr } from './utils';\n\n/** 验证码的原始尺寸 */\nconst HEIGHT = 155, WIDTH = 310;\n/** 拼图的原始尺寸 */\nconst PUZZLE_HEIGHT = 155, PUZZLE_WIDTH = 50;\n\n@Component({\n selector: 'sun-slider-captcha',\n templateUrl: './slider-captcha.component.html',\n styleUrl: './slider-captcha.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'sun-slider-captcha',\n '[class.sun-slider-captcha-loading]': `loading()`,\n '[class.sun-slider-captcha-verifying]': `verifying()`,\n }\n})\nexport class SunSliderCaptcha {\n readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n readonly sliderRef = viewChild.required<ElementRef<HTMLDivElement>>('slider');\n\n readonly srcUrl = input.required<string>();\n readonly verifyUrl = input.required<string>();\n readonly verifyData = input<Record<string, any> | (() => Record<string, any>)>();\n readonly width = input(WIDTH, { transform: numberAttribute });\n readonly height = input(HEIGHT, { transform: numberAttribute });\n\n readonly verified = output<Result<Captcha>>();\n\n private canvas!: HTMLCanvasElement;\n private ctx!: CanvasRenderingContext2D;\n private bgImage!: HTMLImageElement;\n private slideImage!: HTMLImageElement;\n\n /** 滑块拼图的x坐标 */\n x = 0;\n\n secrets: { secretKey: string, token: string } = {} as any;\n\n readonly loading = signal(false);\n readonly verifying = signal(false);\n readonly alert = {\n type: signal<'success' | 'error'>('success'),\n content: signal<string>(''),\n visible: signal<boolean>(false)\n }\n\n beginTime!: number;\n endTime!: number;\n\n /** 滑动开始的X */\n dragStartX = -1;\n /** 滑动bar初始的scrollLeft */\n scrollLeft = 0;\n\n readonly bar = {\n handlerWidth: 42, // 滑块手柄宽度\n background: signal('var(--indicator-primary-color)'), // 滑块背景色\n }\n\n /**\n * 当前尺寸 除于 原始尺寸得到的商\n * 用于等比例缩放\n */\n get quotient() {\n return {\n width: this.width() / WIDTH,\n height: this.height() / HEIGHT\n };\n }\n\n constructor(private http: HttpClient) {\n afterNextRender(() => {\n const dpr = devicePixelRatio;\n this.canvas = this.canvasRef().nativeElement;\n this.canvas.style.width = withPixel(this.width());\n this.canvas.style.height = withPixel(this.height());\n this.canvas.width = withDpr(this.width());\n this.canvas.height = withDpr(this.height());\n\n this.ctx = this.canvas.getContext('2d')!;\n this.ctx.scale(dpr, dpr);\n\n setTimeout(() => {\n this.refresh();\n });\n })\n }\n\n refresh() {\n this.sliderRef().nativeElement.scrollTo(this.width(), 0);\n this.alert.visible.set(false);\n this.bar.background.set('var(--indicator-primary-color)')\n this.loading.set(true);\n this.http.post<Result<Captcha>>(this.srcUrl(), { captchaType: CaptchaType.BlockPuzzle }, HTTP_OPTIONS).subscribe(response => {\n if (response.code === 0) {\n this.secrets.secretKey = response.data.secretKey;\n this.secrets.token = response.data.token;\n this.bgImage = new Image();\n this.slideImage = new Image();\n // this.bgImage.src = `data:image/png;base64,${re.data.jigsawImageBase64}`;\n this.bgImage.src = `data:image/png;base64,${response.data.originalImageBase64}`;\n this.slideImage.src = `data:image/png;base64,${response.data.jigsawImageBase64}`;\n zip(\n fromEvent(this.bgImage, 'load'),\n fromEvent(this.slideImage, 'load'),\n ).pipe(take(1)).subscribe(() => {\n this.beginTime = new Date().getTime();\n this.draw();\n });\n } else {\n console.error(response.msg);\n }\n });\n }\n\n private draw(x = 0) {\n this.x = x;\n const width = this.width();\n const height = this.height();\n this.ctx.clearRect(0, 0, width, height);\n this.ctx.drawImage(this.bgImage, 0, 0, width, height);\n this.ctx.drawImage(this.slideImage, this.x, 0, this.quotient.width * PUZZLE_WIDTH, this.quotient.height * PUZZLE_HEIGHT);\n this.loading.set(false);\n }\n\n slide(x: number) {\n this.draw(x);\n }\n\n verify(x: number) {\n this.verifying.set(true)\n // 计算出原始移动距离\n x = x / this.quotient.width;\n\n this.endTime = new Date().getTime();\n const json = JSON.stringify({ x: x, y: 5.0 });\n const pointJson = this.secrets.secretKey ? aesEncrypt(json, this.secrets.secretKey) : json;\n const verifyDataValue = this.verifyData();\n const verifyData = typeof verifyDataValue === 'function' ? verifyDataValue() : verifyDataValue;\n const obj = {\n captchaType: CaptchaType.BlockPuzzle,\n pointJson,\n token: this.secrets.token,\n ...verifyData\n };\n this.http.post<Result<Captcha>>(this.verifyUrl(), obj, HTTP_OPTIONS).subscribe({\n next: response => {\n if (response.code !== 0) {\n this.alert.type.set('error')\n this.alert.content.set(response.msg)\n this.alert.visible.set(true);\n this.bar.background.set('var(--indicator-danger-color)')\n this.verified.emit({\n code: -1,\n msg: response.msg,\n data: null!\n });\n setTimeout(() => {\n this.alert.visible.set(false);\n this.refresh();\n }, 1000);\n } else {\n this.alert.type.set('success')\n this.bar.background.set('var(--indicator-primary-color)')\n const seconds = Math.abs(this.endTime - this.beginTime) / 1000;\n this.alert.content.set(`${seconds} 秒 验证成功`)\n this.alert.visible.set(true);\n const temp = response.data.token + '---' + json;\n response.data.captcha = this.secrets.secretKey ? aesEncrypt(temp, this.secrets.secretKey) : temp;\n // delete response.data.token;\n // delete response.data.captchaType;\n // delete response.data.pointJson;\n // delete response.data.result;\n this.verified.emit({\n code: 0,\n msg: response.msg,\n data: response.data\n });\n }\n },\n complete: () => this.verifying.set(false)\n });\n }\n\n markStart(event: PointerEvent) {\n if (!this.loading() && !this.verifying()) {\n event.stopPropagation();\n this.dragStartX = event.clientX;\n this.scrollLeft = this.sliderRef().nativeElement.scrollLeft;\n }\n }\n\n @HostListener('window:pointerup', ['$event'])\n @HostListener('window:pointercancel', ['$event'])\n markEnd(event: PointerEvent) {\n event.stopPropagation();\n if (this.dragStartX > -1) {\n this.verify(this.width() - this.sliderRef().nativeElement.scrollLeft);\n }\n this.dragStartX = -1;\n }\n\n @HostListener('window:pointermove', ['$event'])\n moveMarker(event: PointerEvent) {\n event.stopPropagation();\n if (this.dragStartX > -1) { // 如果在拖动了\n const currentX = event.clientX; // 得到当前的X\n const offset = currentX - this.dragStartX; // 得到拖动的距离\n\n let left = this.scrollLeft - (offset < 0 ? 0 : offset);\n\n if (left <= this.bar.handlerWidth) {\n left = this.bar.handlerWidth;\n } else if (left >= this.width()) {\n left = this.width();\n }\n this.sliderRef().nativeElement.scrollLeft = left;\n this.slide(this.width() - left);\n }\n }\n\n}\n","<div class=\"sun-slider-captcha-canvas-container\" [style.width.px]=\"width()\" [style.height.px]=\"height()\">\n <canvas #canvas></canvas>\n @if (alert.visible()) {\n <div\n class=\"sun-slider-captcha-alert\"\n [class.sun-slider-captcha-alert-success]=\"alert.type() === 'success'\"\n [class.sun-slider-captcha-alert-danger]=\"alert.type() === 'error'\">\n {{ alert.content() }}\n </div>\n }\n</div>\n\n<div\n #slider\n class=\"sun-slider-captcha-bar\"\n [style.width.px]=\"width()\"\n (scroll)=\"$event.preventDefault()\"\n (touchmove)=\"$event.preventDefault()\"\n (mousewheel)=\"$event.preventDefault()\">\n <div\n class=\"sun-slider-captcha-trough\"\n draggable=\"false\"\n [style]=\"{ background: bar.background() }\"\n [style.width.px]=\"width()\"></div>\n <div class=\"sun-slider-captcha-track\" [style.width.px]=\"width()\" [draggable]=\"false\">\n <span class=\"sun-slider-captcha-tip\" [draggable]=\"false\">拖动滑块以完成拼图验证</span>\n <div class=\"sun-slider-captcha-handler-warpper\" [style.width.px]=\"bar.handlerWidth\">\n <div class=\"sun-slider-captcha-handler\" [draggable]=\"false\" (pointerdown)=\"markStart($event)\">\n <svg viewBox=\"0 0 512 512\">\n <path\n stroke-width=\"32\"\n stroke-linecap=\"round\"\n stroke-miterlimit=\"10\"\n d=\"M80 160h352M80 256h352M80 352h352\"></path>\n </svg>\n </div>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@solar-angular/ui-sun",
|
|
3
|
-
"version": "19.0.
|
|
3
|
+
"version": "19.0.2",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@solar-angular/http": "19.0.
|
|
10
|
-
"@solar-angular/animations": "19.0.
|
|
9
|
+
"@solar-angular/http": "19.0.2",
|
|
10
|
+
"@solar-angular/animations": "19.0.2",
|
|
11
11
|
"crypto-js": "^4.2.0",
|
|
12
12
|
"tslib": "^2.3.0"
|
|
13
13
|
},
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import { HttpClient } from '@angular/common/http';
|
|
2
|
-
import { ElementRef
|
|
2
|
+
import { ElementRef } from '@angular/core';
|
|
3
3
|
import { Result } from '@solar-kit/planets/sun';
|
|
4
4
|
import { Captcha } from './model';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export declare class SunSliderCaptcha {
|
|
7
7
|
private http;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
height: number;
|
|
17
|
-
verified: EventEmitter<Result<Captcha>>;
|
|
8
|
+
readonly canvasRef: import("@angular/core").Signal<ElementRef<HTMLCanvasElement>>;
|
|
9
|
+
readonly sliderRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
|
|
10
|
+
readonly srcUrl: import("@angular/core").InputSignal<string>;
|
|
11
|
+
readonly verifyUrl: import("@angular/core").InputSignal<string>;
|
|
12
|
+
readonly verifyData: import("@angular/core").InputSignal<Record<string, any> | (() => Record<string, any>) | undefined>;
|
|
13
|
+
readonly width: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
14
|
+
readonly height: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
15
|
+
readonly verified: import("@angular/core").OutputEmitterRef<Result<Captcha>>;
|
|
18
16
|
private canvas;
|
|
19
17
|
private ctx;
|
|
20
18
|
private bgImage;
|
|
@@ -25,10 +23,12 @@ export declare class SunSliderCaptcha {
|
|
|
25
23
|
secretKey: string;
|
|
26
24
|
token: string;
|
|
27
25
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
readonly loading: import("@angular/core").WritableSignal<boolean>;
|
|
27
|
+
readonly verifying: import("@angular/core").WritableSignal<boolean>;
|
|
28
|
+
readonly alert: {
|
|
29
|
+
type: import("@angular/core").WritableSignal<"success" | "error">;
|
|
30
|
+
content: import("@angular/core").WritableSignal<string>;
|
|
31
|
+
visible: import("@angular/core").WritableSignal<boolean>;
|
|
32
32
|
};
|
|
33
33
|
beginTime: number;
|
|
34
34
|
endTime: number;
|
|
@@ -36,9 +36,9 @@ export declare class SunSliderCaptcha {
|
|
|
36
36
|
dragStartX: number;
|
|
37
37
|
/** 滑动bar初始的scrollLeft */
|
|
38
38
|
scrollLeft: number;
|
|
39
|
-
bar: {
|
|
40
|
-
|
|
41
|
-
background: string
|
|
39
|
+
readonly bar: {
|
|
40
|
+
handlerWidth: number;
|
|
41
|
+
background: import("@angular/core").WritableSignal<string>;
|
|
42
42
|
};
|
|
43
43
|
/**
|
|
44
44
|
* 当前尺寸 除于 原始尺寸得到的商
|
|
@@ -57,7 +57,5 @@ export declare class SunSliderCaptcha {
|
|
|
57
57
|
markEnd(event: PointerEvent): void;
|
|
58
58
|
moveMarker(event: PointerEvent): void;
|
|
59
59
|
static ɵfac: i0.ɵɵFactoryDeclaration<SunSliderCaptcha, never>;
|
|
60
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SunSliderCaptcha, "sun-slider-captcha", never, { "srcUrl": { "alias": "srcUrl"; "required":
|
|
61
|
-
static ngAcceptInputType_width: unknown;
|
|
62
|
-
static ngAcceptInputType_height: unknown;
|
|
60
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SunSliderCaptcha, "sun-slider-captcha", never, { "srcUrl": { "alias": "srcUrl"; "required": true; "isSignal": true; }; "verifyUrl": { "alias": "verifyUrl"; "required": true; "isSignal": true; }; "verifyData": { "alias": "verifyData"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, { "verified": "verified"; }, never, never, true, never>;
|
|
63
61
|
}
|