@solar-angular/ui-sun 19.1.1 → 19.2.0
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { viewChild, input, numberAttribute, output, signal, afterNextRender, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { viewChild, input, numberAttribute, output, signal, computed, afterNextRender, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { withPixel } from '@solar-kit/core';
|
|
4
4
|
import { CaptchaType } from '@solar-kit/planets/mercury';
|
|
5
5
|
import { zip, fromEvent, take } from 'rxjs';
|
|
@@ -30,28 +30,15 @@ const HEIGHT = 155, WIDTH = 310;
|
|
|
30
30
|
/** 拼图的原始尺寸 */
|
|
31
31
|
const PUZZLE_HEIGHT = 155, PUZZLE_WIDTH = 50;
|
|
32
32
|
class SunSliderCaptcha {
|
|
33
|
-
/**
|
|
34
|
-
* 当前尺寸 除于 原始尺寸得到的商
|
|
35
|
-
* 用于等比例缩放
|
|
36
|
-
*/
|
|
37
|
-
get quotient() {
|
|
38
|
-
return {
|
|
39
|
-
width: this.width() / WIDTH,
|
|
40
|
-
height: this.height() / HEIGHT
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
33
|
constructor(http) {
|
|
44
34
|
this.http = http;
|
|
45
35
|
this.canvasRef = viewChild.required('canvas');
|
|
46
|
-
this.sliderRef = viewChild.required('slider');
|
|
47
36
|
this.srcUrl = input.required();
|
|
48
37
|
this.verifyUrl = input.required();
|
|
49
38
|
this.verifyData = input();
|
|
50
39
|
this.width = input(375, { transform: numberAttribute });
|
|
51
40
|
this.height = input(187.5, { transform: numberAttribute });
|
|
52
41
|
this.verified = output();
|
|
53
|
-
/** 滑块拼图的x坐标 */
|
|
54
|
-
this.x = 0;
|
|
55
42
|
this.secrets = {};
|
|
56
43
|
this.loading = signal(false);
|
|
57
44
|
this.verifying = signal(false);
|
|
@@ -62,12 +49,18 @@ class SunSliderCaptcha {
|
|
|
62
49
|
};
|
|
63
50
|
/** 滑动开始的X */
|
|
64
51
|
this.dragStartX = -1;
|
|
65
|
-
|
|
66
|
-
this.scrollLeft = 0;
|
|
52
|
+
this.offsetX = signal(0);
|
|
67
53
|
this.bar = {
|
|
68
|
-
handlerWidth: 42, // 滑块手柄宽度
|
|
69
54
|
background: signal('var(--indicator-primary-color)'), // 滑块背景色
|
|
70
55
|
};
|
|
56
|
+
/**
|
|
57
|
+
* 当前尺寸 除于 原始尺寸得到的商
|
|
58
|
+
* 用于等比例缩放
|
|
59
|
+
*/
|
|
60
|
+
this.quotient = computed(() => ({
|
|
61
|
+
width: this.width() / WIDTH,
|
|
62
|
+
height: this.height() / HEIGHT
|
|
63
|
+
}));
|
|
71
64
|
afterNextRender(() => {
|
|
72
65
|
const dpr = devicePixelRatio;
|
|
73
66
|
this.canvas = this.canvasRef().nativeElement;
|
|
@@ -77,13 +70,11 @@ class SunSliderCaptcha {
|
|
|
77
70
|
this.canvas.height = withDpr(this.height());
|
|
78
71
|
this.ctx = this.canvas.getContext('2d');
|
|
79
72
|
this.ctx.scale(dpr, dpr);
|
|
80
|
-
|
|
81
|
-
this.refresh();
|
|
82
|
-
});
|
|
73
|
+
this.refresh();
|
|
83
74
|
});
|
|
84
75
|
}
|
|
85
76
|
refresh() {
|
|
86
|
-
this.
|
|
77
|
+
this.offsetX.set(0);
|
|
87
78
|
this.alert.visible.set(false);
|
|
88
79
|
this.bar.background.set('var(--indicator-primary-color)');
|
|
89
80
|
this.loading.set(true);
|
|
@@ -106,12 +97,11 @@ class SunSliderCaptcha {
|
|
|
106
97
|
});
|
|
107
98
|
}
|
|
108
99
|
draw(x = 0) {
|
|
109
|
-
this.x = x;
|
|
110
100
|
const width = this.width();
|
|
111
101
|
const height = this.height();
|
|
112
102
|
this.ctx.clearRect(0, 0, width, height);
|
|
113
103
|
this.ctx.drawImage(this.bgImage, 0, 0, width, height);
|
|
114
|
-
this.ctx.drawImage(this.slideImage,
|
|
104
|
+
this.ctx.drawImage(this.slideImage, x, 0, this.quotient().width * PUZZLE_WIDTH, this.quotient().height * PUZZLE_HEIGHT);
|
|
115
105
|
this.loading.set(false);
|
|
116
106
|
}
|
|
117
107
|
slide(x) {
|
|
@@ -120,7 +110,7 @@ class SunSliderCaptcha {
|
|
|
120
110
|
verify(x) {
|
|
121
111
|
this.verifying.set(true);
|
|
122
112
|
// 计算出原始移动距离
|
|
123
|
-
x = x / this.quotient.width;
|
|
113
|
+
x = x / this.quotient().width;
|
|
124
114
|
this.endTime = Date.now();
|
|
125
115
|
const json = JSON.stringify({ x: x, y: 5.0 });
|
|
126
116
|
const pointJson = this.secrets.secretKey ? aesEncrypt(json, this.secrets.secretKey) : json;
|
|
@@ -152,7 +142,7 @@ class SunSliderCaptcha {
|
|
|
152
142
|
else {
|
|
153
143
|
const seconds = Math.abs(this.endTime - this.beginTime) / 1000;
|
|
154
144
|
this.alert.type.set('success');
|
|
155
|
-
this.alert.content.set(
|
|
145
|
+
this.alert.content.set(`验证成功，耗时 ${seconds} 秒`);
|
|
156
146
|
this.alert.visible.set(true);
|
|
157
147
|
this.bar.background.set('var(--indicator-primary-color)');
|
|
158
148
|
const temp = response.data.token + '---' + json;
|
|
@@ -171,38 +161,33 @@ class SunSliderCaptcha {
|
|
|
171
161
|
complete: () => this.verifying.set(false)
|
|
172
162
|
});
|
|
173
163
|
}
|
|
174
|
-
|
|
164
|
+
onPorinterStart(event) {
|
|
175
165
|
if (!this.loading() && !this.verifying()) {
|
|
176
166
|
event.stopPropagation();
|
|
167
|
+
event.preventDefault();
|
|
177
168
|
this.dragStartX = event.clientX;
|
|
178
|
-
this.scrollLeft = this.sliderRef().nativeElement.scrollLeft;
|
|
179
169
|
}
|
|
180
170
|
}
|
|
181
|
-
|
|
171
|
+
onPointerEnd(event) {
|
|
182
172
|
event.stopPropagation();
|
|
173
|
+
event.preventDefault();
|
|
183
174
|
if (this.dragStartX > -1) {
|
|
184
|
-
this.verify(this.
|
|
175
|
+
this.verify(this.offsetX());
|
|
185
176
|
}
|
|
186
177
|
this.dragStartX = -1;
|
|
187
178
|
}
|
|
188
|
-
|
|
179
|
+
onPointerMove(event) {
|
|
189
180
|
event.stopPropagation();
|
|
181
|
+
event.preventDefault();
|
|
190
182
|
if (this.dragStartX > -1) { // 如果在拖动了
|
|
191
183
|
const currentX = event.clientX; // 得到当前的X
|
|
192
184
|
const offset = currentX - this.dragStartX; // 得到拖动的距离
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
left = this.bar.handlerWidth;
|
|
196
|
-
}
|
|
197
|
-
else if (left >= this.width()) {
|
|
198
|
-
left = this.width();
|
|
199
|
-
}
|
|
200
|
-
this.sliderRef().nativeElement.scrollLeft = left;
|
|
201
|
-
this.slide(this.width() - left);
|
|
185
|
+
this.offsetX.set(Math.min(Math.max(0, offset), this.width() - 42));
|
|
186
|
+
this.slide(this.offsetX());
|
|
202
187
|
}
|
|
203
188
|
}
|
|
204
189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SunSliderCaptcha, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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": "
|
|
190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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": "onPointerEnd($event)", "window:pointercancel": "onPointerEnd($event)", "window:pointermove": "onPointerMove($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 }], 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 class=\"sun-slider-captcha-track\" [style]=\"{ background: bar.background() }\">\n <div class=\"sun-slider-captcha-trough\" [style.transform]=\"'translateX(' + offsetX() + 'px)'\">\n <span class=\"sun-slider-captcha-tip\">\u62D6\u52A8\u6ED1\u5757\u4EE5\u5B8C\u6210\u62FC\u56FE\u9A8C\u8BC1</span>\n <div class=\"sun-slider-captcha-handler\" (pointerdown)=\"onPorinterStart($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", 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-size: 42px;--handler-color: #94a3b8;--handler-border-color: #e2e8f0;display:inline-block;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.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:var(--handler-size);line-height:var(--handler-size);overflow:scroll hidden;white-space:nowrap;scrollbar-width:none}.sun-slider-captcha-bar::-webkit-scrollbar{display:none}.sun-slider-captcha-track{height:var(--handler-size)}.sun-slider-captcha-trough{position:relative;display:flex;justify-content:center;align-items:center;font-size:14px;text-align:center;background:var(--background);height:100%}.sun-slider-captcha-handler{position:absolute;top:0;left:0;cursor:grab;height:var(--handler-size);width:var(--handler-size);display:flex;justify-content:center;align-items:center;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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
206
191
|
}
|
|
207
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SunSliderCaptcha, decorators: [{
|
|
208
193
|
type: Component,
|
|
@@ -210,14 +195,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
210
195
|
class: 'sun-slider-captcha',
|
|
211
196
|
'[class.sun-slider-captcha-loading]': `loading()`,
|
|
212
197
|
'[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
|
|
214
|
-
}], ctorParameters: () => [{ type: i1.HttpClient }], propDecorators: {
|
|
198
|
+
}, 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 class=\"sun-slider-captcha-track\" [style]=\"{ background: bar.background() }\">\n <div class=\"sun-slider-captcha-trough\" [style.transform]=\"'translateX(' + offsetX() + 'px)'\">\n <span class=\"sun-slider-captcha-tip\">\u62D6\u52A8\u6ED1\u5757\u4EE5\u5B8C\u6210\u62FC\u56FE\u9A8C\u8BC1</span>\n <div class=\"sun-slider-captcha-handler\" (pointerdown)=\"onPorinterStart($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", 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-size: 42px;--handler-color: #94a3b8;--handler-border-color: #e2e8f0;display:inline-block;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.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:var(--handler-size);line-height:var(--handler-size);overflow:scroll hidden;white-space:nowrap;scrollbar-width:none}.sun-slider-captcha-bar::-webkit-scrollbar{display:none}.sun-slider-captcha-track{height:var(--handler-size)}.sun-slider-captcha-trough{position:relative;display:flex;justify-content:center;align-items:center;font-size:14px;text-align:center;background:var(--background);height:100%}.sun-slider-captcha-handler{position:absolute;top:0;left:0;cursor:grab;height:var(--handler-size);width:var(--handler-size);display:flex;justify-content:center;align-items:center;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)}\n"] }]
|
|
199
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }], propDecorators: { onPointerEnd: [{
|
|
215
200
|
type: HostListener,
|
|
216
201
|
args: ['window:pointerup', ['$event']]
|
|
217
202
|
}, {
|
|
218
203
|
type: HostListener,
|
|
219
204
|
args: ['window:pointercancel', ['$event']]
|
|
220
|
-
}],
|
|
205
|
+
}], onPointerMove: [{
|
|
221
206
|
type: HostListener,
|
|
222
207
|
args: ['window:pointermove', ['$event']]
|
|
223
208
|
}] } });
|
|
@@ -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, ChangeDetectionStrategy, Component, ElementRef, HostListener, input, numberAttribute, output, signal, viewChild, ViewEncapsulation } from '@angular/core';\nimport { withPixel } from '@solar-kit/core';\nimport { Captcha, CaptchaType } from '@solar-kit/planets/mercury';\nimport { Result } from '@solar-kit/planets/sun';\nimport { fromEvent, take, zip } from 'rxjs';\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(375, { transform: numberAttribute });\n readonly height = input(187.5, { 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,${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 = Date.now();\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 = Date.now();\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 const seconds = Math.abs(this.endTime - this.beginTime) / 1000;\n this.alert.type.set('success')\n this.alert.content.set(`${seconds} 秒 验证成功`)\n this.alert.visible.set(true);\n this.bar.background.set('var(--indicator-primary-color)')\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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"}
|
|
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, computed, ElementRef, HostListener, input, numberAttribute, output, signal, viewChild, ViewEncapsulation } from '@angular/core';\nimport { withPixel } from '@solar-kit/core';\nimport { Captcha, CaptchaType } from '@solar-kit/planets/mercury';\nimport { Result } from '@solar-kit/planets/sun';\nimport { fromEvent, take, zip } from 'rxjs';\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\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(375, { transform: numberAttribute });\n readonly height = input(187.5, { 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 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 readonly offsetX = signal(0);\n\n readonly bar = {\n background: signal('var(--indicator-primary-color)'), // 滑块背景色\n }\n\n /**\n * 当前尺寸 除于 原始尺寸得到的商\n * 用于等比例缩放\n */\n readonly quotient = computed(() => ({\n width: this.width() / WIDTH,\n height: this.height() / HEIGHT\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 this.refresh();\n })\n }\n\n refresh() {\n this.offsetX.set(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,${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 = Date.now();\n this.draw();\n });\n } else {\n console.error(response.msg);\n }\n });\n }\n\n private draw(x = 0) {\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, 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 = Date.now();\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 const seconds = Math.abs(this.endTime - this.beginTime) / 1000;\n this.alert.type.set('success')\n this.alert.content.set(`验证成功，耗时 ${seconds} 秒`)\n this.alert.visible.set(true);\n this.bar.background.set('var(--indicator-primary-color)')\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 onPorinterStart(event: PointerEvent) {\n if (!this.loading() && !this.verifying()) {\n event.stopPropagation();\n event.preventDefault()\n this.dragStartX = event.clientX;\n }\n }\n\n @HostListener('window:pointerup', ['$event'])\n @HostListener('window:pointercancel', ['$event'])\n onPointerEnd(event: PointerEvent) {\n event.stopPropagation();\n event.preventDefault()\n if (this.dragStartX > -1) {\n this.verify(this.offsetX());\n }\n this.dragStartX = -1;\n }\n\n @HostListener('window:pointermove', ['$event'])\n onPointerMove(event: PointerEvent) {\n event.stopPropagation();\n event.preventDefault()\n if (this.dragStartX > -1) { // 如果在拖动了\n const currentX = event.clientX; // 得到当前的X\n const offset = currentX - this.dragStartX; // 得到拖动的距离\n this.offsetX.set(Math.min(Math.max(0, offset), this.width() - 42));\n this.slide(this.offsetX());\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 class=\"sun-slider-captcha-track\" [style]=\"{ background: bar.background() }\">\n <div class=\"sun-slider-captcha-trough\" [style.transform]=\"'translateX(' + offsetX() + 'px)'\">\n <span class=\"sun-slider-captcha-tip\">拖动滑块以完成拼图验证</span>\n <div class=\"sun-slider-captcha-handler\" (pointerdown)=\"onPorinterStart($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","/**\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.
|
|
3
|
+
"version": "19.2.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@solar-angular/http": "19.
|
|
10
|
-
"@solar-angular/animations": "19.
|
|
9
|
+
"@solar-angular/http": "19.2.0",
|
|
10
|
+
"@solar-angular/animations": "19.2.0",
|
|
11
11
|
"crypto-js": "^4.2.0",
|
|
12
12
|
"tslib": "^2.3.0"
|
|
13
13
|
},
|
|
@@ -6,7 +6,6 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
export declare class SunSliderCaptcha {
|
|
7
7
|
private http;
|
|
8
8
|
readonly canvasRef: import("@angular/core").Signal<ElementRef<HTMLCanvasElement>>;
|
|
9
|
-
readonly sliderRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
|
|
10
9
|
readonly srcUrl: import("@angular/core").InputSignal<string>;
|
|
11
10
|
readonly verifyUrl: import("@angular/core").InputSignal<string>;
|
|
12
11
|
readonly verifyData: import("@angular/core").InputSignal<Record<string, any> | (() => Record<string, any>) | undefined>;
|
|
@@ -17,8 +16,6 @@ export declare class SunSliderCaptcha {
|
|
|
17
16
|
private ctx;
|
|
18
17
|
private bgImage;
|
|
19
18
|
private slideImage;
|
|
20
|
-
/** 滑块拼图的x坐标 */
|
|
21
|
-
x: number;
|
|
22
19
|
secrets: {
|
|
23
20
|
secretKey: string;
|
|
24
21
|
token: string;
|
|
@@ -34,28 +31,26 @@ export declare class SunSliderCaptcha {
|
|
|
34
31
|
endTime: number;
|
|
35
32
|
/** 滑动开始的X */
|
|
36
33
|
dragStartX: number;
|
|
37
|
-
|
|
38
|
-
scrollLeft: number;
|
|
34
|
+
readonly offsetX: import("@angular/core").WritableSignal<number>;
|
|
39
35
|
readonly bar: {
|
|
40
|
-
handlerWidth: number;
|
|
41
36
|
background: import("@angular/core").WritableSignal<string>;
|
|
42
37
|
};
|
|
43
38
|
/**
|
|
44
39
|
* 当前尺寸 除于 原始尺寸得到的商
|
|
45
40
|
* 用于等比例缩放
|
|
46
41
|
*/
|
|
47
|
-
|
|
42
|
+
readonly quotient: import("@angular/core").Signal<{
|
|
48
43
|
width: number;
|
|
49
44
|
height: number;
|
|
50
|
-
}
|
|
45
|
+
}>;
|
|
51
46
|
constructor(http: HttpClient);
|
|
52
47
|
refresh(): void;
|
|
53
48
|
private draw;
|
|
54
49
|
slide(x: number): void;
|
|
55
50
|
verify(x: number): void;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
onPorinterStart(event: PointerEvent): void;
|
|
52
|
+
onPointerEnd(event: PointerEvent): void;
|
|
53
|
+
onPointerMove(event: PointerEvent): void;
|
|
59
54
|
static ɵfac: i0.ɵɵFactoryDeclaration<SunSliderCaptcha, never>;
|
|
60
55
|
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>;
|
|
61
56
|
}
|