├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .prettierignore ├── .prettierrc ├── .vscode └── extensions.json ├── LICENSE ├── README.md ├── commitlint.config.js ├── dist ├── style.css ├── vue3-slide-verify.es.js └── vue3-slide-verify.umd.js ├── docs ├── assets │ ├── img.b6b220bc.jpg │ ├── img1.182c2f76.jpg │ ├── img2.3217378f.jpg │ ├── img3.5b97d210.jpg │ ├── img4.708137a5.jpg │ ├── img5.96696b7b.jpg │ ├── index.0443147f.js │ └── index.c96c421c.css └── index.html ├── index.d.ts ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── 669653069.jpg │ ├── iconfont.css │ ├── iconfont.ttf │ ├── img.jpg │ ├── img1.jpg │ ├── img2.jpg │ ├── img3.jpg │ ├── img4.jpg │ └── img5.jpg ├── components │ ├── hooks │ │ └── index.ts │ ├── index.ts │ ├── slide-verify.vue │ └── util.ts ├── env.d.ts └── main.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | 2 | *.sh 3 | node_modules 4 | *.md 5 | *.woff 6 | *.ttf 7 | .vscode 8 | .idea 9 | dist 10 | /public 11 | /docs 12 | .husky 13 | .local 14 | .eslintrc.js 15 | .eslintignore 16 | .prettierrc 17 | .prettierignore 18 | commitlint.config.js 19 | /bin 20 | Dockerfile 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | }, 5 | extends: ["plugin:vue/vue3-recommended", "prettier", "plugin:prettier/recommended"], 6 | parserOptions: { 7 | ecmaVersion: 13, 8 | parser: "@typescript-eslint/parser", 9 | sourceType: "module", 10 | }, 11 | plugins: ["vue", "@typescript-eslint"], 12 | rules: { 13 | "vue/no-setup-props-destructure" : "off" 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.local 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged --allow-empty "$1" 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /dist/* 2 | .local 3 | .output.js 4 | /node_modules/** 5 | 6 | **/*.svg 7 | **/*.sh 8 | 9 | /public/* 10 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 2, 4 | "printWidth": 120, 5 | "singleQuote": false, 6 | "bracketSpacing": true, 7 | "trailingComma": "all", 8 | "semi": true, 9 | "arrowParens": "always" 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 YUQIAN 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue3-slide-verify 2 | 3 | > A Vue3 plugin to slide verify [Demo](https://monoplasty.github.io/vue3-slide-verify/) 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | ## Quick Start 18 | 19 | ### 1. Import vue3-slide-verify into your vue3 project. 20 | 21 | Using build tools: 22 | 23 | ```bash 24 | npm install --save vue3-slide-verify 25 | ``` 26 | 27 | ### 国内镜像地址 [gitee镜像地址](https://gitee.com/monoplasty/vue3-slide-verify) 28 | 29 | ### 学习交流 30 | 31 | 最近发现有的朋友给我发私信，但我没来的及回复，有兴趣的朋友可以加入社群交流学习：[669653069](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=GiifeVV_d3tA9sENmnilLUIIpr9JjQZ2&authKey=aQltsCgUSq0%2F5Yw8NpF%2B2Iz52DPpYFH2hJmH4I%2Fle1S%2FgnGl68QMiV6NGpxkXrcY&noverify=0&group_code=669653069) 32 | 33 | 官方社区 34 | 35 | ### argument 36 | 37 | | Param | Type | Describe | Version | 38 | | :------: | :------: | :------: | :-----: | 39 | | l | Number | block length | | 40 | | r | Number | block circle radius | | 41 | | w | Number | canvas width | | 42 | | h | Number | canvas height | | 43 | | sliderText | String | Slide filled right | | 44 | | imgs | Array | picture array 背景图数组，默认值 [] | | 45 | | accuracy | Number | 滑动验证的误差范围，默认值 5 | | 46 | | show | Boolean | 是否显示刷新按钮，默认值 true | | 47 | | interval | Number | 节流函数的时间间隔，默认值 50 | 1.1.2 | 48 | 49 | ### callBack 50 | 51 | | Event | Type | Describe | Version | 52 | | :------: | :------: | :------: | :-----: | 53 | | success | Function | success callback | 返回时间参数，单位为毫秒 | 54 | | fail | Function | fail callback | | 55 | | refresh | Function | 点击刷新按钮后的回调函数 | | 56 | | again | Function | 检测到非人为操作滑动时触发的回调函数 | | 57 | 58 | ### 更新记录 59 | ### V1.1.6 60 | - 修复图片链接失效问题，增加文档联系方式。 61 | 62 | ### V1.1.5 63 | - 修复在新版vue项目中，ts类型文件找不到的问题。 64 | 65 | ### V1.1.2 66 | - 针对滑动事件增加节流操作。 67 | - 提高性能。 68 | 69 | ### 实例API 70 | - 在父组件里如果需要重置，可以在父组件中调用子组件refresh() 方法 71 | ```html 72 | 73 | ``` 74 | ```javascript 75 | setup() { 76 | const block = ref(null); 77 | // 元素挂载之后才能访问ref 78 | onMounted(() => { 79 | block.value.refresh(); 80 | }) 81 | return { 82 | block, 83 | } 84 | } 85 | ``` 86 | 87 | ### description 88 | - `accuracy` 精度设置 89 | > 判断滑块与凹槽位置的误差范围值，默认取值范围为 [1, 10]。若取值不为 -1，则会开启检测非人为操作。人为操作也有可能会触发哦！ 90 | > 91 | > 判断依据是：滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。 92 | > 93 | > 若`accuracy`为 -1，则表示关闭检测非人为操作，默认开启。开启之后，若检测到为非人为操作，则会触发 `again` 回调函数 94 | 95 | - props 中 `imgs`设置： 96 | - 当`imgs`不传或者传空数组时，图片库默认使用第三方api提供的图片路径。可能加载缓慢； 97 | - 当`imgs`传本地路径时，确保图片路径是否正确。建设传oss上的图片地址。 98 | - 详情可参考`APP.vue`上的写法。或[在线查看demo地址](https://monoplasty.github.io/vue3-slide-verify/) 99 | 100 | ### example 101 | 参考如下写法 102 | ```vue 103 | 118 | 119 | 171 | ``` 172 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@commitlint/config-conventional"], 3 | rules: { 4 | "type-enum": [2, "always", ["upd", "feat", "fix", "refactor", "docs", "chore", "style", "revert"]], 5 | "type-case": [0], 6 | "type-empty": [0], 7 | "scope-empty": [0], 8 | "scope-case": [0], 9 | "subject-full-stop": [0, "never"], 10 | "subject-case": [0, "never"], 11 | "header-max-length": [0, "always", 72], 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /dist/style.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:iconfont;src:url(data:font/ttf;base64,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) format("truetype")}.iconfont[data-v-3f647794]{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-fail[data-v-3f647794]:before{content:"\e6d5"}.icon-success[data-v-3f647794]:before{content:"\eb09"}.icon-arrow-right[data-v-3f647794]:before{content:"\eb08"}.icon-refresh[data-v-3f647794]:before{content:"\e654"}.slide-verify[data-v-3f647794]{position:relative}.slide-verify-loading[data-v-3f647794]{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(255,255,255,.9);z-index:999;animation:loading-3f647794 1.5s infinite}.slide-verify-block[data-v-3f647794]{position:absolute;left:0;top:0}.slide-verify-refresh-icon[data-v-3f647794]{position:absolute;right:0;top:0;width:34px;height:34px;cursor:pointer}.slide-verify-refresh-icon .iconfont[data-v-3f647794]{font-size:34px;color:#fff}.slide-verify-slider[data-v-3f647794]{position:relative;text-align:center;width:100%;height:40px;line-height:40px;margin-top:15px;background:#f7f9fa;color:#45494c;border:1px solid #e4e7eb}.slide-verify-slider-mask[data-v-3f647794]{position:absolute;left:0;top:0;height:40px;border:0 solid #1991fa;background:#d1e9fe}.slide-verify-slider-mask-item[data-v-3f647794]{position:absolute;left:0;top:0;width:40px;height:40px;background:#fff;box-shadow:0 0 3px #0000004d;cursor:pointer;transition:background .2s linear;display:flex;align-items:center;justify-content:center}.slide-verify-slider-mask-item[data-v-3f647794]:hover{background:#1991fa}.slide-verify-slider-mask-item:hover .iconfont[data-v-3f647794]{color:#fff}.slide-verify-slider-mask-item-icon[data-v-3f647794]{line-height:1;font-size:30px;color:#303030}.container-active .slide-verify-slider-mask[data-v-3f647794]{height:38px;border-width:1px}.container-active .slide-verify-slider-mask-item[data-v-3f647794]{height:38px;top:-1px;border:1px solid #1991fa}.container-success .slide-verify-slider-mask[data-v-3f647794]{height:38px;border:1px solid #52ccba;background-color:#d2f4ef}.container-success .slide-verify-slider-mask-item[data-v-3f647794]{height:38px;top:-1px;border:1px solid #52ccba;background-color:#52ccba!important}.container-success .slide-verify-slider-mask .iconfont[data-v-3f647794]{color:#fff}.container-fail .slide-verify-slider-mask[data-v-3f647794]{height:38px;border:1px solid #f57a7a;background-color:#fce1e1}.container-fail .slide-verify-slider-mask-item[data-v-3f647794]{height:38px;top:-1px;border:1px solid #f57a7a;background-color:#f57a7a!important}.container-fail .slide-verify-slider-mask .iconfont[data-v-3f647794]{color:#fff}.container-active .slide-verify-slider-text[data-v-3f647794],.container-success .slide-verify-slider-text[data-v-3f647794],.container-fail .slide-verify-slider-text[data-v-3f647794]{display:none}@keyframes loading-3f647794{0%{opacity:.7}to{opacity:9}} 2 | -------------------------------------------------------------------------------- /dist/vue3-slide-verify.es.js: -------------------------------------------------------------------------------- 1 | import { reactive, ref, defineComponent, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, createCommentVNode, toDisplayString } from "vue"; 2 | const PI = Math.PI; 3 | function sum(x, y) { 4 | return x + y; 5 | } 6 | function square(x) { 7 | return x * x; 8 | } 9 | function draw(ctx, x, y, l, r, operation) { 10 | ctx.beginPath(); 11 | ctx.moveTo(x, y); 12 | ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI); 13 | ctx.lineTo(x + l, y); 14 | ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI); 15 | ctx.lineTo(x + l, y + l); 16 | ctx.lineTo(x, y + l); 17 | ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true); 18 | ctx.lineTo(x, y); 19 | ctx.lineWidth = 2; 20 | ctx.fillStyle = "rgba(255, 255, 255, 0.7)"; 21 | ctx.strokeStyle = "rgba(255, 255, 255, 0.7)"; 22 | ctx.stroke(); 23 | ctx[operation](); 24 | ctx.globalCompositeOperation = "destination-over"; 25 | } 26 | function createImg(imgs, onload) { 27 | const img = document.createElement("img"); 28 | img.crossOrigin = "Anonymous"; 29 | img.onload = onload; 30 | img.onerror = () => { 31 | img.src = getRandomImg(imgs); 32 | }; 33 | img.src = getRandomImg(imgs); 34 | return img; 35 | } 36 | function getRandomNumberByRange(start, end) { 37 | return Math.round(Math.random() * (end - start) + start); 38 | } 39 | function getRandomImg(imgs) { 40 | const len = imgs.length; 41 | return len > 0 ? imgs[getRandomNumberByRange(0, len - 1)] : "https://picsum.photos/300/150?image=" + getRandomNumberByRange(0, 1084); 42 | } 43 | function throttle(fn, interval, options = { leading: true, trailing: true }) { 44 | const { leading, trailing, resultCallback } = options; 45 | let lastTime = 0; 46 | let timer = null; 47 | const _throttle = function(...args) { 48 | return new Promise((resolve, reject) => { 49 | const nowTime = new Date().getTime(); 50 | if (!lastTime && !leading) 51 | lastTime = nowTime; 52 | const remainTime = interval - (nowTime - lastTime); 53 | if (remainTime <= 0) { 54 | if (timer) { 55 | clearTimeout(timer); 56 | timer = null; 57 | } 58 | const result = fn.apply(this, args); 59 | if (resultCallback) 60 | resultCallback(result); 61 | resolve(result); 62 | lastTime = nowTime; 63 | return; 64 | } 65 | if (trailing && !timer) { 66 | timer = setTimeout(() => { 67 | timer = null; 68 | lastTime = !leading ? 0 : new Date().getTime(); 69 | const result = fn.apply(this, args); 70 | if (resultCallback) 71 | resultCallback(result); 72 | resolve(result); 73 | }, remainTime); 74 | } 75 | }); 76 | }; 77 | _throttle.cancel = function() { 78 | if (timer) 79 | clearTimeout(timer); 80 | timer = null; 81 | lastTime = 0; 82 | }; 83 | return _throttle; 84 | } 85 | function useSlideAction() { 86 | const origin = reactive({ 87 | x: 0, 88 | y: 0 89 | }); 90 | const success = ref(false); 91 | const isMouseDown = ref(false); 92 | const timestamp = ref(0); 93 | const trail = ref([]); 94 | const start = (e) => { 95 | if (success.value) 96 | return; 97 | if (e instanceof MouseEvent) { 98 | origin.x = e.clientX; 99 | origin.y = e.clientY; 100 | } else { 101 | origin.x = e.changedTouches[0].pageX; 102 | origin.y = e.changedTouches[0].pageY; 103 | } 104 | isMouseDown.value = true; 105 | timestamp.value = Date.now(); 106 | }; 107 | const move = (w, e, cb) => { 108 | if (!isMouseDown.value) 109 | return false; 110 | let moveX = 0; 111 | let moveY = 0; 112 | if (e instanceof MouseEvent) { 113 | moveX = e.clientX - origin.x; 114 | moveY = e.clientY - origin.y; 115 | } else { 116 | moveX = e.changedTouches[0].pageX - origin.x; 117 | moveY = e.changedTouches[0].pageY - origin.y; 118 | } 119 | if (moveX < 0 || moveX + 38 >= w) 120 | return false; 121 | cb(moveX); 122 | trail.value.push(moveY); 123 | }; 124 | const verify = (left, blockX, accuracy) => { 125 | const arr = trail.value; 126 | const average = arr.reduce(sum) / arr.length; 127 | const deviations = arr.map((x) => x - average); 128 | const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); 129 | const leftNum = parseInt(left); 130 | accuracy = accuracy <= 1 ? 1 : accuracy > 10 ? 10 : accuracy; 131 | return { 132 | spliced: Math.abs(leftNum - blockX) <= accuracy, 133 | TuringTest: average !== stddev 134 | }; 135 | }; 136 | const end = (e, cb) => { 137 | if (!isMouseDown.value) 138 | return false; 139 | isMouseDown.value = false; 140 | const moveX = e instanceof MouseEvent ? e.clientX : e.changedTouches[0].pageX; 141 | if (moveX === origin.x) 142 | return false; 143 | timestamp.value = Date.now() - timestamp.value; 144 | cb(timestamp.value); 145 | }; 146 | return { origin, success, isMouseDown, timestamp, trail, start, move, end, verify }; 147 | } 148 | var slideVerify_vue_vue_type_style_index_0_scoped_true_lang = ""; 149 | var _export_sfc = (sfc, props) => { 150 | const target = sfc.__vccOpts || sfc; 151 | for (const [key, val] of props) { 152 | target[key] = val; 153 | } 154 | return target; 155 | }; 156 | const _sfc_main = defineComponent({ 157 | name: "SlideVerify", 158 | props: { 159 | l: { 160 | type: Number, 161 | default: 42 162 | }, 163 | r: { 164 | type: Number, 165 | default: 10 166 | }, 167 | w: { 168 | type: Number, 169 | default: 310 170 | }, 171 | h: { 172 | type: Number, 173 | default: 155 174 | }, 175 | sliderText: { 176 | type: String, 177 | default: "Slide filled right" 178 | }, 179 | accuracy: { 180 | type: Number, 181 | default: 5 182 | }, 183 | show: { 184 | type: Boolean, 185 | default: true 186 | }, 187 | imgs: { 188 | type: Array, 189 | default: () => [] 190 | }, 191 | interval: { 192 | type: Number, 193 | default: 50 194 | } 195 | }, 196 | emits: ["success", "again", "fail", "refresh"], 197 | setup(props, { emit }) { 198 | const { imgs, l, r, w, h, accuracy, interval } = props; 199 | const loadBlock = ref(true); 200 | const blockX = ref(0); 201 | const blockY = ref(0); 202 | const containerCls = reactive({ 203 | containerActive: false, 204 | containerSuccess: false, 205 | containerFail: false 206 | }); 207 | const sliderBox = reactive({ 208 | iconCls: "arrow-right", 209 | width: "0", 210 | left: "0" 211 | }); 212 | const block = ref(); 213 | const blockCtx = ref(); 214 | const canvas = ref(); 215 | const canvasCtx = ref(); 216 | let img; 217 | const { success, start, move, end, verify } = useSlideAction(); 218 | const reset = () => { 219 | var _a, _b; 220 | success.value = false; 221 | containerCls.containerActive = false; 222 | containerCls.containerSuccess = false; 223 | containerCls.containerFail = false; 224 | sliderBox.iconCls = "arrow-right"; 225 | sliderBox.left = "0"; 226 | sliderBox.width = "0"; 227 | block.value.style.left = "0"; 228 | (_a = canvasCtx.value) == null ? void 0 : _a.clearRect(0, 0, w, h); 229 | (_b = blockCtx.value) == null ? void 0 : _b.clearRect(0, 0, w, h); 230 | block.value.width = w; 231 | img.src = getRandomImg(imgs); 232 | }; 233 | const refresh = () => { 234 | reset(); 235 | emit("refresh"); 236 | }; 237 | function moveCb(moveX) { 238 | sliderBox.left = moveX + "px"; 239 | let blockLeft = (w - 40 - 20) / (w - 40) * moveX; 240 | block.value.style.left = blockLeft + "px"; 241 | containerCls.containerActive = true; 242 | sliderBox.width = moveX + "px"; 243 | } 244 | function endCb(timestamp) { 245 | const { spliced, TuringTest } = verify(block.value.style.left, blockX.value, accuracy); 246 | if (spliced) { 247 | if (accuracy === -1) { 248 | containerCls.containerSuccess = true; 249 | sliderBox.iconCls = "success"; 250 | success.value = true; 251 | emit("success", timestamp); 252 | return; 253 | } 254 | if (TuringTest) { 255 | containerCls.containerSuccess = true; 256 | sliderBox.iconCls = "success"; 257 | success.value = true; 258 | emit("success", timestamp); 259 | } else { 260 | containerCls.containerFail = true; 261 | sliderBox.iconCls = "fail"; 262 | emit("again"); 263 | } 264 | } else { 265 | containerCls.containerFail = true; 266 | sliderBox.iconCls = "fail"; 267 | emit("fail"); 268 | setTimeout(() => { 269 | reset(); 270 | }, 1e3); 271 | } 272 | } 273 | const touchMoveEvent = throttle((e) => { 274 | move(w, e, moveCb); 275 | }, interval); 276 | const touchEndEvent = (e) => { 277 | end(e, endCb); 278 | }; 279 | onMounted(() => { 280 | var _a, _b; 281 | const _canvasCtx = (_a = canvas.value) == null ? void 0 : _a.getContext("2d"); 282 | const _blockCtx = (_b = block.value) == null ? void 0 : _b.getContext("2d", { willReadFrequently: true }); 283 | canvasCtx.value = _canvasCtx; 284 | blockCtx.value = _blockCtx; 285 | img = createImg(imgs, () => { 286 | loadBlock.value = false; 287 | const L = l + r * 2 + 3; 288 | blockX.value = getRandomNumberByRange(L + 10, w - (L + 10)); 289 | blockY.value = getRandomNumberByRange(10 + r * 2, h - (L + 10)); 290 | if (_canvasCtx && _blockCtx) { 291 | draw(_canvasCtx, blockX.value, blockY.value, l, r, "fill"); 292 | draw(_blockCtx, blockX.value, blockY.value, l, r, "clip"); 293 | _canvasCtx.drawImage(img, 0, 0, w, h); 294 | _blockCtx.drawImage(img, 0, 0, w, h); 295 | const _y = blockY.value - r * 2 - 1; 296 | const imgData = _blockCtx.getImageData(blockX.value, _y, L, L); 297 | block.value.width = L; 298 | _blockCtx.putImageData(imgData, 0, _y); 299 | } 300 | }); 301 | document.addEventListener("mousemove", touchMoveEvent); 302 | document.addEventListener("mouseup", touchEndEvent); 303 | }); 304 | onBeforeUnmount(() => { 305 | document.removeEventListener("mousemove", touchMoveEvent); 306 | document.removeEventListener("mouseup", touchEndEvent); 307 | }); 308 | return { 309 | block, 310 | canvas, 311 | loadBlock, 312 | containerCls, 313 | sliderBox, 314 | refresh, 315 | sliderDown: start, 316 | touchStartEvent: start, 317 | touchMoveEvent, 318 | touchEndEvent 319 | }; 320 | } 321 | }); 322 | const _hoisted_1 = ["width", "height"]; 323 | const _hoisted_2 = ["width", "height"]; 324 | const _hoisted_3 = { class: "slide-verify-slider-text" }; 325 | function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { 326 | return openBlock(), createElementBlock("div", { 327 | id: "slideVerify", 328 | class: "slide-verify", 329 | style: normalizeStyle({ width: _ctx.w + "px" }), 330 | onselectstart: "return false;" 331 | }, [ 332 | createElementVNode("div", { 333 | class: normalizeClass({ "slider-verify-loading": _ctx.loadBlock }) 334 | }, null, 2), 335 | createElementVNode("canvas", { 336 | ref: "canvas", 337 | width: _ctx.w, 338 | height: _ctx.h 339 | }, null, 8, _hoisted_1), 340 | _ctx.show ? (openBlock(), createElementBlock("div", { 341 | key: 0, 342 | class: "slide-verify-refresh-icon", 343 | onClick: _cache[0] || (_cache[0] = (...args) => _ctx.refresh && _ctx.refresh(...args)) 344 | }, _cache[5] || (_cache[5] = [ 345 | createElementVNode("i", { class: "iconfont icon-refresh" }, null, -1) 346 | ]))) : createCommentVNode("", true), 347 | createElementVNode("canvas", { 348 | ref: "block", 349 | width: _ctx.w, 350 | height: _ctx.h, 351 | class: "slide-verify-block" 352 | }, null, 8, _hoisted_2), 353 | createElementVNode("div", { 354 | class: normalizeClass(["slide-verify-slider", { 355 | "container-active": _ctx.containerCls.containerActive, 356 | "container-success": _ctx.containerCls.containerSuccess, 357 | "container-fail": _ctx.containerCls.containerFail 358 | }]) 359 | }, [ 360 | createElementVNode("div", { 361 | class: "slide-verify-slider-mask", 362 | style: normalizeStyle({ width: _ctx.sliderBox.width }) 363 | }, [ 364 | createElementVNode("div", { 365 | class: "slide-verify-slider-mask-item", 366 | style: normalizeStyle({ left: _ctx.sliderBox.left }), 367 | onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.sliderDown && _ctx.sliderDown(...args)), 368 | onTouchstart: _cache[2] || (_cache[2] = (...args) => _ctx.touchStartEvent && _ctx.touchStartEvent(...args)), 369 | onTouchmove: _cache[3] || (_cache[3] = (...args) => _ctx.touchMoveEvent && _ctx.touchMoveEvent(...args)), 370 | onTouchend: _cache[4] || (_cache[4] = (...args) => _ctx.touchEndEvent && _ctx.touchEndEvent(...args)) 371 | }, [ 372 | createElementVNode("i", { 373 | class: normalizeClass(["slide-verify-slider-mask-item-icon", "iconfont", `icon-${_ctx.sliderBox.iconCls}`]) 374 | }, null, 2) 375 | ], 36) 376 | ], 4), 377 | createElementVNode("span", _hoisted_3, toDisplayString(_ctx.sliderText), 1) 378 | ], 2) 379 | ], 4); 380 | } 381 | var SlideVerify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3f647794"]]); 382 | export { SlideVerify as default }; 383 | -------------------------------------------------------------------------------- /dist/vue3-slide-verify.umd.js: -------------------------------------------------------------------------------- 1 | (function(t,g){typeof exports=="object"&&typeof module!="undefined"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(t=typeof globalThis!="undefined"?globalThis:t||self,t.vue3SlideVerify=g(t.Vue))})(this,function(t){"use strict";const g=Math.PI;function D(e,n){return e+n}function L(e){return e*e}function I(e,n,s,o,r,u){e.beginPath(),e.moveTo(n,s),e.arc(n+o/2,s-r+2,r,.72*g,2.26*g),e.lineTo(n+o,s),e.arc(n+o+r-2,s+o/2,r,1.21*g,2.78*g),e.lineTo(n+o,s+o),e.lineTo(n,s+o),e.arc(n+r-2,s+o/2,r+.4,2.76*g,1.24*g,!0),e.lineTo(n,s),e.lineWidth=2,e.fillStyle="rgba(255, 255, 255, 0.7)",e.strokeStyle="rgba(255, 255, 255, 0.7)",e.stroke(),e[u](),e.globalCompositeOperation="destination-over"}function R(e,n){const s=document.createElement("img");return s.crossOrigin="Anonymous",s.onload=n,s.onerror=()=>{s.src=N(e)},s.src=N(e),s}function E(e,n){return Math.round(Math.random()*(n-e)+e)}function N(e){const n=e.length;return n>0?e[E(0,n-1)]:"https://picsum.photos/300/150?image="+E(0,1084)}function Y(e,n,s={leading:!0,trailing:!0}){const{leading:o,trailing:r,resultCallback:u}=s;let i=0,h=null;const w=function(...c){return new Promise((d,v)=>{const l=new Date().getTime();!i&&!o&&(i=l);const a=n-(l-i);if(a<=0){h&&(clearTimeout(h),h=null);const m=e.apply(this,c);u&&u(m),d(m),i=l;return}r&&!h&&(h=setTimeout(()=>{h=null,i=o?new Date().getTime():0;const m=e.apply(this,c);u&&u(m),d(m)},a))})};return w.cancel=function(){h&&clearTimeout(h),h=null,i=0},w}function $(){const e=t.reactive({x:0,y:0}),n=t.ref(!1),s=t.ref(!1),o=t.ref(0),r=t.ref([]);return{origin:e,success:n,isMouseDown:s,timestamp:o,trail:r,start:c=>{n.value||(c instanceof MouseEvent?(e.x=c.clientX,e.y=c.clientY):(e.x=c.changedTouches[0].pageX,e.y=c.changedTouches[0].pageY),s.value=!0,o.value=Date.now())},move:(c,d,v)=>{if(!s.value)return!1;let l=0,a=0;if(d instanceof MouseEvent?(l=d.clientX-e.x,a=d.clientY-e.y):(l=d.changedTouches[0].pageX-e.x,a=d.changedTouches[0].pageY-e.y),l<0||l+38>=c)return!1;v(l),r.value.push(a)},end:(c,d)=>{if(!s.value||(s.value=!1,(c instanceof MouseEvent?c.clientX:c.changedTouches[0].pageX)===e.x))return!1;o.value=Date.now()-o.value,d(o.value)},verify:(c,d,v)=>{const l=r.value,a=l.reduce(D)/l.length,m=l.map(b=>b-a),T=Math.sqrt(m.map(L).reduce(D)/l.length),C=parseInt(c);return v=v<=1?1:v>10?10:v,{spliced:Math.abs(C-d)<=v,TuringTest:a!==T}}}}var ee="",q=(e,n)=>{const s=e.__vccOpts||e;for(const[o,r]of n)s[o]=r;return s};const P=t.defineComponent({name:"SlideVerify",props:{l:{type:Number,default:42},r:{type:Number,default:10},w:{type:Number,default:310},h:{type:Number,default:155},sliderText:{type:String,default:"Slide filled right"},accuracy:{type:Number,default:5},show:{type:Boolean,default:!0},imgs:{type:Array,default:()=>[]},interval:{type:Number,default:50}},emits:["success","again","fail","refresh"],setup(e,{emit:n}){const{imgs:s,l:o,r,w:u,h:i,accuracy:h,interval:w}=e,c=t.ref(!0),d=t.ref(0),v=t.ref(0),l=t.reactive({containerActive:!1,containerSuccess:!1,containerFail:!1}),a=t.reactive({iconCls:"arrow-right",width:"0",left:"0"}),m=t.ref(),T=t.ref(),C=t.ref(),b=t.ref();let k;const{success:V,start:X,move:H,end:J,verify:K}=$(),A=()=>{var f,p;V.value=!1,l.containerActive=!1,l.containerSuccess=!1,l.containerFail=!1,a.iconCls="arrow-right",a.left="0",a.width="0",m.value.style.left="0",(f=b.value)==null||f.clearRect(0,0,u,i),(p=T.value)==null||p.clearRect(0,0,u,i),m.value.width=u,k.src=N(s)},Q=()=>{A(),n("refresh")};function Z(f){a.left=f+"px";let p=(u-40-20)/(u-40)*f;m.value.style.left=p+"px",l.containerActive=!0,a.width=f+"px"}function _(f){const{spliced:p,TuringTest:S}=K(m.value.style.left,d.value,h);if(p){if(h===-1){l.containerSuccess=!0,a.iconCls="success",V.value=!0,n("success",f);return}S?(l.containerSuccess=!0,a.iconCls="success",V.value=!0,n("success",f)):(l.containerFail=!0,a.iconCls="fail",n("again"))}else l.containerFail=!0,a.iconCls="fail",n("fail"),setTimeout(()=>{A()},1e3)}const M=Y(f=>{H(u,f,Z)},w),B=f=>{J(f,_)};return t.onMounted(()=>{var S,z;const f=(S=C.value)==null?void 0:S.getContext("2d"),p=(z=m.value)==null?void 0:z.getContext("2d",{willReadFrequently:!0});b.value=f,T.value=p,k=R(s,()=>{c.value=!1;const y=o+r*2+3;if(d.value=E(y+10,u-(y+10)),v.value=E(10+r*2,i-(y+10)),f&&p){I(f,d.value,v.value,o,r,"fill"),I(p,d.value,v.value,o,r,"clip"),f.drawImage(k,0,0,u,i),p.drawImage(k,0,0,u,i);const F=v.value-r*2-1,x=p.getImageData(d.value,F,y,y);m.value.width=y,p.putImageData(x,0,F)}}),document.addEventListener("mousemove",M),document.addEventListener("mouseup",B)}),t.onBeforeUnmount(()=>{document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",B)}),{block:m,canvas:C,loadBlock:c,containerCls:l,sliderBox:a,refresh:Q,sliderDown:X,touchStartEvent:X,touchMoveEvent:M,touchEndEvent:B}}}),O=["width","height"],j=["width","height"],U={class:"slide-verify-slider-text"};function W(e,n,s,o,r,u){return t.openBlock(),t.createElementBlock("div",{id:"slideVerify",class:"slide-verify",style:t.normalizeStyle({width:e.w+"px"}),onselectstart:"return false;"},[t.createElementVNode("div",{class:t.normalizeClass({"slider-verify-loading":e.loadBlock})},null,2),t.createElementVNode("canvas",{ref:"canvas",width:e.w,height:e.h},null,8,O),e.show?(t.openBlock(),t.createElementBlock("div",{key:0,class:"slide-verify-refresh-icon",onClick:n[0]||(n[0]=(...i)=>e.refresh&&e.refresh(...i))},n[5]||(n[5]=[t.createElementVNode("i",{class:"iconfont icon-refresh"},null,-1)]))):t.createCommentVNode("",!0),t.createElementVNode("canvas",{ref:"block",width:e.w,height:e.h,class:"slide-verify-block"},null,8,j),t.createElementVNode("div",{class:t.normalizeClass(["slide-verify-slider",{"container-active":e.containerCls.containerActive,"container-success":e.containerCls.containerSuccess,"container-fail":e.containerCls.containerFail}])},[t.createElementVNode("div",{class:"slide-verify-slider-mask",style:t.normalizeStyle({width:e.sliderBox.width})},[t.createElementVNode("div",{class:"slide-verify-slider-mask-item",style:t.normalizeStyle({left:e.sliderBox.left}),onMousedown:n[1]||(n[1]=(...i)=>e.sliderDown&&e.sliderDown(...i)),onTouchstart:n[2]||(n[2]=(...i)=>e.touchStartEvent&&e.touchStartEvent(...i)),onTouchmove:n[3]||(n[3]=(...i)=>e.touchMoveEvent&&e.touchMoveEvent(...i)),onTouchend:n[4]||(n[4]=(...i)=>e.touchEndEvent&&e.touchEndEvent(...i))},[t.createElementVNode("i",{class:t.normalizeClass(["slide-verify-slider-mask-item-icon","iconfont",`icon-${e.sliderBox.iconCls}`])},null,2)],36)],4),t.createElementVNode("span",U,t.toDisplayString(e.sliderText),1)],2)],4)}var G=q(P,[["render",W],["__scopeId","data-v-3f647794"]]);return G}); 2 | -------------------------------------------------------------------------------- /docs/assets/img.b6b220bc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/docs/assets/img.b6b220bc.jpg -------------------------------------------------------------------------------- /docs/assets/img1.182c2f76.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/docs/assets/img1.182c2f76.jpg -------------------------------------------------------------------------------- /docs/assets/img2.3217378f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/docs/assets/img2.3217378f.jpg -------------------------------------------------------------------------------- /docs/assets/img3.5b97d210.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/docs/assets/img3.5b97d210.jpg -------------------------------------------------------------------------------- /docs/assets/img4.708137a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/docs/assets/img4.708137a5.jpg -------------------------------------------------------------------------------- /docs/assets/img5.96696b7b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/docs/assets/img5.96696b7b.jpg -------------------------------------------------------------------------------- /docs/assets/index.0443147f.js: -------------------------------------------------------------------------------- 1 | const Ur=function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))n(r);new MutationObserver(r=>{for(const i of r)if(i.type==="childList")for(const o of i.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(r){const i={};return r.integrity&&(i.integrity=r.integrity),r.referrerpolicy&&(i.referrerPolicy=r.referrerpolicy),r.crossorigin==="use-credentials"?i.credentials="include":r.crossorigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function n(r){if(r.ep)return;r.ep=!0;const i=s(r);fetch(r.href,i)}};Ur();/** 2 | * @vue/shared v3.5.13 3 | * (c) 2018-present Yuxi (Evan) You and Vue contributors 4 | * @license MIT 5 | **//*! #__NO_SIDE_EFFECTS__ */function Fs(e){const t=Object.create(null);for(const s of e.split(","))t[s]=1;return s=>s in t}const W={},lt=[],be=()=>{},Kr=()=>!1,Xt=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Ds=e=>e.startsWith("onUpdate:"),z=Object.assign,Ns=(e,t)=>{const s=e.indexOf(t);s>-1&&e.splice(s,1)},Wr=Object.prototype.hasOwnProperty,H=(e,t)=>Wr.call(e,t),P=Array.isArray,ct=e=>zt(e)==="[object Map]",Fn=e=>zt(e)==="[object Set]",M=e=>typeof e=="function",X=e=>typeof e=="string",Ke=e=>typeof e=="symbol",q=e=>e!==null&&typeof e=="object",Dn=e=>(q(e)||M(e))&&M(e.then)&&M(e.catch),Nn=Object.prototype.toString,zt=e=>Nn.call(e),Yr=e=>zt(e).slice(8,-1),$n=e=>zt(e)==="[object Object]",$s=e=>X(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,yt=Fs(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Zt=e=>{const t=Object.create(null);return s=>t[s]||(t[s]=e(s))},qr=/-(\w)/g,ge=Zt(e=>e.replace(qr,(t,s)=>s?s.toUpperCase():"")),kr=/\B([A-Z])/g,et=Zt(e=>e.replace(kr,"-$1").toLowerCase()),Qt=Zt(e=>e.charAt(0).toUpperCase()+e.slice(1)),ls=Zt(e=>e?`on${Qt(e)}`:""),Ue=(e,t)=>!Object.is(e,t),cs=(e,...t)=>{for(let s=0;s{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:n,value:s})},Gr=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let sn;const Rt=()=>sn||(sn=typeof globalThis!="undefined"?globalThis:typeof self!="undefined"?self:typeof window!="undefined"?window:typeof global!="undefined"?global:{});function ft(e){if(P(e)){const t={};for(let s=0;s{if(s){const n=s.split(Xr);n.length>1&&(t[n[0].trim()]=n[1].trim())}}),t}function ut(e){let t="";if(X(e))t=e;else if(P(e))for(let s=0;s!!(e&&e.__v_isRef===!0),Hs=e=>X(e)?e:e==null?"":P(e)||q(e)&&(e.toString===Nn||!M(e.toString))?jn(e)?Hs(e.value):JSON.stringify(e,Bn,2):String(e),Bn=(e,t)=>jn(t)?Bn(e,t.value):ct(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((s,[n,r],i)=>(s[fs(n,i)+" =>"]=r,s),{})}:Fn(t)?{[`Set(${t.size})`]:[...t.values()].map(s=>fs(s))}:Ke(t)?fs(t):q(t)&&!P(t)&&!$n(t)?String(t):t,fs=(e,t="")=>{var s;return Ke(e)?`Symbol(${(s=e.description)!=null?s:t})`:e};/** 6 | * @vue/reactivity v3.5.13 7 | * (c) 2018-present Yuxi (Evan) You and Vue contributors 8 | * @license MIT 9 | **/let ae;class ti{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=ae,!t&&ae&&(this.index=(ae.scopes||(ae.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,s;if(this.scopes)for(t=0,s=this.scopes.length;t0)return;if(wt){let t=wt;for(wt=void 0;t;){const s=t.next;t.next=void 0,t.flags&=-9,t=s}}let e;for(;xt;){let t=xt;for(xt=void 0;t;){const s=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(n){e||(e=n)}t=s}}if(e)throw e}function Wn(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function Yn(e){let t,s=e.depsTail,n=s;for(;n;){const r=n.prevDep;n.version===-1?(n===s&&(s=r),Bs(n),ni(n)):t=n,n.dep.activeLink=n.prevActiveLink,n.prevActiveLink=void 0,n=r}e.deps=t,e.depsTail=s}function ys(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(qn(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function qn(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===At))return;e.globalVersion=At;const t=e.dep;if(e.flags|=2,t.version>0&&!e.isSSR&&e.deps&&!ys(e)){e.flags&=-3;return}const s=K,n=ye;K=e,ye=!0;try{Wn(e);const r=e.fn(e._value);(t.version===0||Ue(r,e._value))&&(e._value=r,t.version++)}catch(r){throw t.version++,r}finally{K=s,ye=n,Yn(e),e.flags&=-3}}function Bs(e,t=!1){const{dep:s,prevSub:n,nextSub:r}=e;if(n&&(n.nextSub=r,e.prevSub=void 0),r&&(r.prevSub=n,e.nextSub=void 0),s.subs===e&&(s.subs=n,!n&&s.computed)){s.computed.flags&=-5;for(let i=s.computed.deps;i;i=i.nextDep)Bs(i,!0)}!t&&!--s.sc&&s.map&&s.map.delete(s.key)}function ni(e){const{prevDep:t,nextDep:s}=e;t&&(t.nextDep=s,e.prevDep=void 0),s&&(s.prevDep=t,e.nextDep=void 0)}let ye=!0;const kn=[];function We(){kn.push(ye),ye=!1}function Ye(){const e=kn.pop();ye=e===void 0?!0:e}function nn(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const s=K;K=void 0;try{t()}finally{K=s}}}let At=0;class ri{constructor(t,s){this.sub=t,this.dep=s,this.version=s.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class Vs{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0}track(t){if(!K||!ye||K===this.computed)return;let s=this.activeLink;if(s===void 0||s.sub!==K)s=this.activeLink=new ri(K,this),K.deps?(s.prevDep=K.depsTail,K.depsTail.nextDep=s,K.depsTail=s):K.deps=K.depsTail=s,Gn(s);else if(s.version===-1&&(s.version=this.version,s.nextDep)){const n=s.nextDep;n.prevDep=s.prevDep,s.prevDep&&(s.prevDep.nextDep=n),s.prevDep=K.depsTail,s.nextDep=void 0,K.depsTail.nextDep=s,K.depsTail=s,K.deps===s&&(K.deps=n)}return s}trigger(t){this.version++,At++,this.notify(t)}notify(t){Ls();try{for(let s=this.subs;s;s=s.prevSub)s.sub.notify()&&s.sub.dep.notify()}finally{js()}}}function Gn(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let n=t.deps;n;n=n.nextDep)Gn(n)}const s=e.dep.subs;s!==e&&(e.prevSub=s,s&&(s.nextSub=e)),e.dep.subs=e}}const xs=new WeakMap,ze=Symbol(""),ws=Symbol(""),Ot=Symbol("");function ee(e,t,s){if(ye&&K){let n=xs.get(e);n||xs.set(e,n=new Map);let r=n.get(s);r||(n.set(s,r=new Vs),r.map=n,r.key=s),r.track()}}function Ne(e,t,s,n,r,i){const o=xs.get(e);if(!o){At++;return}const l=u=>{u&&u.trigger()};if(Ls(),t==="clear")o.forEach(l);else{const u=P(e),d=u&&$s(s);if(u&&s==="length"){const a=Number(n);o.forEach((p,b)=>{(b==="length"||b===Ot||!Ke(b)&&b>=a)&&l(p)})}else switch((s!==void 0||o.has(void 0))&&l(o.get(s)),d&&l(o.get(Ot)),t){case"add":u?d&&l(o.get("length")):(l(o.get(ze)),ct(e)&&l(o.get(ws)));break;case"delete":u||(l(o.get(ze)),ct(e)&&l(o.get(ws)));break;case"set":ct(e)&&l(o.get(ze));break}}js()}function rt(e){const t=$(e);return t===e?t:(ee(t,"iterate",Ot),xe(e)?t:t.map(re))}function Us(e){return ee(e=$(e),"iterate",Ot),e}const ii={__proto__:null,[Symbol.iterator](){return as(this,Symbol.iterator,re)},concat(...e){return rt(this).concat(...e.map(t=>P(t)?rt(t):t))},entries(){return as(this,"entries",e=>(e[1]=re(e[1]),e))},every(e,t){return Re(this,"every",e,t,void 0,arguments)},filter(e,t){return Re(this,"filter",e,t,s=>s.map(re),arguments)},find(e,t){return Re(this,"find",e,t,re,arguments)},findIndex(e,t){return Re(this,"findIndex",e,t,void 0,arguments)},findLast(e,t){return Re(this,"findLast",e,t,re,arguments)},findLastIndex(e,t){return Re(this,"findLastIndex",e,t,void 0,arguments)},forEach(e,t){return Re(this,"forEach",e,t,void 0,arguments)},includes(...e){return ds(this,"includes",e)},indexOf(...e){return ds(this,"indexOf",e)},join(e){return rt(this).join(e)},lastIndexOf(...e){return ds(this,"lastIndexOf",e)},map(e,t){return Re(this,"map",e,t,void 0,arguments)},pop(){return _t(this,"pop")},push(...e){return _t(this,"push",e)},reduce(e,...t){return rn(this,"reduce",e,t)},reduceRight(e,...t){return rn(this,"reduceRight",e,t)},shift(){return _t(this,"shift")},some(e,t){return Re(this,"some",e,t,void 0,arguments)},splice(...e){return _t(this,"splice",e)},toReversed(){return rt(this).toReversed()},toSorted(e){return rt(this).toSorted(e)},toSpliced(...e){return rt(this).toSpliced(...e)},unshift(...e){return _t(this,"unshift",e)},values(){return as(this,"values",re)}};function as(e,t,s){const n=Us(e),r=n[t]();return n!==e&&!xe(e)&&(r._next=r.next,r.next=()=>{const i=r._next();return i.value&&(i.value=s(i.value)),i}),r}const oi=Array.prototype;function Re(e,t,s,n,r,i){const o=Us(e),l=o!==e&&!xe(e),u=o[t];if(u!==oi[t]){const p=u.apply(e,i);return l?re(p):p}let d=s;o!==e&&(l?d=function(p,b){return s.call(this,re(p),b,e)}:s.length>2&&(d=function(p,b){return s.call(this,p,b,e)}));const a=u.call(o,d,n);return l&&r?r(a):a}function rn(e,t,s,n){const r=Us(e);let i=s;return r!==e&&(xe(e)?s.length>3&&(i=function(o,l,u){return s.call(this,o,l,u,e)}):i=function(o,l,u){return s.call(this,o,re(l),u,e)}),r[t](i,...n)}function ds(e,t,s){const n=$(e);ee(n,"iterate",Ot);const r=n[t](...s);return(r===-1||r===!1)&&Ys(s[0])?(s[0]=$(s[0]),n[t](...s)):r}function _t(e,t,s=[]){We(),Ls();const n=$(e)[t].apply(e,s);return js(),Ye(),n}const li=Fs("__proto__,__v_isRef,__isVue"),Jn=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Ke));function ci(e){Ke(e)||(e=String(e));const t=$(this);return ee(t,"has",e),t.hasOwnProperty(e)}class Xn{constructor(t=!1,s=!1){this._isReadonly=t,this._isShallow=s}get(t,s,n){if(s==="__v_skip")return t.__v_skip;const r=this._isReadonly,i=this._isShallow;if(s==="__v_isReactive")return!r;if(s==="__v_isReadonly")return r;if(s==="__v_isShallow")return i;if(s==="__v_raw")return n===(r?i?vi:er:i?Qn:Zn).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(n)?t:void 0;const o=P(t);if(!r){let u;if(o&&(u=ii[s]))return u;if(s==="hasOwnProperty")return ci}const l=Reflect.get(t,s,se(t)?t:n);return(Ke(s)?Jn.has(s):li(s))||(r||ee(t,"get",s),i)?l:se(l)?o&&$s(s)?l:l.value:q(l)?r?tr(l):ht(l):l}}class zn extends Xn{constructor(t=!1){super(!1,t)}set(t,s,n,r){let i=t[s];if(!this._isShallow){const u=Ze(i);if(!xe(n)&&!Ze(n)&&(i=$(i),n=$(n)),!P(t)&&se(i)&&!se(n))return u?!1:(i.value=n,!0)}const o=P(t)&&$s(s)?Number(s)e,$t=e=>Reflect.getPrototypeOf(e);function hi(e,t,s){return function(...n){const r=this.__v_raw,i=$(r),o=ct(i),l=e==="entries"||e===Symbol.iterator&&o,u=e==="keys"&&o,d=r[e](...n),a=s?Cs:t?Ss:re;return!t&&ee(i,"iterate",u?ws:ze),{next(){const{value:p,done:b}=d.next();return b?{value:p,done:b}:{value:l?[a(p[0]),a(p[1])]:a(p),done:b}},[Symbol.iterator](){return this}}}}function Ht(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function pi(e,t){const s={get(r){const i=this.__v_raw,o=$(i),l=$(r);e||(Ue(r,l)&&ee(o,"get",r),ee(o,"get",l));const{has:u}=$t(o),d=t?Cs:e?Ss:re;if(u.call(o,r))return d(i.get(r));if(u.call(o,l))return d(i.get(l));i!==o&&i.get(r)},get size(){const r=this.__v_raw;return!e&&ee($(r),"iterate",ze),Reflect.get(r,"size",r)},has(r){const i=this.__v_raw,o=$(i),l=$(r);return e||(Ue(r,l)&&ee(o,"has",r),ee(o,"has",l)),r===l?i.has(r):i.has(r)||i.has(l)},forEach(r,i){const o=this,l=o.__v_raw,u=$(l),d=t?Cs:e?Ss:re;return!e&&ee(u,"iterate",ze),l.forEach((a,p)=>r.call(i,d(a),d(p),o))}};return z(s,e?{add:Ht("add"),set:Ht("set"),delete:Ht("delete"),clear:Ht("clear")}:{add(r){!t&&!xe(r)&&!Ze(r)&&(r=$(r));const i=$(this);return $t(i).has.call(i,r)||(i.add(r),Ne(i,"add",r,r)),this},set(r,i){!t&&!xe(i)&&!Ze(i)&&(i=$(i));const o=$(this),{has:l,get:u}=$t(o);let d=l.call(o,r);d||(r=$(r),d=l.call(o,r));const a=u.call(o,r);return o.set(r,i),d?Ue(i,a)&&Ne(o,"set",r,i):Ne(o,"add",r,i),this},delete(r){const i=$(this),{has:o,get:l}=$t(i);let u=o.call(i,r);u||(r=$(r),u=o.call(i,r)),l&&l.call(i,r);const d=i.delete(r);return u&&Ne(i,"delete",r,void 0),d},clear(){const r=$(this),i=r.size!==0,o=r.clear();return i&&Ne(r,"clear",void 0,void 0),o}}),["keys","values","entries",Symbol.iterator].forEach(r=>{s[r]=hi(r,e,t)}),s}function Ks(e,t){const s=pi(e,t);return(n,r,i)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?n:Reflect.get(H(s,r)&&r in n?s:n,r,i)}const gi={get:Ks(!1,!1)},mi={get:Ks(!1,!0)},_i={get:Ks(!0,!1)};const Zn=new WeakMap,Qn=new WeakMap,er=new WeakMap,vi=new WeakMap;function bi(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function yi(e){return e.__v_skip||!Object.isExtensible(e)?0:bi(Yr(e))}function ht(e){return Ze(e)?e:Ws(e,!1,ui,gi,Zn)}function xi(e){return Ws(e,!1,di,mi,Qn)}function tr(e){return Ws(e,!0,ai,_i,er)}function Ws(e,t,s,n,r){if(!q(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=r.get(e);if(i)return i;const o=yi(e);if(o===0)return e;const l=new Proxy(e,o===2?n:s);return r.set(e,l),l}function Ct(e){return Ze(e)?Ct(e.__v_raw):!!(e&&e.__v_isReactive)}function Ze(e){return!!(e&&e.__v_isReadonly)}function xe(e){return!!(e&&e.__v_isShallow)}function Ys(e){return e?!!e.__v_raw:!1}function $(e){const t=e&&e.__v_raw;return t?$(t):e}function wi(e){return!H(e,"__v_skip")&&Object.isExtensible(e)&&Hn(e,"__v_skip",!0),e}const re=e=>q(e)?ht(e):e,Ss=e=>q(e)?tr(e):e;function se(e){return e?e.__v_isRef===!0:!1}function de(e){return Ci(e,!1)}function Ci(e,t){return se(e)?e:new Si(e,t)}class Si{constructor(t,s){this.dep=new Vs,this.__v_isRef=!0,this.__v_isShallow=!1,this._rawValue=s?t:$(t),this._value=s?t:re(t),this.__v_isShallow=s}get value(){return this.dep.track(),this._value}set value(t){const s=this._rawValue,n=this.__v_isShallow||xe(t)||Ze(t);t=n?t:$(t),Ue(t,s)&&(this._rawValue=t,this._value=n?t:re(t),this.dep.trigger())}}function Ti(e){return se(e)?e.value:e}const Ei={get:(e,t,s)=>t==="__v_raw"?e:Ti(Reflect.get(e,t,s)),set:(e,t,s,n)=>{const r=e[t];return se(r)&&!se(s)?(r.value=s,!0):Reflect.set(e,t,s,n)}};function sr(e){return Ct(e)?e:new Proxy(e,Ei)}class Ai{constructor(t,s,n){this.fn=t,this.setter=s,this._value=void 0,this.dep=new Vs(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=At-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!s,this.isSSR=n}notify(){if(this.flags|=16,!(this.flags&8)&&K!==this)return Kn(this,!0),!0}get value(){const t=this.dep.track();return qn(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter&&this.setter(t)}}function Oi(e,t,s=!1){let n,r;return M(e)?n=e:(n=e.get,r=e.set),new Ai(n,r,s)}const Lt={},Ut=new WeakMap;let Xe;function Ii(e,t=!1,s=Xe){if(s){let n=Ut.get(s);n||Ut.set(s,n=[]),n.push(e)}}function Mi(e,t,s=W){const{immediate:n,deep:r,once:i,scheduler:o,augmentJob:l,call:u}=s,d=O=>r?O:xe(O)||r===!1||r===0?Ve(O,1):Ve(O);let a,p,b,x,A=!1,R=!1;if(se(e)?(p=()=>e.value,A=xe(e)):Ct(e)?(p=()=>d(e),A=!0):P(e)?(R=!0,A=e.some(O=>Ct(O)||xe(O)),p=()=>e.map(O=>{if(se(O))return O.value;if(Ct(O))return d(O);if(M(O))return u?u(O,2):O()})):M(e)?t?p=u?()=>u(e,2):e:p=()=>{if(b){We();try{b()}finally{Ye()}}const O=Xe;Xe=a;try{return u?u(e,3,[x]):e(x)}finally{Xe=O}}:p=be,t&&r){const O=p,G=r===!0?1/0:r;p=()=>Ve(O(),G)}const k=si(),N=()=>{a.stop(),k&&k.active&&Ns(k.effects,a)};if(i&&t){const O=t;t=(...G)=>{O(...G),N()}}let j=R?new Array(e.length).fill(Lt):Lt;const B=O=>{if(!(!(a.flags&1)||!a.dirty&&!O))if(t){const G=a.run();if(r||A||(R?G.some((we,pe)=>Ue(we,j[pe])):Ue(G,j))){b&&b();const we=Xe;Xe=a;try{const pe=[G,j===Lt?void 0:R&&j[0]===Lt?[]:j,x];u?u(t,3,pe):t(...pe),j=G}finally{Xe=we}}}else a.run()};return l&&l(B),a=new Vn(p),a.scheduler=o?()=>o(B,!1):B,x=O=>Ii(O,!1,a),b=a.onStop=()=>{const O=Ut.get(a);if(O){if(u)u(O,4);else for(const G of O)G();Ut.delete(a)}},t?n?B(!0):j=a.run():o?o(B.bind(null,!0),!0):a.run(),N.pause=a.pause.bind(a),N.resume=a.resume.bind(a),N.stop=N,N}function Ve(e,t=1/0,s){if(t<=0||!q(e)||e.__v_skip||(s=s||new Set,s.has(e)))return e;if(s.add(e),t--,se(e))Ve(e.value,t,s);else if(P(e))for(let n=0;n{Ve(n,t,s)});else if($n(e)){for(const n in e)Ve(e[n],t,s);for(const n of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,n)&&Ve(e[n],t,s)}return e}/** 10 | * @vue/runtime-core v3.5.13 11 | * (c) 2018-present Yuxi (Evan) You and Vue contributors 12 | * @license MIT 13 | **/function Ft(e,t,s,n){try{return n?e(...n):e()}catch(r){es(r,t,s)}}function Me(e,t,s,n){if(M(e)){const r=Ft(e,t,s,n);return r&&Dn(r)&&r.catch(i=>{es(i,t,s)}),r}if(P(e)){const r=[];for(let i=0;i>>1,r=ie[n],i=It(r);i=It(s)?ie.push(e):ie.splice(Fi(t),0,e),e.flags|=1,rr()}}function rr(){Kt||(Kt=nr.then(or))}function Di(e){P(e)?at.push(...e):je&&e.id===-1?je.splice(ot+1,0,e):e.flags&1||(at.push(e),e.flags|=1),rr()}function on(e,t,s=Ae+1){for(;sIt(s)-It(n));if(at.length=0,je){je.push(...t);return}for(je=t,ot=0;ote.id==null?e.flags&2?-1:1/0:e.id;function or(e){const t=be;try{for(Ae=0;Ae{n._d&&gn(-1);const i=Wt(t);let o;try{o=e(...r)}finally{Wt(i),n._d&&gn(1)}return o};return n._n=!0,n._c=!0,n._d=!0,n}function Ge(e,t,s,n){const r=e.dirs,i=t&&t.dirs;for(let o=0;oe.__isTeleport;function ks(e,t){e.shapeFlag&6&&e.component?(e.transition=t,ks(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}/*! #__NO_SIDE_EFFECTS__ */function cr(e,t){return M(e)?(()=>z({name:e.name},t,{setup:e}))():e}function fr(e){e.ids=[e.ids[0]+e.ids[2]+++"-",0,0]}function Yt(e,t,s,n,r=!1){if(P(e)){e.forEach((A,R)=>Yt(A,t&&(P(t)?t[R]:t),s,n,r));return}if(St(n)&&!r){n.shapeFlag&512&&n.type.__asyncResolved&&n.component.subTree.component&&Yt(e,t,s,n.component.subTree);return}const i=n.shapeFlag&4?zs(n.component):n.el,o=r?null:i,{i:l,r:u}=e,d=t&&t.r,a=l.refs===W?l.refs={}:l.refs,p=l.setupState,b=$(p),x=p===W?()=>!1:A=>H(b,A);if(d!=null&&d!==u&&(X(d)?(a[d]=null,x(d)&&(p[d]=null)):se(d)&&(d.value=null)),M(u))Ft(u,l,12,[o,a]);else{const A=X(u),R=se(u);if(A||R){const k=()=>{if(e.f){const N=A?x(u)?p[u]:a[u]:u.value;r?P(N)&&Ns(N,i):P(N)?N.includes(i)||N.push(i):A?(a[u]=[i],x(u)&&(p[u]=a[u])):(u.value=[i],e.k&&(a[e.k]=u.value))}else A?(a[u]=o,x(u)&&(p[u]=o)):R&&(u.value=o,e.k&&(a[e.k]=o))};o?(k.id=-1,ue(k,s)):k()}}}Rt().requestIdleCallback;Rt().cancelIdleCallback;const St=e=>!!e.type.__asyncLoader,ur=e=>e.type.__isKeepAlive;function Li(e,t){ar(e,"a",t)}function ji(e,t){ar(e,"da",t)}function ar(e,t,s=te){const n=e.__wdc||(e.__wdc=()=>{let r=s;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(ts(t,n,s),s){let r=s.parent;for(;r&&r.parent;)ur(r.parent.vnode)&&Bi(n,t,s,r),r=r.parent}}function Bi(e,t,s,n){const r=ts(t,e,n,!0);pr(()=>{Ns(n[t],r)},s)}function ts(e,t,s=te,n=!1){if(s){const r=s[e]||(s[e]=[]),i=t.__weh||(t.__weh=(...o)=>{We();const l=Dt(s),u=Me(t,s,e,o);return l(),Ye(),u});return n?r.unshift(i):r.push(i),i}}const $e=e=>(t,s=te)=>{(!Pt||e==="sp")&&ts(e,(...n)=>t(...n),s)},Vi=$e("bm"),dr=$e("m"),Ui=$e("bu"),Ki=$e("u"),hr=$e("bum"),pr=$e("um"),Wi=$e("sp"),Yi=$e("rtg"),qi=$e("rtc");function ki(e,t=te){ts("ec",e,t)}const gr="components";function Gi(e,t){return Xi(gr,e,!0,t)||e}const Ji=Symbol.for("v-ndc");function Xi(e,t,s=!0,n=!1){const r=ve||te;if(r){const i=r.type;if(e===gr){const l=Uo(i,!1);if(l&&(l===t||l===ge(t)||l===Qt(ge(t))))return i}const o=ln(r[e]||i[e],t)||ln(r.appContext[e],t);return!o&&n?i:o}}function ln(e,t){return e&&(e[t]||e[ge(t)]||e[Qt(ge(t))])}const Ts=e=>e?$r(e)?zs(e):Ts(e.parent):null,Tt=z(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Ts(e.parent),$root:e=>Ts(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>Gs(e),$forceUpdate:e=>e.f||(e.f=()=>{qs(e.update)}),$nextTick:e=>e.n||(e.n=Ri.bind(e.proxy)),$watch:e=>yo.bind(e)}),hs=(e,t)=>e!==W&&!e.__isScriptSetup&&H(e,t),zi={get({_:e},t){if(t==="__v_skip")return!0;const{ctx:s,setupState:n,data:r,props:i,accessCache:o,type:l,appContext:u}=e;let d;if(t[0]!=="$"){const x=o[t];if(x!==void 0)switch(x){case 1:return n[t];case 2:return r[t];case 4:return s[t];case 3:return i[t]}else{if(hs(n,t))return o[t]=1,n[t];if(r!==W&&H(r,t))return o[t]=2,r[t];if((d=e.propsOptions[0])&&H(d,t))return o[t]=3,i[t];if(s!==W&&H(s,t))return o[t]=4,s[t];Es&&(o[t]=0)}}const a=Tt[t];let p,b;if(a)return t==="$attrs"&&ee(e.attrs,"get",""),a(e);if((p=l.__cssModules)&&(p=p[t]))return p;if(s!==W&&H(s,t))return o[t]=4,s[t];if(b=u.config.globalProperties,H(b,t))return b[t]},set({_:e},t,s){const{data:n,setupState:r,ctx:i}=e;return hs(r,t)?(r[t]=s,!0):n!==W&&H(n,t)?(n[t]=s,!0):H(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=s,!0)},has({_:{data:e,setupState:t,accessCache:s,ctx:n,appContext:r,propsOptions:i}},o){let l;return!!s[o]||e!==W&&H(e,o)||hs(t,o)||(l=i[0])&&H(l,o)||H(n,o)||H(Tt,o)||H(r.config.globalProperties,o)},defineProperty(e,t,s){return s.get!=null?e._.accessCache[t]=0:H(s,"value")&&this.set(e,t,s.value,null),Reflect.defineProperty(e,t,s)}};function cn(e){return P(e)?e.reduce((t,s)=>(t[s]=null,t),{}):e}let Es=!0;function Zi(e){const t=Gs(e),s=e.proxy,n=e.ctx;Es=!1,t.beforeCreate&&fn(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:o,watch:l,provide:u,inject:d,created:a,beforeMount:p,mounted:b,beforeUpdate:x,updated:A,activated:R,deactivated:k,beforeDestroy:N,beforeUnmount:j,destroyed:B,unmounted:O,render:G,renderTracked:we,renderTriggered:pe,errorCaptured:me,serverPrefetch:tt,expose:Pe,inheritAttrs:qe,components:He,directives:Le,filters:Y}=t;if(d&&Qi(d,n,null),o)for(const V in o){const D=o[V];M(D)&&(n[V]=D.bind(s))}if(r){const V=r.call(s,s);q(V)&&(e.data=ht(V))}if(Es=!0,i)for(const V in i){const D=i[V],Ce=M(D)?D.bind(s,s):M(D.get)?D.get.bind(s,s):be,st=!M(D)&&M(D.set)?D.set.bind(s):be,ke=Wo({get:Ce,set:st});Object.defineProperty(n,V,{enumerable:!0,configurable:!0,get:()=>ke.value,set:Se=>ke.value=Se})}if(l)for(const V in l)mr(l[V],n,s,V);if(u){const V=M(u)?u.call(s):u;Reflect.ownKeys(V).forEach(D=>{io(D,V[D])})}a&&fn(a,e,"c");function J(V,D){P(D)?D.forEach(Ce=>V(Ce.bind(s))):D&&V(D.bind(s))}if(J(Vi,p),J(dr,b),J(Ui,x),J(Ki,A),J(Li,R),J(ji,k),J(ki,me),J(qi,we),J(Yi,pe),J(hr,j),J(pr,O),J(Wi,tt),P(Pe))if(Pe.length){const V=e.exposed||(e.exposed={});Pe.forEach(D=>{Object.defineProperty(V,D,{get:()=>s[D],set:Ce=>s[D]=Ce})})}else e.exposed||(e.exposed={});G&&e.render===be&&(e.render=G),qe!=null&&(e.inheritAttrs=qe),He&&(e.components=He),Le&&(e.directives=Le),tt&&fr(e)}function Qi(e,t,s=be){P(e)&&(e=As(e));for(const n in e){const r=e[n];let i;q(r)?"default"in r?i=jt(r.from||n,r.default,!0):i=jt(r.from||n):i=jt(r),se(i)?Object.defineProperty(t,n,{enumerable:!0,configurable:!0,get:()=>i.value,set:o=>i.value=o}):t[n]=i}}function fn(e,t,s){Me(P(e)?e.map(n=>n.bind(t.proxy)):e.bind(t.proxy),t,s)}function mr(e,t,s,n){let r=n.includes(".")?Mr(s,n):()=>s[n];if(X(e)){const i=t[e];M(i)&&gs(r,i)}else if(M(e))gs(r,e.bind(s));else if(q(e))if(P(e))e.forEach(i=>mr(i,t,s,n));else{const i=M(e.handler)?e.handler.bind(s):t[e.handler];M(i)&&gs(r,i,e)}}function Gs(e){const t=e.type,{mixins:s,extends:n}=t,{mixins:r,optionsCache:i,config:{optionMergeStrategies:o}}=e.appContext,l=i.get(t);let u;return l?u=l:!r.length&&!s&&!n?u=t:(u={},r.length&&r.forEach(d=>qt(u,d,o,!0)),qt(u,t,o)),q(t)&&i.set(t,u),u}function qt(e,t,s,n=!1){const{mixins:r,extends:i}=t;i&&qt(e,i,s,!0),r&&r.forEach(o=>qt(e,o,s,!0));for(const o in t)if(!(n&&o==="expose")){const l=eo[o]||s&&s[o];e[o]=l?l(e[o],t[o]):t[o]}return e}const eo={data:un,props:an,emits:an,methods:bt,computed:bt,beforeCreate:ne,created:ne,beforeMount:ne,mounted:ne,beforeUpdate:ne,updated:ne,beforeDestroy:ne,beforeUnmount:ne,destroyed:ne,unmounted:ne,activated:ne,deactivated:ne,errorCaptured:ne,serverPrefetch:ne,components:bt,directives:bt,watch:so,provide:un,inject:to};function un(e,t){return t?e?function(){return z(M(e)?e.call(this,this):e,M(t)?t.call(this,this):t)}:t:e}function to(e,t){return bt(As(e),As(t))}function As(e){if(P(e)){const t={};for(let s=0;s1)return s&&M(t)?t.call(n&&n.proxy):t}}const vr={},br=()=>Object.create(vr),yr=e=>Object.getPrototypeOf(e)===vr;function oo(e,t,s,n=!1){const r={},i=br();e.propsDefaults=Object.create(null),xr(e,t,r,i);for(const o in e.propsOptions[0])o in r||(r[o]=void 0);s?e.props=n?r:xi(r):e.type.props?e.props=r:e.props=i,e.attrs=i}function lo(e,t,s,n){const{props:r,attrs:i,vnode:{patchFlag:o}}=e,l=$(r),[u]=e.propsOptions;let d=!1;if((n||o>0)&&!(o&16)){if(o&8){const a=e.vnode.dynamicProps;for(let p=0;p{u=!0;const[b,x]=wr(p,t,!0);z(o,b),x&&l.push(...x)};!s&&t.mixins.length&&t.mixins.forEach(a),e.extends&&a(e.extends),e.mixins&&e.mixins.forEach(a)}if(!i&&!u)return q(e)&&n.set(e,lt),lt;if(P(i))for(let a=0;ae[0]==="_"||e==="$stable",Js=e=>P(e)?e.map(Oe):[Oe(e)],fo=(e,t,s)=>{if(t._n)return t;const n=Ni((...r)=>Js(t(...r)),s);return n._c=!1,n},Sr=(e,t,s)=>{const n=e._ctx;for(const r in e){if(Cr(r))continue;const i=e[r];if(M(i))t[r]=fo(r,i,n);else if(i!=null){const o=Js(i);t[r]=()=>o}}},Tr=(e,t)=>{const s=Js(t);e.slots.default=()=>s},Er=(e,t,s)=>{for(const n in t)(s||n!=="_")&&(e[n]=t[n])},uo=(e,t,s)=>{const n=e.slots=br();if(e.vnode.shapeFlag&32){const r=t._;r?(Er(n,t,s),s&&Hn(n,"_",r,!0)):Sr(t,n)}else t&&Tr(e,t)},ao=(e,t,s)=>{const{vnode:n,slots:r}=e;let i=!0,o=W;if(n.shapeFlag&32){const l=t._;l?s&&l===1?i=!1:Er(r,t,s):(i=!t.$stable,Sr(t,r)),o=t}else t&&(Tr(e,t),o={default:1});if(i)for(const l in r)!Cr(l)&&o[l]==null&&delete r[l]};function ho(){typeof __VUE_PROD_HYDRATION_MISMATCH_DETAILS__!="boolean"&&(Rt().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__=!1)}const ue=Ao;function po(e){return go(e)}function go(e,t){ho();const s=Rt();s.__VUE__=!0;const{insert:n,remove:r,patchProp:i,createElement:o,createText:l,createComment:u,setText:d,setElementText:a,parentNode:p,nextSibling:b,setScopeId:x=be,insertStaticContent:A}=e,R=(c,f,h,_=null,g=null,m=null,C=void 0,w=null,y=!!f.dynamicChildren)=>{if(c===f)return;c&&!vt(c,f)&&(_=Nt(c),Se(c,g,m,!0),c=null),f.patchFlag===-2&&(y=!1,f.dynamicChildren=null);const{type:v,ref:E,shapeFlag:S}=f;switch(v){case ns:k(c,f,h,_);break;case Qe:N(c,f,h,_);break;case _s:c==null&&j(f,h,_,C);break;case De:He(c,f,h,_,g,m,C,w,y);break;default:S&1?G(c,f,h,_,g,m,C,w,y):S&6?Le(c,f,h,_,g,m,C,w,y):(S&64||S&128)&&v.process(c,f,h,_,g,m,C,w,y,nt)}E!=null&&g&&Yt(E,c&&c.ref,m,f||c,!f)},k=(c,f,h,_)=>{if(c==null)n(f.el=l(f.children),h,_);else{const g=f.el=c.el;f.children!==c.children&&d(g,f.children)}},N=(c,f,h,_)=>{c==null?n(f.el=u(f.children||""),h,_):f.el=c.el},j=(c,f,h,_)=>{[c.el,c.anchor]=A(c.children,f,h,_,c.el,c.anchor)},B=({el:c,anchor:f},h,_)=>{let g;for(;c&&c!==f;)g=b(c),n(c,h,_),c=g;n(f,h,_)},O=({el:c,anchor:f})=>{let h;for(;c&&c!==f;)h=b(c),r(c),c=h;r(f)},G=(c,f,h,_,g,m,C,w,y)=>{f.type==="svg"?C="svg":f.type==="math"&&(C="mathml"),c==null?we(f,h,_,g,m,C,w,y):tt(c,f,g,m,C,w,y)},we=(c,f,h,_,g,m,C,w)=>{let y,v;const{props:E,shapeFlag:S,transition:T,dirs:I}=c;if(y=c.el=o(c.type,m,E&&E.is,E),S&8?a(y,c.children):S&16&&me(c.children,y,null,_,g,ps(c,m),C,w),I&&Ge(c,null,_,"created"),pe(y,c,c.scopeId,C,_),E){for(const U in E)U!=="value"&&!yt(U)&&i(y,U,null,E[U],m,_);"value"in E&&i(y,"value",null,E.value,m),(v=E.onVnodeBeforeMount)&&Ee(v,_,c)}I&&Ge(c,null,_,"beforeMount");const F=mo(g,T);F&&T.beforeEnter(y),n(y,f,h),((v=E&&E.onVnodeMounted)||F||I)&&ue(()=>{v&&Ee(v,_,c),F&&T.enter(y),I&&Ge(c,null,_,"mounted")},g)},pe=(c,f,h,_,g)=>{if(h&&x(c,h),_)for(let m=0;m<_.length;m++)x(c,_[m]);if(g){let m=g.subTree;if(f===m||Rr(m.type)&&(m.ssContent===f||m.ssFallback===f)){const C=g.vnode;pe(c,C,C.scopeId,C.slotScopeIds,g.parent)}}},me=(c,f,h,_,g,m,C,w,y=0)=>{for(let v=y;v{const w=f.el=c.el;let{patchFlag:y,dynamicChildren:v,dirs:E}=f;y|=c.patchFlag&16;const S=c.props||W,T=f.props||W;let I;if(h&&Je(h,!1),(I=T.onVnodeBeforeUpdate)&&Ee(I,h,f,c),E&&Ge(f,c,h,"beforeUpdate"),h&&Je(h,!0),(S.innerHTML&&T.innerHTML==null||S.textContent&&T.textContent==null)&&a(w,""),v?Pe(c.dynamicChildren,v,w,h,_,ps(f,g),m):C||D(c,f,w,null,h,_,ps(f,g),m,!1),y>0){if(y&16)qe(w,S,T,h,g);else if(y&2&&S.class!==T.class&&i(w,"class",null,T.class,g),y&4&&i(w,"style",S.style,T.style,g),y&8){const F=f.dynamicProps;for(let U=0;U{I&&Ee(I,h,f,c),E&&Ge(f,c,h,"updated")},_)},Pe=(c,f,h,_,g,m,C)=>{for(let w=0;w{if(f!==h){if(f!==W)for(const m in f)!yt(m)&&!(m in h)&&i(c,m,f[m],null,g,_);for(const m in h){if(yt(m))continue;const C=h[m],w=f[m];C!==w&&m!=="value"&&i(c,m,w,C,g,_)}"value"in h&&i(c,"value",f.value,h.value,g)}},He=(c,f,h,_,g,m,C,w,y)=>{const v=f.el=c?c.el:l(""),E=f.anchor=c?c.anchor:l("");let{patchFlag:S,dynamicChildren:T,slotScopeIds:I}=f;I&&(w=w?w.concat(I):I),c==null?(n(v,h,_),n(E,h,_),me(f.children||[],h,E,g,m,C,w,y)):S>0&&S&64&&T&&c.dynamicChildren?(Pe(c.dynamicChildren,T,h,g,m,C,w),(f.key!=null||g&&f===g.subTree)&&Ar(c,f,!0)):D(c,f,h,E,g,m,C,w,y)},Le=(c,f,h,_,g,m,C,w,y)=>{f.slotScopeIds=w,c==null?f.shapeFlag&512?g.ctx.activate(f,h,_,C,y):Y(f,h,_,g,m,C,y):Z(c,f,y)},Y=(c,f,h,_,g,m,C)=>{const w=c.component=Ho(c,_,g);if(ur(c)&&(w.ctx.renderer=nt),Lo(w,!1,C),w.asyncDep){if(g&&g.registerDep(w,J,C),!c.el){const y=w.subTree=Ie(Qe);N(null,y,f,h)}}else J(w,c,f,h,g,m,C)},Z=(c,f,h)=>{const _=f.component=c.component;if(To(c,f,h))if(_.asyncDep&&!_.asyncResolved){V(_,f,h);return}else _.next=f,_.update();else f.el=c.el,_.vnode=f},J=(c,f,h,_,g,m,C)=>{const w=()=>{if(c.isMounted){let{next:S,bu:T,u:I,parent:F,vnode:U}=c;{const ce=Or(c);if(ce){S&&(S.el=U.el,V(c,S,C)),ce.asyncDep.then(()=>{c.isUnmounted||w()});return}}let L=S,le;Je(c,!1),S?(S.el=U.el,V(c,S,C)):S=U,T&&cs(T),(le=S.props&&S.props.onVnodeBeforeUpdate)&&Ee(le,F,S,U),Je(c,!0);const Q=ms(c),_e=c.subTree;c.subTree=Q,R(_e,Q,p(_e.el),Nt(_e),c,g,m),S.el=Q.el,L===null&&Eo(c,Q.el),I&&ue(I,g),(le=S.props&&S.props.onVnodeUpdated)&&ue(()=>Ee(le,F,S,U),g)}else{let S;const{el:T,props:I}=f,{bm:F,m:U,parent:L,root:le,type:Q}=c,_e=St(f);if(Je(c,!1),F&&cs(F),!_e&&(S=I&&I.onVnodeBeforeMount)&&Ee(S,L,f),Je(c,!0),T&&os){const ce=()=>{c.subTree=ms(c),os(T,c.subTree,c,g,null)};_e&&Q.__asyncHydrate?Q.__asyncHydrate(T,c,ce):ce()}else{le.ce&&le.ce._injectChildStyle(Q);const ce=c.subTree=ms(c);R(null,ce,h,_,c,g,m),f.el=ce.el}if(U&&ue(U,g),!_e&&(S=I&&I.onVnodeMounted)){const ce=f;ue(()=>Ee(S,L,ce),g)}(f.shapeFlag&256||L&&St(L.vnode)&&L.vnode.shapeFlag&256)&&c.a&&ue(c.a,g),c.isMounted=!0,f=h=_=null}};c.scope.on();const y=c.effect=new Vn(w);c.scope.off();const v=c.update=y.run.bind(y),E=c.job=y.runIfDirty.bind(y);E.i=c,E.id=c.uid,y.scheduler=()=>qs(E),Je(c,!0),v()},V=(c,f,h)=>{f.component=c;const _=c.vnode.props;c.vnode=f,c.next=null,lo(c,f.props,_,h),ao(c,f.children,h),We(),on(c),Ye()},D=(c,f,h,_,g,m,C,w,y=!1)=>{const v=c&&c.children,E=c?c.shapeFlag:0,S=f.children,{patchFlag:T,shapeFlag:I}=f;if(T>0){if(T&128){st(v,S,h,_,g,m,C,w,y);return}else if(T&256){Ce(v,S,h,_,g,m,C,w,y);return}}I&8?(E&16&>(v,g,m),S!==v&&a(h,S)):E&16?I&16?st(v,S,h,_,g,m,C,w,y):gt(v,g,m,!0):(E&8&&a(h,""),I&16&&me(S,h,_,g,m,C,w,y))},Ce=(c,f,h,_,g,m,C,w,y)=>{c=c||lt,f=f||lt;const v=c.length,E=f.length,S=Math.min(v,E);let T;for(T=0;TE?gt(c,g,m,!0,!1,S):me(f,h,_,g,m,C,w,y,S)},st=(c,f,h,_,g,m,C,w,y)=>{let v=0;const E=f.length;let S=c.length-1,T=E-1;for(;v<=S&&v<=T;){const I=c[v],F=f[v]=y?Be(f[v]):Oe(f[v]);if(vt(I,F))R(I,F,h,null,g,m,C,w,y);else break;v++}for(;v<=S&&v<=T;){const I=c[S],F=f[T]=y?Be(f[T]):Oe(f[T]);if(vt(I,F))R(I,F,h,null,g,m,C,w,y);else break;S--,T--}if(v>S){if(v<=T){const I=T+1,F=IT)for(;v<=S;)Se(c[v],g,m,!0),v++;else{const I=v,F=v,U=new Map;for(v=F;v<=T;v++){const fe=f[v]=y?Be(f[v]):Oe(f[v]);fe.key!=null&&U.set(fe.key,v)}let L,le=0;const Q=T-F+1;let _e=!1,ce=0;const mt=new Array(Q);for(v=0;v=Q){Se(fe,g,m,!0);continue}let Te;if(fe.key!=null)Te=U.get(fe.key);else for(L=F;L<=T;L++)if(mt[L-F]===0&&vt(fe,f[L])){Te=L;break}Te===void 0?Se(fe,g,m,!0):(mt[Te-F]=v+1,Te>=ce?ce=Te:_e=!0,R(fe,f[Te],h,null,g,m,C,w,y),le++)}const en=_e?_o(mt):lt;for(L=en.length-1,v=Q-1;v>=0;v--){const fe=F+v,Te=f[fe],tn=fe+1{const{el:m,type:C,transition:w,children:y,shapeFlag:v}=c;if(v&6){ke(c.component.subTree,f,h,_);return}if(v&128){c.suspense.move(f,h,_);return}if(v&64){C.move(c,f,h,nt);return}if(C===De){n(m,f,h);for(let S=0;Sw.enter(m),g);else{const{leave:S,delayLeave:T,afterLeave:I}=w,F=()=>n(m,f,h),U=()=>{S(m,()=>{F(),I&&I()})};T?T(m,F,U):U()}else n(m,f,h)},Se=(c,f,h,_=!1,g=!1)=>{const{type:m,props:C,ref:w,children:y,dynamicChildren:v,shapeFlag:E,patchFlag:S,dirs:T,cacheIndex:I}=c;if(S===-2&&(g=!1),w!=null&&Yt(w,null,h,c,!0),I!=null&&(f.renderCache[I]=void 0),E&256){f.ctx.deactivate(c);return}const F=E&1&&T,U=!St(c);let L;if(U&&(L=C&&C.onVnodeBeforeUnmount)&&Ee(L,f,c),E&6)Vr(c.component,h,_);else{if(E&128){c.suspense.unmount(h,_);return}F&&Ge(c,null,f,"beforeUnmount"),E&64?c.type.remove(c,f,h,nt,_):v&&!v.hasOnce&&(m!==De||S>0&&S&64)?gt(v,f,h,!1,!0):(m===De&&S&384||!g&&E&16)&>(y,f,h),_&&Zs(c)}(U&&(L=C&&C.onVnodeUnmounted)||F)&&ue(()=>{L&&Ee(L,f,c),F&&Ge(c,null,f,"unmounted")},h)},Zs=c=>{const{type:f,el:h,anchor:_,transition:g}=c;if(f===De){Br(h,_);return}if(f===_s){O(c);return}const m=()=>{r(h),g&&!g.persisted&&g.afterLeave&&g.afterLeave()};if(c.shapeFlag&1&&g&&!g.persisted){const{leave:C,delayLeave:w}=g,y=()=>C(h,m);w?w(c.el,m,y):y()}else m()},Br=(c,f)=>{let h;for(;c!==f;)h=b(c),r(c),c=h;r(f)},Vr=(c,f,h)=>{const{bum:_,scope:g,job:m,subTree:C,um:w,m:y,a:v}=c;hn(y),hn(v),_&&cs(_),g.stop(),m&&(m.flags|=8,Se(C,c,f,h)),w&&ue(w,f),ue(()=>{c.isUnmounted=!0},f),f&&f.pendingBranch&&!f.isUnmounted&&c.asyncDep&&!c.asyncResolved&&c.suspenseId===f.pendingId&&(f.deps--,f.deps===0&&f.resolve())},gt=(c,f,h,_=!1,g=!1,m=0)=>{for(let C=m;C{if(c.shapeFlag&6)return Nt(c.component.subTree);if(c.shapeFlag&128)return c.suspense.next();const f=b(c.anchor||c.el),h=f&&f[$i];return h?b(h):f};let rs=!1;const Qs=(c,f,h)=>{c==null?f._vnode&&Se(f._vnode,null,null,!0):R(f._vnode||null,c,f,null,null,null,h),f._vnode=c,rs||(rs=!0,on(),ir(),rs=!1)},nt={p:R,um:Se,m:ke,r:Zs,mt:Y,mc:me,pc:D,pbc:Pe,n:Nt,o:e};let is,os;return t&&([is,os]=t(nt)),{render:Qs,hydrate:is,createApp:ro(Qs,is)}}function ps({type:e,props:t},s){return s==="svg"&&e==="foreignObject"||s==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:s}function Je({effect:e,job:t},s){s?(e.flags|=32,t.flags|=4):(e.flags&=-33,t.flags&=-5)}function mo(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function Ar(e,t,s=!1){const n=e.children,r=t.children;if(P(n)&&P(r))for(let i=0;i>1,e[s[l]]0&&(t[n]=s[i-1]),s[i]=n)}}for(i=s.length,o=s[i-1];i-- >0;)s[i]=o,o=t[o];return s}function Or(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:Or(t)}function hn(e){if(e)for(let t=0;tjt(vo);function gs(e,t,s){return Ir(e,t,s)}function Ir(e,t,s=W){const{immediate:n,deep:r,flush:i,once:o}=s,l=z({},s),u=t&&n||!t&&i!=="post";let d;if(Pt){if(i==="sync"){const x=bo();d=x.__watcherHandles||(x.__watcherHandles=[])}else if(!u){const x=()=>{};return x.stop=be,x.resume=be,x.pause=be,x}}const a=te;l.call=(x,A,R)=>Me(x,a,A,R);let p=!1;i==="post"?l.scheduler=x=>{ue(x,a&&a.suspense)}:i!=="sync"&&(p=!0,l.scheduler=(x,A)=>{A?x():qs(x)}),l.augmentJob=x=>{t&&(x.flags|=4),p&&(x.flags|=2,a&&(x.id=a.uid,x.i=a))};const b=Mi(e,t,l);return Pt&&(d?d.push(b):u&&b()),b}function yo(e,t,s){const n=this.proxy,r=X(e)?e.includes(".")?Mr(n,e):()=>n[e]:e.bind(n,n);let i;M(t)?i=t:(i=t.handler,s=t);const o=Dt(this),l=Ir(r,i.bind(n),s);return o(),l}function Mr(e,t){const s=t.split(".");return()=>{let n=e;for(let r=0;rt==="modelValue"||t==="model-value"?e.modelModifiers:e[`${t}Modifiers`]||e[`${ge(t)}Modifiers`]||e[`${et(t)}Modifiers`];function wo(e,t,...s){if(e.isUnmounted)return;const n=e.vnode.props||W;let r=s;const i=t.startsWith("update:"),o=i&&xo(n,t.slice(7));o&&(o.trim&&(r=s.map(a=>X(a)?a.trim():a)),o.number&&(r=s.map(Gr)));let l,u=n[l=ls(t)]||n[l=ls(ge(t))];!u&&i&&(u=n[l=ls(et(t))]),u&&Me(u,e,6,r);const d=n[l+"Once"];if(d){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,Me(d,e,6,r)}}function Pr(e,t,s=!1){const n=t.emitsCache,r=n.get(e);if(r!==void 0)return r;const i=e.emits;let o={},l=!1;if(!M(e)){const u=d=>{const a=Pr(d,t,!0);a&&(l=!0,z(o,a))};!s&&t.mixins.length&&t.mixins.forEach(u),e.extends&&u(e.extends),e.mixins&&e.mixins.forEach(u)}return!i&&!l?(q(e)&&n.set(e,null),null):(P(i)?i.forEach(u=>o[u]=null):z(o,i),q(e)&&n.set(e,o),o)}function ss(e,t){return!e||!Xt(t)?!1:(t=t.slice(2).replace(/Once$/,""),H(e,t[0].toLowerCase()+t.slice(1))||H(e,et(t))||H(e,t))}function ms(e){const{type:t,vnode:s,proxy:n,withProxy:r,propsOptions:[i],slots:o,attrs:l,emit:u,render:d,renderCache:a,props:p,data:b,setupState:x,ctx:A,inheritAttrs:R}=e,k=Wt(e);let N,j;try{if(s.shapeFlag&4){const O=r||n,G=O;N=Oe(d.call(G,O,a,p,x,b,A)),j=l}else{const O=t;N=Oe(O.length>1?O(p,{attrs:l,slots:o,emit:u}):O(p,null)),j=t.props?l:Co(l)}}catch(O){Et.length=0,es(O,e,1),N=Ie(Qe)}let B=N;if(j&&R!==!1){const O=Object.keys(j),{shapeFlag:G}=B;O.length&&G&7&&(i&&O.some(Ds)&&(j=So(j,i)),B=pt(B,j,!1,!0))}return s.dirs&&(B=pt(B,null,!1,!0),B.dirs=B.dirs?B.dirs.concat(s.dirs):s.dirs),s.transition&&ks(B,s.transition),N=B,Wt(k),N}const Co=e=>{let t;for(const s in e)(s==="class"||s==="style"||Xt(s))&&((t||(t={}))[s]=e[s]);return t},So=(e,t)=>{const s={};for(const n in e)(!Ds(n)||!(n.slice(9)in t))&&(s[n]=e[n]);return s};function To(e,t,s){const{props:n,children:r,component:i}=e,{props:o,children:l,patchFlag:u}=t,d=i.emitsOptions;if(t.dirs||t.transition)return!0;if(s&&u>=0){if(u&1024)return!0;if(u&16)return n?pn(n,o,d):!!o;if(u&8){const a=t.dynamicProps;for(let p=0;pe.__isSuspense;function Ao(e,t){t&&t.pendingBranch?P(e)?t.effects.push(...e):t.effects.push(e):Di(e)}const De=Symbol.for("v-fgt"),ns=Symbol.for("v-txt"),Qe=Symbol.for("v-cmt"),_s=Symbol.for("v-stc"),Et=[];let he=null;function kt(e=!1){Et.push(he=e?null:[])}function Oo(){Et.pop(),he=Et[Et.length-1]||null}let Mt=1;function gn(e,t=!1){Mt+=e,e<0&&he&&t&&(he.hasOnce=!0)}function Fr(e){return e.dynamicChildren=Mt>0?he||lt:null,Oo(),Mt>0&&he&&he.push(e),e}function Is(e,t,s,n,r,i){return Fr(oe(e,t,s,n,r,i,!0))}function Io(e,t,s,n,r){return Fr(Ie(e,t,s,n,r,!0))}function Dr(e){return e?e.__v_isVNode===!0:!1}function vt(e,t){return e.type===t.type&&e.key===t.key}const Nr=({key:e})=>e!=null?e:null,Bt=({ref:e,ref_key:t,ref_for:s})=>(typeof e=="number"&&(e=""+e),e!=null?X(e)||se(e)||M(e)?{i:ve,r:e,k:t,f:!!s}:e:null);function oe(e,t=null,s=null,n=0,r=null,i=e===De?0:1,o=!1,l=!1){const u={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Nr(t),ref:t&&Bt(t),scopeId:lr,slotScopeIds:null,children:s,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:n,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:ve};return l?(Xs(u,s),i&128&&e.normalize(u)):s&&(u.shapeFlag|=X(s)?8:16),Mt>0&&!o&&he&&(u.patchFlag>0||i&6)&&u.patchFlag!==32&&he.push(u),u}const Ie=Mo;function Mo(e,t=null,s=null,n=0,r=null,i=!1){if((!e||e===Ji)&&(e=Qe),Dr(e)){const l=pt(e,t,!0);return s&&Xs(l,s),Mt>0&&!i&&he&&(l.shapeFlag&6?he[he.indexOf(e)]=l:he.push(l)),l.patchFlag=-2,l}if(Ko(e)&&(e=e.__vccOpts),t){t=Po(t);let{class:l,style:u}=t;l&&!X(l)&&(t.class=ut(l)),q(u)&&(Ys(u)&&!P(u)&&(u=z({},u)),t.style=ft(u))}const o=X(e)?1:Rr(e)?128:Hi(e)?64:q(e)?4:M(e)?2:0;return oe(e,t,s,n,r,o,i,!0)}function Po(e){return e?Ys(e)||yr(e)?z({},e):e:null}function pt(e,t,s=!1,n=!1){const{props:r,ref:i,patchFlag:o,children:l,transition:u}=e,d=t?Do(r||{},t):r,a={__v_isVNode:!0,__v_skip:!0,type:e.type,props:d,key:d&&Nr(d),ref:t&&t.ref?s&&i?P(i)?i.concat(Bt(t)):[i,Bt(t)]:Bt(t):i,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:l,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==De?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:u,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&pt(e.ssContent),ssFallback:e.ssFallback&&pt(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return u&&n&&ks(a,u.clone(a)),a}function Ro(e=" ",t=0){return Ie(ns,null,e,t)}function Fo(e="",t=!1){return t?(kt(),Io(Qe,null,e)):Ie(Qe,null,e)}function Oe(e){return e==null||typeof e=="boolean"?Ie(Qe):P(e)?Ie(De,null,e.slice()):Dr(e)?Be(e):Ie(ns,null,String(e))}function Be(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:pt(e)}function Xs(e,t){let s=0;const{shapeFlag:n}=e;if(t==null)t=null;else if(P(t))s=16;else if(typeof t=="object")if(n&65){const r=t.default;r&&(r._c&&(r._d=!1),Xs(e,r()),r._c&&(r._d=!0));return}else{s=32;const r=t._;!r&&!yr(t)?t._ctx=ve:r===3&&ve&&(ve.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else M(t)?(t={default:t,_ctx:ve},s=32):(t=String(t),n&64?(s=16,t=[Ro(t)]):s=8);e.children=t,e.shapeFlag|=s}function Do(...e){const t={};for(let s=0;s{let r;return(r=e[s])||(r=e[s]=[]),r.push(n),i=>{r.length>1?r.forEach(o=>o(i)):r[0](i)}};Gt=t("__VUE_INSTANCE_SETTERS__",s=>te=s),Ms=t("__VUE_SSR_SETTERS__",s=>Pt=s)}const Dt=e=>{const t=te;return Gt(e),e.scope.on(),()=>{e.scope.off(),Gt(t)}},mn=()=>{te&&te.scope.off(),Gt(null)};function $r(e){return e.vnode.shapeFlag&4}let Pt=!1;function Lo(e,t=!1,s=!1){t&&Ms(t);const{props:n,children:r}=e.vnode,i=$r(e);oo(e,n,i,t),uo(e,r,s);const o=i?jo(e,t):void 0;return t&&Ms(!1),o}function jo(e,t){const s=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,zi);const{setup:n}=s;if(n){We();const r=e.setupContext=n.length>1?Vo(e):null,i=Dt(e),o=Ft(n,e,0,[e.props,r]),l=Dn(o);if(Ye(),i(),(l||e.sp)&&!St(e)&&fr(e),l){if(o.then(mn,mn),t)return o.then(u=>{_n(e,u,t)}).catch(u=>{es(u,e,0)});e.asyncDep=o}else _n(e,o,t)}else Hr(e,t)}function _n(e,t,s){M(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:q(t)&&(e.setupState=sr(t)),Hr(e,s)}let vn;function Hr(e,t,s){const n=e.type;if(!e.render){if(!t&&vn&&!n.render){const r=n.template||Gs(e).template;if(r){const{isCustomElement:i,compilerOptions:o}=e.appContext.config,{delimiters:l,compilerOptions:u}=n,d=z(z({isCustomElement:i,delimiters:l},o),u);n.render=vn(r,d)}}e.render=n.render||be}{const r=Dt(e);We();try{Zi(e)}finally{Ye(),r()}}}const Bo={get(e,t){return ee(e,"get",""),e[t]}};function Vo(e){const t=s=>{e.exposed=s||{}};return{attrs:new Proxy(e.attrs,Bo),slots:e.slots,emit:e.emit,expose:t}}function zs(e){return e.exposed?e.exposeProxy||(e.exposeProxy=new Proxy(sr(wi(e.exposed)),{get(t,s){if(s in t)return t[s];if(s in Tt)return Tt[s](e)},has(t,s){return s in t||s in Tt}})):e.proxy}function Uo(e,t=!0){return M(e)?e.displayName||e.name:e.name||t&&e.__name}function Ko(e){return M(e)&&"__vccOpts"in e}const Wo=(e,t)=>Oi(e,t,Pt),Yo="3.5.13";/** 14 | * @vue/runtime-dom v3.5.13 15 | * (c) 2018-present Yuxi (Evan) You and Vue contributors 16 | * @license MIT 17 | **/let Ps;const bn=typeof window!="undefined"&&window.trustedTypes;if(bn)try{Ps=bn.createPolicy("vue",{createHTML:e=>e})}catch{}const Lr=Ps?e=>Ps.createHTML(e):e=>e,qo="http://www.w3.org/2000/svg",ko="http://www.w3.org/1998/Math/MathML",Fe=typeof document!="undefined"?document:null,yn=Fe&&Fe.createElement("template"),Go={insert:(e,t,s)=>{t.insertBefore(e,s||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,s,n)=>{const r=t==="svg"?Fe.createElementNS(qo,e):t==="mathml"?Fe.createElementNS(ko,e):s?Fe.createElement(e,{is:s}):Fe.createElement(e);return e==="select"&&n&&n.multiple!=null&&r.setAttribute("multiple",n.multiple),r},createText:e=>Fe.createTextNode(e),createComment:e=>Fe.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Fe.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,s,n,r,i){const o=s?s.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),s),!(r===i||!(r=r.nextSibling)););else{yn.innerHTML=Lr(n==="svg"?`${e}`:n==="mathml"?`${e}`:e);const l=yn.content;if(n==="svg"||n==="mathml"){const u=l.firstChild;for(;u.firstChild;)l.appendChild(u.firstChild);l.removeChild(u)}t.insertBefore(l,s)}return[o?o.nextSibling:t.firstChild,s?s.previousSibling:t.lastChild]}},Jo=Symbol("_vtc");function Xo(e,t,s){const n=e[Jo];n&&(t=(t?[t,...n]:[...n]).join(" ")),t==null?e.removeAttribute("class"):s?e.setAttribute("class",t):e.className=t}const xn=Symbol("_vod"),zo=Symbol("_vsh"),Zo=Symbol(""),Qo=/(^|;)\s*display\s*:/;function el(e,t,s){const n=e.style,r=X(s);let i=!1;if(s&&!r){if(t)if(X(t))for(const o of t.split(";")){const l=o.slice(0,o.indexOf(":")).trim();s[l]==null&&Vt(n,l,"")}else for(const o in t)s[o]==null&&Vt(n,o,"");for(const o in s)o==="display"&&(i=!0),Vt(n,o,s[o])}else if(r){if(t!==s){const o=n[Zo];o&&(s+=";"+o),n.cssText=s,i=Qo.test(s)}}else t&&e.removeAttribute("style");xn in e&&(e[xn]=i?n.display:"",e[zo]&&(n.display="none"))}const wn=/\s*!important$/;function Vt(e,t,s){if(P(s))s.forEach(n=>Vt(e,t,n));else if(s==null&&(s=""),t.startsWith("--"))e.setProperty(t,s);else{const n=tl(e,t);wn.test(s)?e.setProperty(et(n),s.replace(wn,""),"important"):e[n]=s}}const Cn=["Webkit","Moz","ms"],vs={};function tl(e,t){const s=vs[t];if(s)return s;let n=ge(t);if(n!=="filter"&&n in e)return vs[t]=n;n=Qt(n);for(let r=0;rbs||(ol.then(()=>bs=0),bs=Date.now());function cl(e,t){const s=n=>{if(!n._vts)n._vts=Date.now();else if(n._vts<=s.attached)return;Me(fl(n,s.value),t,5,[n])};return s.value=e,s.attached=ll(),s}function fl(e,t){if(P(t)){const s=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{s.call(e),e._stopped=!0},t.map(n=>r=>!r._stopped&&n&&n(r))}else return t}const In=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,ul=(e,t,s,n,r,i)=>{const o=r==="svg";t==="class"?Xo(e,n,o):t==="style"?el(e,s,n):Xt(t)?Ds(t)||rl(e,t,s,n,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):al(e,t,n,o))?(En(e,t,n),!e.tagName.includes("-")&&(t==="value"||t==="checked"||t==="selected")&&Tn(e,t,n,o,i,t!=="value")):e._isVueCE&&(/[A-Z]/.test(t)||!X(n))?En(e,ge(t),n,i,t):(t==="true-value"?e._trueValue=n:t==="false-value"&&(e._falseValue=n),Tn(e,t,n,o))};function al(e,t,s,n){if(n)return!!(t==="innerHTML"||t==="textContent"||t in e&&In(t)&&M(s));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return In(t)&&X(s)?!1:t in e}const dl=z({patchProp:ul},Go);let Mn;function hl(){return Mn||(Mn=po(dl))}const pl=(...e)=>{const t=hl().createApp(...e),{mount:s}=t;return t.mount=n=>{const r=ml(n);if(!r)return;const i=t._component;!M(i)&&!i.render&&!i.template&&(i.template=r.innerHTML),r.nodeType===1&&(r.textContent="");const o=s(r,!1,gl(r));return r instanceof Element&&(r.removeAttribute("v-cloak"),r.setAttribute("data-v-app","")),o},t};function gl(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function ml(e){return X(e)?document.querySelector(e):e}const it=Math.PI;function Pn(e,t){return e+t}function _l(e){return e*e}function Rn(e,t,s,n,r,i){e.beginPath(),e.moveTo(t,s),e.arc(t+n/2,s-r+2,r,.72*it,2.26*it),e.lineTo(t+n,s),e.arc(t+n+r-2,s+n/2,r,1.21*it,2.78*it),e.lineTo(t+n,s+n),e.lineTo(t,s+n),e.arc(t+r-2,s+n/2,r+.4,2.76*it,1.24*it,!0),e.lineTo(t,s),e.lineWidth=2,e.fillStyle="rgba(255, 255, 255, 0.7)",e.strokeStyle="rgba(255, 255, 255, 0.7)",e.stroke(),e[i](),e.globalCompositeOperation="destination-over"}function vl(e,t){const s=document.createElement("img");return s.crossOrigin="Anonymous",s.onload=t,s.onerror=()=>{s.src=Rs(e)},s.src=Rs(e),s}function Jt(e,t){return Math.round(Math.random()*(t-e)+e)}function Rs(e){const t=e.length;return t>0?e[Jt(0,t-1)]:"https://picsum.photos/300/150?image="+Jt(0,1084)}function bl(e,t,s={leading:!0,trailing:!0}){const{leading:n,trailing:r,resultCallback:i}=s;let o=0,l=null;const u=function(...d){return new Promise((a,p)=>{const b=new Date().getTime();!o&&!n&&(o=b);const x=t-(b-o);if(x<=0){l&&(clearTimeout(l),l=null);const A=e.apply(this,d);i&&i(A),a(A),o=b;return}r&&!l&&(l=setTimeout(()=>{l=null,o=n?new Date().getTime():0;const A=e.apply(this,d);i&&i(A),a(A)},x))})};return u.cancel=function(){l&&clearTimeout(l),l=null,o=0},u}function yl(){const e=ht({x:0,y:0}),t=de(!1),s=de(!1),n=de(0),r=de([]);return{origin:e,success:t,isMouseDown:s,timestamp:n,trail:r,start:d=>{t.value||(d instanceof MouseEvent?(e.x=d.clientX,e.y=d.clientY):(e.x=d.changedTouches[0].pageX,e.y=d.changedTouches[0].pageY),s.value=!0,n.value=Date.now())},move:(d,a,p)=>{if(!s.value)return!1;let b=0,x=0;if(a instanceof MouseEvent?(b=a.clientX-e.x,x=a.clientY-e.y):(b=a.changedTouches[0].pageX-e.x,x=a.changedTouches[0].pageY-e.y),b<0||b+38>=d)return!1;p(b),r.value.push(x)},end:(d,a)=>{if(!s.value||(s.value=!1,(d instanceof MouseEvent?d.clientX:d.changedTouches[0].pageX)===e.x))return!1;n.value=Date.now()-n.value,a(n.value)},verify:(d,a,p)=>{const b=r.value,x=b.reduce(Pn)/b.length,A=b.map(N=>N-x),R=Math.sqrt(A.map(_l).reduce(Pn)/b.length),k=parseInt(d);return p=p<=1?1:p>10?10:p,{spliced:Math.abs(k-a)<=p,TuringTest:x!==R}}}}var jr=(e,t)=>{const s=e.__vccOpts||e;for(const[n,r]of t)s[n]=r;return s};const xl=cr({name:"SlideVerify",props:{l:{type:Number,default:42},r:{type:Number,default:10},w:{type:Number,default:310},h:{type:Number,default:155},sliderText:{type:String,default:"Slide filled right"},accuracy:{type:Number,default:5},show:{type:Boolean,default:!0},imgs:{type:Array,default:()=>[]},interval:{type:Number,default:50}},emits:["success","again","fail","refresh"],setup(e,{emit:t}){const{imgs:s,l:n,r,w:i,h:o,accuracy:l,interval:u}=e,d=de(!0),a=de(0),p=de(0),b=ht({containerActive:!1,containerSuccess:!1,containerFail:!1}),x=ht({iconCls:"arrow-right",width:"0",left:"0"}),A=de(),R=de(),k=de(),N=de();let j;const{success:B,start:O,move:G,end:we,verify:pe}=yl(),me=()=>{var Y,Z;B.value=!1,b.containerActive=!1,b.containerSuccess=!1,b.containerFail=!1,x.iconCls="arrow-right",x.left="0",x.width="0",A.value.style.left="0",(Y=N.value)==null||Y.clearRect(0,0,i,o),(Z=R.value)==null||Z.clearRect(0,0,i,o),A.value.width=i,j.src=Rs(s)},tt=()=>{me(),t("refresh")};function Pe(Y){x.left=Y+"px";let Z=(i-40-20)/(i-40)*Y;A.value.style.left=Z+"px",b.containerActive=!0,x.width=Y+"px"}function qe(Y){const{spliced:Z,TuringTest:J}=pe(A.value.style.left,a.value,l);if(Z){if(l===-1){b.containerSuccess=!0,x.iconCls="success",B.value=!0,t("success",Y);return}J?(b.containerSuccess=!0,x.iconCls="success",B.value=!0,t("success",Y)):(b.containerFail=!0,x.iconCls="fail",t("again"))}else b.containerFail=!0,x.iconCls="fail",t("fail"),setTimeout(()=>{me()},1e3)}const He=bl(Y=>{G(i,Y,Pe)},u),Le=Y=>{we(Y,qe)};return dr(()=>{var J,V;const Y=(J=k.value)==null?void 0:J.getContext("2d"),Z=(V=A.value)==null?void 0:V.getContext("2d");N.value=Y,R.value=Z,j=vl(s,()=>{d.value=!1;const D=n+r*2+3;if(a.value=Jt(D+10,i-(D+10)),p.value=Jt(10+r*2,o-(D+10)),Y&&Z){Rn(Y,a.value,p.value,n,r,"fill"),Rn(Z,a.value,p.value,n,r,"clip"),Y.drawImage(j,0,0,i,o),Z.drawImage(j,0,0,i,o);const Ce=p.value-r*2-1,st=Z.getImageData(a.value,Ce,D,D);A.value.width=D,Z.putImageData(st,0,Ce)}}),document.addEventListener("mousemove",He),document.addEventListener("mouseup",Le)}),hr(()=>{document.removeEventListener("mousemove",He),document.removeEventListener("mouseup",Le)}),{block:A,canvas:k,loadBlock:d,containerCls:b,sliderBox:x,refresh:tt,sliderDown:O,touchStartEvent:O,touchMoveEvent:He,touchEndEvent:Le}}}),wl=["width","height"],Cl=["width","height"],Sl={class:"slide-verify-slider-text"};function Tl(e,t,s,n,r,i){return kt(),Is("div",{id:"slideVerify",class:"slide-verify",style:ft({width:e.w+"px"}),onselectstart:"return false;"},[oe("div",{class:ut({"slider-verify-loading":e.loadBlock})},null,2),oe("canvas",{ref:"canvas",width:e.w,height:e.h},null,8,wl),e.show?(kt(),Is("div",{key:0,class:"slide-verify-refresh-icon",onClick:t[0]||(t[0]=(...o)=>e.refresh&&e.refresh(...o))},t[5]||(t[5]=[oe("i",{class:"iconfont icon-refresh"},null,-1)]))):Fo("",!0),oe("canvas",{ref:"block",width:e.w,height:e.h,class:"slide-verify-block"},null,8,Cl),oe("div",{class:ut(["slide-verify-slider",{"container-active":e.containerCls.containerActive,"container-success":e.containerCls.containerSuccess,"container-fail":e.containerCls.containerFail}])},[oe("div",{class:"slide-verify-slider-mask",style:ft({width:e.sliderBox.width})},[oe("div",{class:"slide-verify-slider-mask-item",style:ft({left:e.sliderBox.left}),onMousedown:t[1]||(t[1]=(...o)=>e.sliderDown&&e.sliderDown(...o)),onTouchstart:t[2]||(t[2]=(...o)=>e.touchStartEvent&&e.touchStartEvent(...o)),onTouchmove:t[3]||(t[3]=(...o)=>e.touchMoveEvent&&e.touchMoveEvent(...o)),onTouchend:t[4]||(t[4]=(...o)=>e.touchEndEvent&&e.touchEndEvent(...o))},[oe("i",{class:ut(["slide-verify-slider-mask-item-icon","iconfont",`icon-${e.sliderBox.iconCls}`])},null,2)],36)],4),oe("span",Sl,Hs(e.sliderText),1)],2)],4)}var El=jr(xl,[["render",Tl],["__scopeId","data-v-f61c42f2"]]),Al="./assets/img.b6b220bc.jpg",Ol="./assets/img1.182c2f76.jpg",Il="./assets/img2.3217378f.jpg",Ml="./assets/img3.5b97d210.jpg",Pl="./assets/img4.708137a5.jpg",Rl="./assets/img5.96696b7b.jpg";const Fl=cr({components:{SlideVerify:El},setup(){const e=de(""),t=de();return{block:t,msg:e,text:"\u5411\u53F3\u6ED1\u52A8->",accuracy:1,imgs:[Al,Ol,Il,Ml,Pl,Rl],onAgain:()=>{var u;e.value="\u68C0\u6D4B\u5230\u975E\u4EBA\u4E3A\u64CD\u4F5C\u7684\u54E6\uFF01 try again",(u=t.value)==null||u.refresh()},onSuccess:u=>{e.value=`login success, \u8017\u65F6${(u/1e3).toFixed(1)}s`},onFail:()=>{e.value="\u9A8C\u8BC1\u4E0D\u901A\u8FC7"},onRefresh:()=>{e.value="\u6ED1\u5757\u91CD\u7F6E\u4E86"},handleClick:()=>{var u;(u=t.value)==null||u.refresh(),e.value=""}}}});function Dl(e,t,s,n,r,i){const o=Gi("slide-verify");return kt(),Is("div",null,[t[1]||(t[1]=oe("h1",null,"Vue3 + Typescript Slide Verify",-1)),Ie(o,{ref:"block",imgs:e.imgs,"slider-text":e.text,accuracy:e.accuracy,onAgain:e.onAgain,onSuccess:e.onSuccess,onFail:e.onFail,onRefresh:e.onRefresh},null,8,["imgs","slider-text","accuracy","onAgain","onSuccess","onFail","onRefresh"]),oe("button",{class:"btn",onClick:t[0]||(t[0]=(...l)=>e.handleClick&&e.handleClick(...l))},"\u5728\u7236\u7EC4\u4EF6\u53EF\u4EE5\u70B9\u6211\u5237\u65B0\u54E6"),oe("div",null,Hs(e.msg),1)])}var Nl=jr(Fl,[["render",Dl],["__scopeId","data-v-44860bb2"]]);pl(Nl).mount("#app"); 18 | -------------------------------------------------------------------------------- /docs/assets/index.c96c421c.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:iconfont;src:url(data:font/ttf;base64,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) format("truetype")}.iconfont[data-v-f61c42f2]{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-fail[data-v-f61c42f2]:before{content:"\e6d5"}.icon-success[data-v-f61c42f2]:before{content:"\eb09"}.icon-arrow-right[data-v-f61c42f2]:before{content:"\eb08"}.icon-refresh[data-v-f61c42f2]:before{content:"\e654"}.slide-verify[data-v-f61c42f2]{position:relative}.slide-verify-loading[data-v-f61c42f2]{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(255,255,255,.9);z-index:999;animation:loading-f61c42f2 1.5s infinite}.slide-verify-block[data-v-f61c42f2]{position:absolute;left:0;top:0}.slide-verify-refresh-icon[data-v-f61c42f2]{position:absolute;right:0;top:0;width:34px;height:34px;cursor:pointer}.slide-verify-refresh-icon .iconfont[data-v-f61c42f2]{font-size:34px;color:#fff}.slide-verify-slider[data-v-f61c42f2]{position:relative;text-align:center;width:100%;height:40px;line-height:40px;margin-top:15px;background:#f7f9fa;color:#45494c;border:1px solid #e4e7eb}.slide-verify-slider-mask[data-v-f61c42f2]{position:absolute;left:0;top:0;height:40px;border:0 solid #1991fa;background:#d1e9fe}.slide-verify-slider-mask-item[data-v-f61c42f2]{position:absolute;left:0;top:0;width:40px;height:40px;background:#fff;box-shadow:0 0 3px #0000004d;cursor:pointer;transition:background .2s linear;display:flex;align-items:center;justify-content:center}.slide-verify-slider-mask-item[data-v-f61c42f2]:hover{background:#1991fa}.slide-verify-slider-mask-item:hover .iconfont[data-v-f61c42f2]{color:#fff}.slide-verify-slider-mask-item-icon[data-v-f61c42f2]{line-height:1;font-size:30px;color:#303030}.container-active .slide-verify-slider-mask[data-v-f61c42f2]{height:38px;border-width:1px}.container-active .slide-verify-slider-mask-item[data-v-f61c42f2]{height:38px;top:-1px;border:1px solid #1991fa}.container-success .slide-verify-slider-mask[data-v-f61c42f2]{height:38px;border:1px solid #52ccba;background-color:#d2f4ef}.container-success .slide-verify-slider-mask-item[data-v-f61c42f2]{height:38px;top:-1px;border:1px solid #52ccba;background-color:#52ccba!important}.container-success .slide-verify-slider-mask .iconfont[data-v-f61c42f2]{color:#fff}.container-fail .slide-verify-slider-mask[data-v-f61c42f2]{height:38px;border:1px solid #f57a7a;background-color:#fce1e1}.container-fail .slide-verify-slider-mask-item[data-v-f61c42f2]{height:38px;top:-1px;border:1px solid #f57a7a;background-color:#f57a7a!important}.container-fail .slide-verify-slider-mask .iconfont[data-v-f61c42f2]{color:#fff}.container-active .slide-verify-slider-text[data-v-f61c42f2],.container-success .slide-verify-slider-text[data-v-f61c42f2],.container-fail .slide-verify-slider-text[data-v-f61c42f2]{display:none}@keyframes loading-f61c42f2{0%{opacity:.7}to{opacity:9}}.btn[data-v-44860bb2]{margin-top:20px;outline:0;border:none;padding:8px 15px;border-radius:5px;color:#fff;background-color:#1890ff;cursor:pointer}.btn[data-v-44860bb2]:active{box-shadow:1px 5px #0000001a inset} 2 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue3-slide-verify 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import { DefineComponent, ComponentPublicInstance } from "vue"; 2 | 3 | export declare type SlideVerifyProps = { 4 | l: number; 5 | r: number; 6 | w: number; 7 | h: number; 8 | sliderText: string; 9 | accuracy: number; 10 | show: boolean; 11 | imgs: any[]; 12 | }; 13 | 14 | export declare type SlideVerifyEmits = { 15 | success: (timestamp: number) => void; 16 | again: () => void; 17 | fail: () => void; 18 | refresh: () => void; 19 | fulfilled: () => void; 20 | }; 21 | 22 | export declare type RawBindings = { 23 | refresh: () => void; 24 | }; 25 | 26 | export declare type SlideVerify = DefineComponent; 27 | 28 | export declare type SlideVerifyInstance = InstanceType; 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue3-slide-verify 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-slide-verify", 3 | "version": "1.1.7", 4 | "license": "MIT", 5 | "description": "vue3 slide verify", 6 | "author": "yuqian ", 7 | "main": "./dist/vue3-slide-verify.umd.js", 8 | "module": "./dist/vue3-slide-verify.es.js", 9 | "exports": { 10 | ".": { 11 | "import": "./dist/vue3-slide-verify.es.js", 12 | "require": "./dist/vue3-slide-verify.umd.js", 13 | "types": "./index.d.ts" 14 | }, 15 | "./dist/style.css": { 16 | "import": "./dist/style.css", 17 | "require": "./dist/style.css" 18 | } 19 | }, 20 | "types": "./index.d.ts", 21 | "files": [ 22 | "README.md", 23 | "dist", 24 | "index.d.ts" 25 | ], 26 | "scripts": { 27 | "dev": "vite", 28 | "build": "vite build", 29 | "preview": "vite preview", 30 | "prettier": "prettier --write .", 31 | "prepare": "husky install" 32 | }, 33 | "keywords": [ 34 | "vue3", 35 | "typescript", 36 | "slider", 37 | "verify" 38 | ], 39 | "husky": { 40 | "hooks": { 41 | "pre-commit": "lint-staged" 42 | } 43 | }, 44 | "lint-staged": { 45 | "src/**/*.{jsx,tsx,ts,js}": [ 46 | "prettier --config .prettierrc --write", 47 | "eslint --fix" 48 | ] 49 | }, 50 | "dependencies": { 51 | "vue": "^3.2.25" 52 | }, 53 | "devDependencies": { 54 | "@commitlint/cli": "^15.0.0", 55 | "@commitlint/config-conventional": "^15.0.0", 56 | "@types/node": "^16.11.12", 57 | "@typescript-eslint/eslint-plugin": "^5.7.0", 58 | "@typescript-eslint/parser": "^5.7.0", 59 | "@vitejs/plugin-vue": "^2.0.0", 60 | "eslint": "^7.32.0", 61 | "eslint-config-prettier": "^8.3.0", 62 | "eslint-config-standard": "^16.0.3", 63 | "eslint-plugin-html": "^6.2.0", 64 | "eslint-plugin-import": "^2.25.3", 65 | "eslint-plugin-node": "^11.1.0", 66 | "eslint-plugin-prettier": "^4.0.0", 67 | "eslint-plugin-promise": "^5.2.0", 68 | "eslint-plugin-vue": "^8.2.0", 69 | "husky": "^7.0.0", 70 | "less": "^4.1.2", 71 | "less-loader": "^10.2.0", 72 | "lint-staged": "^12.1.2", 73 | "prettier": "^2.5.1", 74 | "typescript": "^4.4.4", 75 | "vite": "^2.7.1", 76 | "vue-tsc": "^0.29.8" 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 77 | 78 | 93 | -------------------------------------------------------------------------------- /src/assets/669653069.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/669653069.jpg -------------------------------------------------------------------------------- /src/assets/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 3015018 */ 3 | src: url('iconfont.ttf?t=1639466613974') format('truetype'); 4 | } 5 | 6 | .iconfont { 7 | font-family: "iconfont" !important; 8 | font-size: 16px; 9 | font-style: normal; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | .icon-fail:before { 15 | content: "\e6d5"; 16 | } 17 | 18 | .icon-success:before { 19 | content: "\eb09"; 20 | } 21 | 22 | .icon-arrow-right:before { 23 | content: "\eb08"; 24 | } 25 | 26 | .icon-refresh:before { 27 | content: "\e654"; 28 | } 29 | 30 | -------------------------------------------------------------------------------- /src/assets/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/img.jpg -------------------------------------------------------------------------------- /src/assets/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/img1.jpg -------------------------------------------------------------------------------- /src/assets/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/img2.jpg -------------------------------------------------------------------------------- /src/assets/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/img3.jpg -------------------------------------------------------------------------------- /src/assets/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/img4.jpg -------------------------------------------------------------------------------- /src/assets/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monoplasty/vue3-slide-verify/07a4a82cd71caeb0e376e95f4268a56a0c5fef98/src/assets/img5.jpg -------------------------------------------------------------------------------- /src/components/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import { reactive, ref } from "vue"; 2 | import { sum, square } from "../util"; 3 | 4 | export function useSlideAction() { 5 | const origin = reactive({ 6 | x: 0, 7 | y: 0, 8 | }); 9 | 10 | const success = ref(false); 11 | const isMouseDown = ref(false); 12 | const timestamp = ref(0); 13 | const trail = ref([]); 14 | 15 | const start = (e: MouseEvent | TouchEvent) => { 16 | if (success.value) return; 17 | if (e instanceof MouseEvent) { 18 | origin.x = e.clientX; 19 | origin.y = e.clientY; 20 | } else { 21 | origin.x = e.changedTouches[0].pageX; 22 | origin.y = e.changedTouches[0].pageY; 23 | } 24 | isMouseDown.value = true; 25 | timestamp.value = Date.now(); 26 | }; 27 | 28 | const move = (w: number, e: MouseEvent | TouchEvent, cb: (moveX: number) => void) => { 29 | if (!isMouseDown.value) return false; 30 | let moveX = 0; 31 | let moveY = 0; 32 | if (e instanceof MouseEvent) { 33 | moveX = e.clientX - origin.x; 34 | moveY = e.clientY - origin.y; 35 | } else { 36 | moveX = e.changedTouches[0].pageX - origin.x; 37 | moveY = e.changedTouches[0].pageY - origin.y; 38 | } 39 | if (moveX < 0 || moveX + 38 >= w) return false; 40 | cb(moveX); 41 | trail.value.push(moveY); 42 | }; 43 | 44 | /** 45 | * 46 | * @param left : block.style.left; 47 | * @param blockX 48 | * @param accuracy 49 | * @returns 50 | */ 51 | const verify = (left: string, blockX: number, accuracy: number) => { 52 | const arr = trail.value; // drag y move distance 53 | const average = arr.reduce(sum) / arr.length; // average 54 | const deviations = arr.map((x) => x - average); // deviation array 55 | const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation 56 | const leftNum = parseInt(left); 57 | accuracy = accuracy <= 1 ? 1 : accuracy > 10 ? 10 : accuracy; 58 | return { 59 | spliced: Math.abs(leftNum - blockX) <= accuracy, 60 | TuringTest: average !== stddev, // equal => not person operate 61 | }; 62 | }; 63 | 64 | const end = (e: MouseEvent | TouchEvent, cb: (timestamp: number) => void) => { 65 | if (!isMouseDown.value) return false; 66 | isMouseDown.value = false; 67 | const moveX = e instanceof MouseEvent ? e.clientX : e.changedTouches[0].pageX; 68 | if (moveX === origin.x) return false; 69 | timestamp.value = Date.now() - timestamp.value; 70 | 71 | cb(timestamp.value); 72 | }; 73 | 74 | return { origin, success, isMouseDown, timestamp, trail, start, move, end, verify }; 75 | } 76 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | import SlideVerify from "./slide-verify.vue"; 2 | 3 | export type SlideVerifyInstance = InstanceType; 4 | 5 | export default SlideVerify; 6 | -------------------------------------------------------------------------------- /src/components/slide-verify.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 237 | 238 | 370 | -------------------------------------------------------------------------------- /src/components/util.ts: -------------------------------------------------------------------------------- 1 | export const PI = Math.PI; 2 | 3 | export function sum(x: number, y: number) { 4 | return x + y; 5 | } 6 | 7 | export function square(x: number) { 8 | return x * x; 9 | } 10 | 11 | export function draw( 12 | ctx: CanvasRenderingContext2D, 13 | x: number, 14 | y: number, 15 | l: number, 16 | r: number, 17 | operation: "fill" | "clip", 18 | ) { 19 | ctx.beginPath(); 20 | ctx.moveTo(x, y); 21 | ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI); 22 | ctx.lineTo(x + l, y); 23 | ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI); 24 | ctx.lineTo(x + l, y + l); 25 | ctx.lineTo(x, y + l); 26 | ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true); 27 | ctx.lineTo(x, y); 28 | ctx.lineWidth = 2; 29 | ctx.fillStyle = "rgba(255, 255, 255, 0.7)"; 30 | ctx.strokeStyle = "rgba(255, 255, 255, 0.7)"; 31 | ctx.stroke(); 32 | ctx[operation](); 33 | ctx.globalCompositeOperation = "destination-over"; 34 | // ctx.globalCompositeOperation = "xor"; // 卡片不出来是可切换 35 | } 36 | 37 | export function createImg(imgs: any[], onload: () => void) { 38 | const img = document.createElement("img"); 39 | img.crossOrigin = "Anonymous"; 40 | img.onload = onload; 41 | img.onerror = () => { 42 | img.src = getRandomImg(imgs); 43 | }; 44 | img.src = getRandomImg(imgs); 45 | return img; 46 | } 47 | 48 | export function getRandomNumberByRange(start: number, end: number) { 49 | return Math.round(Math.random() * (end - start) + start); 50 | } 51 | 52 | // 随机生成img src 53 | export function getRandomImg(imgs: string[]) { 54 | const len = imgs.length; 55 | return len > 0 56 | ? imgs[getRandomNumberByRange(0, len - 1)] 57 | : "https://picsum.photos/300/150?image=" + getRandomNumberByRange(0, 1084); 58 | // "https://source.unsplash.com/300x150/?book,library"; 59 | } 60 | 61 | type optType = { 62 | leading?: boolean; 63 | trailing?: boolean; 64 | resultCallback?: (res: any) => void; 65 | }; 66 | 67 | /** 68 | * 节流函数 69 | * @param fn 回调 70 | * @param interval 时间间隔 71 | * @param options 头节流，尾节流 72 | * @returns function 73 | */ 74 | export function throttle( 75 | fn: (args: any) => any, 76 | interval: number, 77 | options: optType = { leading: true, trailing: true }, 78 | ) { 79 | const { leading, trailing, resultCallback } = options; 80 | let lastTime = 0; 81 | let timer: NodeJS.Timeout | null = null; 82 | 83 | const _throttle = function (this: any, ...args: any) { 84 | return new Promise((resolve, reject) => { 85 | const nowTime = new Date().getTime(); 86 | if (!lastTime && !leading) lastTime = nowTime; 87 | 88 | const remainTime = interval - (nowTime - lastTime); 89 | if (remainTime <= 0) { 90 | if (timer) { 91 | clearTimeout(timer); 92 | timer = null; 93 | } 94 | 95 | const result = fn.apply(this, args); 96 | if (resultCallback) resultCallback(result); 97 | resolve(result); 98 | lastTime = nowTime; 99 | return; 100 | } 101 | 102 | if (trailing && !timer) { 103 | timer = setTimeout(() => { 104 | timer = null; 105 | lastTime = !leading ? 0 : new Date().getTime(); 106 | const result = fn.apply(this, args); 107 | if (resultCallback) resultCallback(result); 108 | resolve(result); 109 | }, remainTime); 110 | } 111 | }); 112 | }; 113 | 114 | _throttle.cancel = function () { 115 | if (timer) clearTimeout(timer); 116 | timer = null; 117 | lastTime = 0; 118 | }; 119 | 120 | return _throttle; 121 | } 122 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module "*.vue" { 4 | import { DefineComponent } from "vue"; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any>; 7 | export default component; 8 | } 9 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | createApp(App).mount("#app"); 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"], 14 | "baseUrl": ".", 15 | "paths": { 16 | "@/*": ["src/*"] 17 | } 18 | }, 19 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "index.d.ts"], 20 | "exclude": ["node_modules", "dist", "test"] 21 | } 22 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import path from "path"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue()], 8 | resolve: { 9 | alias: { 10 | "@": path.resolve(__dirname, "/src"), 11 | }, 12 | }, 13 | // 发布GitHub pages 是打开 14 | // base: "./", 15 | // build: { 16 | // outDir: "docs", 17 | // }, 18 | // 发布npm包时 19 | build: { 20 | lib: { 21 | entry: path.resolve(__dirname, "src/components/index.ts"), 22 | name: "vue3SlideVerify", 23 | fileName: (format) => `vue3-slide-verify.${format}.js`, 24 | }, 25 | rollupOptions: { 26 | // 确保外部化处理那些你不想打包进库的依赖 27 | external: ["vue"], 28 | output: { 29 | // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 30 | globals: { 31 | vue: "Vue", 32 | }, 33 | }, 34 | }, 35 | }, 36 | }); 37 | --------------------------------------------------------------------------------