xingyuv
2 years ago
45 changed files with 1539 additions and 1456 deletions
@ -1,8 +1,15 @@ |
|||||||
# 端口号 |
# 端口号 |
||||||
VITE_PORT = 3100 |
VITE_PORT = 80 |
||||||
|
|
||||||
# 网站标题 |
# 网站标题 |
||||||
VITE_GLOB_APP_TITLE = Vben Admin |
VITE_GLOB_APP_TITLE = 芋道管理系统 |
||||||
|
|
||||||
# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符 |
# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符 |
||||||
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin |
VITE_GLOB_APP_SHORT_NAME = Vben |
||||||
|
|
||||||
|
# 租户开关 |
||||||
|
VITE_GLOB_APP_TENANT_ENABLE = true |
||||||
|
|
||||||
|
# 验证码的开关 |
||||||
|
VITE_GLOB_APP_CAPTCHA_ENABLE = true |
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,24 @@ |
|||||||
|
# 本地开发环境 |
||||||
|
NODE_ENV=development |
||||||
|
|
||||||
|
# 资源公共路径,需要以 /开头和结尾 |
||||||
|
VITE_PUBLIC_PATH = / |
||||||
|
|
||||||
|
# 本地开发代理，可以解决跨域及多地址代理 |
||||||
|
# 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题 |
||||||
|
# 可以有多个，注意多个不能换行，否则代理将会失效 |
||||||
|
VITE_PROXY = [["/dev-api","http://api-dashboard.yudao.iocoder.cn"],["/upload","http://api-dashboard.yudao.iocoder.cn/admin-api/infra/file/upload"]] |
||||||
|
# VITE_PROXY=[["/api","http://vben.xingyuv.com/test"]] |
||||||
|
|
||||||
|
# 是否删除Console.log |
||||||
|
VITE_DROP_CONSOLE = false |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
# 如果没有跨域问题，直接在这里配置即可 |
||||||
|
VITE_GLOB_API_URL = "http://localhost:48080/admin-api" |
||||||
|
|
||||||
|
# 文件上传接口 可选 |
||||||
|
VITE_GLOB_UPLOAD_URL = /upload |
||||||
|
|
||||||
|
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换 |
||||||
|
VITE_GLOB_API_URL_PREFIX = |
||||||
@ -1,4 +0,0 @@ |
|||||||
import { withInstall } from '@/utils' |
|
||||||
import flowChart from './src/FlowChart.vue' |
|
||||||
|
|
||||||
export const FlowChart = withInstall(flowChart) |
|
||||||
@ -1,142 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="h-full" :class="prefixCls"> |
|
||||||
<FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" /> |
|
||||||
<div ref="lfElRef" class="h-full"></div> |
|
||||||
<BasicModal @register="register" title="流程数据" width="50%"> |
|
||||||
<JsonPreview :data="graphData" /> |
|
||||||
</BasicModal> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup name="FlowChart"> |
|
||||||
import type { Ref } from 'vue' |
|
||||||
import { computed, nextTick, onMounted, ref, unref, watch } from 'vue' |
|
||||||
import type { Definition } from '@logicflow/core' |
|
||||||
import LogicFlow from '@logicflow/core' |
|
||||||
import FlowChartToolbar from './FlowChartToolbar.vue' |
|
||||||
import { BpmnElement, DndPanel, Menu, SelectionSelect, Snapshot } from '@logicflow/extension' |
|
||||||
import { useDesign } from '@/hooks/web/useDesign' |
|
||||||
import { useAppStore } from '@/store/modules/app' |
|
||||||
import { createFlowChartContext } from './useFlowContext' |
|
||||||
import { toLogicFlowData } from './adpterForTurbo' |
|
||||||
import { BasicModal, useModal } from '@/components/Modal' |
|
||||||
import { JsonPreview } from '@/components/CodeEditor' |
|
||||||
import { configDefaultDndPanel } from './config' |
|
||||||
import '@logicflow/core/dist/style/index.css' |
|
||||||
import '@logicflow/extension/lib/style/index.css' |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
flowOptions: { |
|
||||||
type: Object as PropType<Definition>, |
|
||||||
default: () => ({}) |
|
||||||
}, |
|
||||||
data: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
default: () => ({}) |
|
||||||
}, |
|
||||||
toolbar: { |
|
||||||
type: Boolean, |
|
||||||
default: true |
|
||||||
}, |
|
||||||
patternItems: { |
|
||||||
type: Array |
|
||||||
} |
|
||||||
}) |
|
||||||
const lfElRef = ref(null) |
|
||||||
const graphData = ref({}) |
|
||||||
|
|
||||||
const lfInstance = ref(null) as Ref<LogicFlow | null> |
|
||||||
|
|
||||||
const { prefixCls } = useDesign('flow-chart') |
|
||||||
const appStore = useAppStore() |
|
||||||
const [register, { openModal }] = useModal() |
|
||||||
createFlowChartContext({ |
|
||||||
logicFlow: lfInstance as unknown as LogicFlow |
|
||||||
}) |
|
||||||
|
|
||||||
const getFlowOptions = computed(() => { |
|
||||||
const { flowOptions } = props |
|
||||||
|
|
||||||
const defaultOptions: Partial<Definition> = { |
|
||||||
grid: true, |
|
||||||
background: { |
|
||||||
color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515' |
|
||||||
}, |
|
||||||
keyboard: { |
|
||||||
enabled: true |
|
||||||
}, |
|
||||||
...flowOptions |
|
||||||
} |
|
||||||
return defaultOptions as Definition |
|
||||||
}) |
|
||||||
|
|
||||||
watch( |
|
||||||
() => props.data, |
|
||||||
() => { |
|
||||||
onRender() |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
// TODO |
|
||||||
// watch( |
|
||||||
// () => appStore.getDarkMode, |
|
||||||
// () => { |
|
||||||
// init(); |
|
||||||
// } |
|
||||||
// ); |
|
||||||
|
|
||||||
watch( |
|
||||||
() => unref(getFlowOptions), |
|
||||||
(options) => { |
|
||||||
unref(lfInstance)?.updateEditConfig(options) |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
// init logicFlow |
|
||||||
async function init() { |
|
||||||
await nextTick() |
|
||||||
|
|
||||||
const lfEl = unref(lfElRef) |
|
||||||
if (!lfEl) { |
|
||||||
return |
|
||||||
} |
|
||||||
LogicFlow.use(DndPanel) |
|
||||||
|
|
||||||
// Canvas configuration |
|
||||||
LogicFlow.use(Snapshot) |
|
||||||
// Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo |
|
||||||
LogicFlow.use(BpmnElement) |
|
||||||
// Start the right-click menu |
|
||||||
LogicFlow.use(Menu) |
|
||||||
LogicFlow.use(SelectionSelect) |
|
||||||
|
|
||||||
lfInstance.value = new LogicFlow({ |
|
||||||
...unref(getFlowOptions), |
|
||||||
container: lfEl |
|
||||||
}) |
|
||||||
const lf = unref(lfInstance)! |
|
||||||
lf?.setDefaultEdgeType('line') |
|
||||||
await onRender() |
|
||||||
lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf)) |
|
||||||
} |
|
||||||
|
|
||||||
async function onRender() { |
|
||||||
await nextTick() |
|
||||||
const lf = unref(lfInstance) |
|
||||||
if (!lf) { |
|
||||||
return |
|
||||||
} |
|
||||||
const lFData = toLogicFlowData(props.data) |
|
||||||
lf.render(lFData) |
|
||||||
} |
|
||||||
|
|
||||||
function handlePreview() { |
|
||||||
const lf = unref(lfInstance) |
|
||||||
if (!lf) { |
|
||||||
return |
|
||||||
} |
|
||||||
graphData.value = unref(lf).getGraphData() |
|
||||||
openModal() |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(init) |
|
||||||
</script> |
|
||||||
@ -1,153 +0,0 @@ |
|||||||
<template> |
|
||||||
<div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1"> |
|
||||||
<template v-for="item in toolbarItemList" :key="item.type"> |
|
||||||
<Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}"> |
|
||||||
<template #title>{{ item.tooltip }}</template> |
|
||||||
<span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)"> |
|
||||||
<Icon :icon="item.icon" :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'" /> |
|
||||||
</span> |
|
||||||
</Tooltip> |
|
||||||
<Divider v-if="item.separate" type="vertical" /> |
|
||||||
</template> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup name="FlowChartToolbar"> |
|
||||||
import type { ToolbarConfig } from './types' |
|
||||||
|
|
||||||
import { nextTick, onUnmounted, ref, unref, watchEffect } from 'vue' |
|
||||||
import { Divider, Tooltip } from 'ant-design-vue' |
|
||||||
import { Icon } from '@/components/Icon' |
|
||||||
|
|
||||||
import { useFlowChartContext } from './useFlowContext' |
|
||||||
import { ToolbarTypeEnum } from './enum' |
|
||||||
|
|
||||||
defineProps({ |
|
||||||
prefixCls: String |
|
||||||
}) |
|
||||||
const emit = defineEmits(['view-data']) |
|
||||||
const toolbarItemList = ref<ToolbarConfig[]>([ |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.ZOOM_IN, |
|
||||||
icon: 'codicon:zoom-out', |
|
||||||
tooltip: '缩小' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.ZOOM_OUT, |
|
||||||
icon: 'codicon:zoom-in', |
|
||||||
tooltip: '放大' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.RESET_ZOOM, |
|
||||||
icon: 'codicon:screen-normal', |
|
||||||
tooltip: '重置比例' |
|
||||||
}, |
|
||||||
{ separate: true }, |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.UNDO, |
|
||||||
icon: 'ion:arrow-undo-outline', |
|
||||||
tooltip: '后退', |
|
||||||
disabled: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.REDO, |
|
||||||
icon: 'ion:arrow-redo-outline', |
|
||||||
tooltip: '前进', |
|
||||||
disabled: true |
|
||||||
}, |
|
||||||
{ separate: true }, |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.SNAPSHOT, |
|
||||||
icon: 'ion:download-outline', |
|
||||||
tooltip: '下载' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: ToolbarTypeEnum.VIEW_DATA, |
|
||||||
icon: 'carbon:document-view', |
|
||||||
tooltip: '查看数据' |
|
||||||
} |
|
||||||
]) |
|
||||||
|
|
||||||
const { logicFlow } = useFlowChartContext() |
|
||||||
|
|
||||||
function onHistoryChange({ data: { undoAble, redoAble } }) { |
|
||||||
const itemsList = unref(toolbarItemList) |
|
||||||
const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO) |
|
||||||
const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO) |
|
||||||
if (undoIndex !== -1) { |
|
||||||
unref(toolbarItemList)[undoIndex].disabled = !undoAble |
|
||||||
} |
|
||||||
if (redoIndex !== -1) { |
|
||||||
unref(toolbarItemList)[redoIndex].disabled = !redoAble |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const onControl = (item) => { |
|
||||||
const lf = unref(logicFlow) |
|
||||||
if (!lf) { |
|
||||||
return |
|
||||||
} |
|
||||||
switch (item.type) { |
|
||||||
case ToolbarTypeEnum.ZOOM_IN: |
|
||||||
lf.zoom() |
|
||||||
break |
|
||||||
case ToolbarTypeEnum.ZOOM_OUT: |
|
||||||
lf.zoom(true) |
|
||||||
break |
|
||||||
case ToolbarTypeEnum.RESET_ZOOM: |
|
||||||
lf.resetZoom() |
|
||||||
break |
|
||||||
case ToolbarTypeEnum.UNDO: |
|
||||||
lf.undo() |
|
||||||
break |
|
||||||
case ToolbarTypeEnum.REDO: |
|
||||||
lf.redo() |
|
||||||
break |
|
||||||
case ToolbarTypeEnum.SNAPSHOT: |
|
||||||
lf.getSnapshot() |
|
||||||
break |
|
||||||
case ToolbarTypeEnum.VIEW_DATA: |
|
||||||
emit('view-data') |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
watchEffect(async () => { |
|
||||||
if (unref(logicFlow)) { |
|
||||||
await nextTick() |
|
||||||
unref(logicFlow)?.on('history:change', onHistoryChange) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
onUnmounted(() => { |
|
||||||
unref(logicFlow)?.off('history:change', onHistoryChange) |
|
||||||
}) |
|
||||||
</script> |
|
||||||
<style lang="less"> |
|
||||||
@prefix-cls: ~'@{namespace}-flow-chart-toolbar'; |
|
||||||
|
|
||||||
html[data-theme='dark'] { |
|
||||||
.lf-dnd { |
|
||||||
background: #080808; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.@{prefix-cls} { |
|
||||||
height: 36px; |
|
||||||
background-color: @app-content-background; |
|
||||||
border-bottom: 1px solid @border-color-base; |
|
||||||
|
|
||||||
.disabeld { |
|
||||||
color: @disabled-color; |
|
||||||
} |
|
||||||
|
|
||||||
&__icon { |
|
||||||
display: inline-block; |
|
||||||
padding: 2px 4px; |
|
||||||
margin-right: 10px; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: @primary-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,75 +0,0 @@ |
|||||||
const TurboType = { |
|
||||||
SEQUENCE_FLOW: 1, |
|
||||||
START_EVENT: 2, |
|
||||||
END_EVENT: 3, |
|
||||||
USER_TASK: 4, |
|
||||||
SERVICE_TASK: 5, |
|
||||||
EXCLUSIVE_GATEWAY: 6 |
|
||||||
} |
|
||||||
|
|
||||||
function convertFlowElementToEdge(element) { |
|
||||||
const { incoming, outgoing, properties, key } = element |
|
||||||
const { text, startPoint, endPoint, pointsList, logicFlowType } = properties |
|
||||||
const edge = { |
|
||||||
id: key, |
|
||||||
type: logicFlowType, |
|
||||||
sourceNodeId: incoming[0], |
|
||||||
targetNodeId: outgoing[0], |
|
||||||
text, |
|
||||||
startPoint, |
|
||||||
endPoint, |
|
||||||
pointsList, |
|
||||||
properties: {} |
|
||||||
} |
|
||||||
const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType'] |
|
||||||
Object.keys(element.properties).forEach((property) => { |
|
||||||
if (excludeProperties.indexOf(property) === -1) { |
|
||||||
edge.properties[property] = element.properties[property] |
|
||||||
} |
|
||||||
}) |
|
||||||
return edge |
|
||||||
} |
|
||||||
|
|
||||||
function convertFlowElementToNode(element) { |
|
||||||
const { properties, key } = element |
|
||||||
const { x, y, text, logicFlowType } = properties |
|
||||||
const node = { |
|
||||||
id: key, |
|
||||||
type: logicFlowType, |
|
||||||
x, |
|
||||||
y, |
|
||||||
text, |
|
||||||
properties: {} |
|
||||||
} |
|
||||||
const excludeProperties = ['x', 'y', 'text', 'logicFlowType'] |
|
||||||
Object.keys(element.properties).forEach((property) => { |
|
||||||
if (excludeProperties.indexOf(property) === -1) { |
|
||||||
node.properties[property] = element.properties[property] |
|
||||||
} |
|
||||||
}) |
|
||||||
return node |
|
||||||
} |
|
||||||
|
|
||||||
export function toLogicFlowData(data) { |
|
||||||
const lfData: { |
|
||||||
// TODO type
|
|
||||||
nodes: any[] |
|
||||||
edges: any[] |
|
||||||
} = { |
|
||||||
nodes: [], |
|
||||||
edges: [] |
|
||||||
} |
|
||||||
const list = data.flowElementList |
|
||||||
list && |
|
||||||
list.length > 0 && |
|
||||||
list.forEach((element) => { |
|
||||||
if (element.type === TurboType.SEQUENCE_FLOW) { |
|
||||||
const edge = convertFlowElementToEdge(element) |
|
||||||
lfData.edges.push(edge) |
|
||||||
} else { |
|
||||||
const node = convertFlowElementToNode(element) |
|
||||||
lfData.nodes.push(node) |
|
||||||
} |
|
||||||
}) |
|
||||||
return lfData |
|
||||||
} |
|
||||||
@ -1,96 +0,0 @@ |
|||||||
export const nodeList = [ |
|
||||||
{ |
|
||||||
text: '开始', |
|
||||||
type: 'start', |
|
||||||
class: 'node-start' |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '矩形', |
|
||||||
type: 'rect', |
|
||||||
class: 'node-rect' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'user', |
|
||||||
text: '用户', |
|
||||||
class: 'node-user' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'push', |
|
||||||
text: '推送', |
|
||||||
class: 'node-push' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'download', |
|
||||||
text: '位置', |
|
||||||
class: 'node-download' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'end', |
|
||||||
text: '结束', |
|
||||||
class: 'node-end' |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
export const BpmnNode = [ |
|
||||||
{ |
|
||||||
type: 'bpmn:startEvent', |
|
||||||
text: '开始', |
|
||||||
class: 'bpmn-start' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bpmn:endEvent', |
|
||||||
text: '结束', |
|
||||||
class: 'bpmn-end' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bpmn:exclusiveGateway', |
|
||||||
text: '网关', |
|
||||||
class: 'bpmn-exclusiveGateway' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bpmn:userTask', |
|
||||||
text: '用户', |
|
||||||
class: 'bpmn-user' |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
export function configDefaultDndPanel(lf) { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
text: '选区', |
|
||||||
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=', |
|
||||||
callback: () => { |
|
||||||
lf.updateEditConfig({ |
|
||||||
stopMoveGraph: true |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'circle', |
|
||||||
text: '开始', |
|
||||||
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'rect', |
|
||||||
text: '用户任务', |
|
||||||
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==', |
|
||||||
cls: 'important-node' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'rect', |
|
||||||
text: '系统任务', |
|
||||||
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==', |
|
||||||
cls: 'import_icon' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'diamond', |
|
||||||
text: '条件判断', |
|
||||||
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'circle', |
|
||||||
text: '结束', |
|
||||||
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC' |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
export enum ToolbarTypeEnum { |
|
||||||
ZOOM_IN = 'zoomIn', |
|
||||||
ZOOM_OUT = 'zoomOut', |
|
||||||
RESET_ZOOM = 'resetZoom', |
|
||||||
|
|
||||||
UNDO = 'undo', |
|
||||||
REDO = 'redo', |
|
||||||
|
|
||||||
SNAPSHOT = 'snapshot', |
|
||||||
VIEW_DATA = 'viewData' |
|
||||||
} |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
import { NodeConfig } from '@logicflow/core' |
|
||||||
import { ToolbarTypeEnum } from './enum' |
|
||||||
|
|
||||||
export interface NodeItem extends NodeConfig { |
|
||||||
icon: string |
|
||||||
} |
|
||||||
|
|
||||||
export interface ToolbarConfig { |
|
||||||
type?: string | ToolbarTypeEnum |
|
||||||
tooltip?: string | boolean |
|
||||||
icon?: string |
|
||||||
disabled?: boolean |
|
||||||
separate?: boolean |
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
import type LogicFlow from '@logicflow/core' |
|
||||||
|
|
||||||
import { provide, inject } from 'vue' |
|
||||||
|
|
||||||
const key = Symbol('flow-chart') |
|
||||||
|
|
||||||
type Instance = { |
|
||||||
logicFlow: LogicFlow |
|
||||||
} |
|
||||||
|
|
||||||
export function createFlowChartContext(instance: Instance) { |
|
||||||
provide(key, instance) |
|
||||||
} |
|
||||||
|
|
||||||
export function useFlowChartContext(): Instance { |
|
||||||
return inject(key) as Instance |
|
||||||
} |
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
import { withInstall } from '@/utils/index' |
||||||
|
import verify from './src/Verify.vue' |
||||||
|
|
||||||
|
export const Verify = withInstall(verify) |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,250 @@ |
|||||||
|
<template> |
||||||
|
<div style="position: relative"> |
||||||
|
<div class="verify-img-out"> |
||||||
|
<div |
||||||
|
class="verify-img-panel" |
||||||
|
:style="{ |
||||||
|
width: setSize.imgWidth, |
||||||
|
height: setSize.imgHeight, |
||||||
|
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight, |
||||||
|
'margin-bottom': vSpace + 'px' |
||||||
|
}" |
||||||
|
> |
||||||
|
<div class="verify-refresh" style="z-index: 3" @click="refresh" v-show="showRefresh"> |
||||||
|
<i class="iconfont icon-refresh"></i> |
||||||
|
</div> |
||||||
|
<img |
||||||
|
:src="'data:image/png;base64,' + pointBackImgBase" |
||||||
|
ref="canvas" |
||||||
|
alt="" |
||||||
|
style="width: 100%; height: 100%; display: block" |
||||||
|
@click="bindingClick ? canvasClick($event) : undefined" |
||||||
|
/> |
||||||
|
|
||||||
|
<div |
||||||
|
v-for="(tempPoint, index) in tempPoints" |
||||||
|
:key="index" |
||||||
|
class="point-area" |
||||||
|
:style="{ |
||||||
|
'background-color': '#1abd6c', |
||||||
|
color: '#fff', |
||||||
|
'z-index': 9999, |
||||||
|
width: '20px', |
||||||
|
height: '20px', |
||||||
|
'text-align': 'center', |
||||||
|
'line-height': '20px', |
||||||
|
'border-radius': '50%', |
||||||
|
position: 'absolute', |
||||||
|
top: parseInt(tempPoint.y - 10) + 'px', |
||||||
|
left: parseInt(tempPoint.x - 10) + 'px' |
||||||
|
}" |
||||||
|
> |
||||||
|
{{ index + 1 }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 'height': this.barSize.height, --> |
||||||
|
<div |
||||||
|
class="verify-bar-area" |
||||||
|
:style="{ |
||||||
|
width: setSize.imgWidth, |
||||||
|
color: barAreaColor, |
||||||
|
'border-color': barAreaBorderColor, |
||||||
|
'line-height': barSize.height |
||||||
|
}" |
||||||
|
> |
||||||
|
<span class="verify-msg">{{ text }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script type="text/babel" setup> |
||||||
|
/** |
||||||
|
* VerifyPoints |
||||||
|
* @description 点选 |
||||||
|
* */ |
||||||
|
import { resetSize } from './../utils/util' |
||||||
|
import { aesEncrypt } from './../utils/ase' |
||||||
|
import { getCaptcha, checkCaptcha } from '@/api/base/login' |
||||||
|
import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue' |
||||||
|
import { useI18n } from '@/hooks/web/useI18n' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
//弹出式pop，固定fixed |
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: 'fixed' |
||||||
|
}, |
||||||
|
captchaType: { |
||||||
|
type: String |
||||||
|
}, |
||||||
|
//间隔 |
||||||
|
vSpace: { |
||||||
|
type: Number, |
||||||
|
default: 5 |
||||||
|
}, |
||||||
|
imgSize: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return { |
||||||
|
width: '310px', |
||||||
|
height: '155px' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
barSize: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return { |
||||||
|
width: '310px', |
||||||
|
height: '40px' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
const { mode, captchaType } = toRefs(props) |
||||||
|
const { proxy } = getCurrentInstance() |
||||||
|
let secretKey = ref(''), //后端返回的ase加密秘钥 |
||||||
|
checkNum = ref(3), //默认需要点击的字数 |
||||||
|
fontPos = reactive([]), //选中的坐标信息 |
||||||
|
checkPosArr = reactive([]), //用户点击的坐标 |
||||||
|
num = ref(1), //点击的记数 |
||||||
|
pointBackImgBase = ref(''), //后端获取到的背景图片 |
||||||
|
poinTextList = reactive([]), //后端返回的点击字体顺序 |
||||||
|
backToken = ref(''), //后端返回的token值 |
||||||
|
setSize = reactive({ |
||||||
|
imgHeight: 0, |
||||||
|
imgWidth: 0, |
||||||
|
barHeight: 0, |
||||||
|
barWidth: 0 |
||||||
|
}), |
||||||
|
tempPoints = reactive([]), |
||||||
|
text = ref(''), |
||||||
|
barAreaColor = ref(undefined), |
||||||
|
barAreaBorderColor = ref(undefined), |
||||||
|
showRefresh = ref(true), |
||||||
|
bindingClick = ref(true) |
||||||
|
|
||||||
|
const init = () => { |
||||||
|
//加载页面 |
||||||
|
fontPos.splice(0, fontPos.length) |
||||||
|
checkPosArr.splice(0, checkPosArr.length) |
||||||
|
num.value = 1 |
||||||
|
getPictrue() |
||||||
|
nextTick(() => { |
||||||
|
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy) |
||||||
|
setSize.imgHeight = imgHeight |
||||||
|
setSize.imgWidth = imgWidth |
||||||
|
setSize.barHeight = barHeight |
||||||
|
setSize.barWidth = barWidth |
||||||
|
proxy.$parent.$emit('ready', proxy) |
||||||
|
}) |
||||||
|
} |
||||||
|
onMounted(() => { |
||||||
|
// 禁止拖拽 |
||||||
|
init() |
||||||
|
proxy.$el.onselectstart = function () { |
||||||
|
return false |
||||||
|
} |
||||||
|
}) |
||||||
|
const canvas = ref(null) |
||||||
|
const canvasClick = (e) => { |
||||||
|
checkPosArr.push(getMousePos(canvas, e)) |
||||||
|
if (num.value == checkNum.value) { |
||||||
|
num.value = createPoint(getMousePos(canvas, e)) |
||||||
|
//按比例转换坐标值 |
||||||
|
let arr = pointTransfrom(checkPosArr, setSize) |
||||||
|
checkPosArr.length = 0 |
||||||
|
checkPosArr.push(...arr) |
||||||
|
//等创建坐标执行完 |
||||||
|
setTimeout(() => { |
||||||
|
// var flag = this.comparePos(this.fontPos, this.checkPosArr); |
||||||
|
//发送后端请求 |
||||||
|
var captchaVerification = secretKey.value |
||||||
|
? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value) |
||||||
|
: backToken.value + '---' + JSON.stringify(checkPosArr) |
||||||
|
let data = { |
||||||
|
captchaType: captchaType.value, |
||||||
|
pointJson: secretKey.value ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value) : JSON.stringify(checkPosArr), |
||||||
|
token: backToken.value |
||||||
|
} |
||||||
|
checkCaptcha(data).then((response) => { |
||||||
|
const res = response.data |
||||||
|
if (res.repCode == '0000') { |
||||||
|
barAreaColor.value = '#4cae4c' |
||||||
|
barAreaBorderColor.value = '#5cb85c' |
||||||
|
text.value = t('component.captcha.success') |
||||||
|
bindingClick.value = false |
||||||
|
if (mode.value == 'pop') { |
||||||
|
setTimeout(() => { |
||||||
|
proxy.$parent.clickShow = false |
||||||
|
refresh() |
||||||
|
}, 1500) |
||||||
|
} |
||||||
|
proxy.$parent.$emit('success', { captchaVerification }) |
||||||
|
} else { |
||||||
|
proxy.$parent.$emit('error', proxy) |
||||||
|
barAreaColor.value = '#d9534f' |
||||||
|
barAreaBorderColor.value = '#d9534f' |
||||||
|
text.value = t('component.captcha.fail') |
||||||
|
setTimeout(() => { |
||||||
|
refresh() |
||||||
|
}, 700) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, 400) |
||||||
|
} |
||||||
|
if (num.value < checkNum.value) { |
||||||
|
num.value = createPoint(getMousePos(canvas, e)) |
||||||
|
} |
||||||
|
} |
||||||
|
//获取坐标 |
||||||
|
const getMousePos = function (obj, e) { |
||||||
|
var x = e.offsetX |
||||||
|
var y = e.offsetY |
||||||
|
return { x, y } |
||||||
|
} |
||||||
|
//创建坐标点 |
||||||
|
const createPoint = function (pos) { |
||||||
|
tempPoints.push(Object.assign({}, pos)) |
||||||
|
return num.value + 1 |
||||||
|
} |
||||||
|
const refresh = async function () { |
||||||
|
tempPoints.splice(0, tempPoints.length) |
||||||
|
barAreaColor.value = '#000' |
||||||
|
barAreaBorderColor.value = '#ddd' |
||||||
|
bindingClick.value = true |
||||||
|
fontPos.splice(0, fontPos.length) |
||||||
|
checkPosArr.splice(0, checkPosArr.length) |
||||||
|
num.value = 1 |
||||||
|
await getPictrue() |
||||||
|
showRefresh.value = true |
||||||
|
} |
||||||
|
|
||||||
|
// 请求背景图片和验证图片 |
||||||
|
const getPictrue = async () => { |
||||||
|
let data = { |
||||||
|
captchaType: captchaType.value |
||||||
|
} |
||||||
|
const res = await getCaptcha(data) |
||||||
|
if (res.data.repCode == '0000') { |
||||||
|
pointBackImgBase.value = res.data.repData.originalImageBase64 |
||||||
|
backToken.value = res.data.repData.token |
||||||
|
secretKey.value = res.data.repData.secretKey |
||||||
|
poinTextList.value = res.data.repData.wordList |
||||||
|
text.value = t('component.captcha.point') + '【' + poinTextList.value.join(',') + '】' |
||||||
|
} else { |
||||||
|
text.value = res.data.repMsg |
||||||
|
} |
||||||
|
} |
||||||
|
//坐标转换函数 |
||||||
|
const pointTransfrom = function (pointArr, imgSize) { |
||||||
|
var newPointArr = pointArr.map((p) => { |
||||||
|
let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth)) |
||||||
|
let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight)) |
||||||
|
return { x, y } |
||||||
|
}) |
||||||
|
return newPointArr |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,357 @@ |
|||||||
|
<template> |
||||||
|
<div style="position: relative"> |
||||||
|
<div v-if="type === '2'" class="verify-img-out" :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }"> |
||||||
|
<div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }"> |
||||||
|
<img :src="'data:image/png;base64,' + backImgBase" alt="" style="width: 100%; height: 100%; display: block" /> |
||||||
|
<div class="verify-refresh" @click="refresh" v-show="showRefresh"> |
||||||
|
<i class="iconfont icon-refresh"></i> |
||||||
|
</div> |
||||||
|
<transition name="tips"> |
||||||
|
<span class="verify-tips" v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'"> |
||||||
|
{{ tipWords }} |
||||||
|
</span> |
||||||
|
</transition> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 公共部分 --> |
||||||
|
<div class="verify-bar-area" :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"> |
||||||
|
<span class="verify-msg" v-text="text"></span> |
||||||
|
<div |
||||||
|
class="verify-left-bar" |
||||||
|
:style="{ |
||||||
|
width: leftBarWidth !== undefined ? leftBarWidth : barSize.height, |
||||||
|
height: barSize.height, |
||||||
|
'border-color': leftBarBorderColor, |
||||||
|
transaction: transitionWidth |
||||||
|
}" |
||||||
|
> |
||||||
|
<span class="verify-msg" v-text="finishText"></span> |
||||||
|
<div |
||||||
|
class="verify-move-block" |
||||||
|
@touchstart="start" |
||||||
|
@mousedown="start" |
||||||
|
:style="{ |
||||||
|
width: barSize.height, |
||||||
|
height: barSize.height, |
||||||
|
'background-color': moveBlockBackgroundColor, |
||||||
|
left: moveBlockLeft, |
||||||
|
transition: transitionLeft |
||||||
|
}" |
||||||
|
> |
||||||
|
<i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i> |
||||||
|
<div |
||||||
|
v-if="type === '2'" |
||||||
|
class="verify-sub-block" |
||||||
|
:style="{ |
||||||
|
width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px', |
||||||
|
height: setSize.imgHeight, |
||||||
|
top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px', |
||||||
|
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight |
||||||
|
}" |
||||||
|
> |
||||||
|
<img :src="blockBackImgBase" alt="" style="width: 100%; height: 100%; display: block; -webkit-user-drag: none" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script type="text/babel" setup> |
||||||
|
/** |
||||||
|
* VerifySlide |
||||||
|
* @description 滑块 |
||||||
|
* */ |
||||||
|
import { aesEncrypt } from './../utils/ase' |
||||||
|
import { resetSize } from './../utils/util' |
||||||
|
import { getCaptcha, checkCaptcha } from '@/api/base/login' |
||||||
|
import { useI18n } from '@/hooks/web/useI18n' |
||||||
|
import { computed, onMounted, reactive, ref, watch, nextTick, toRefs, getCurrentInstance } from 'vue' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
captchaType: { |
||||||
|
type: String |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: '1' |
||||||
|
}, |
||||||
|
//弹出式pop，固定fixed |
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: 'fixed' |
||||||
|
}, |
||||||
|
vSpace: { |
||||||
|
type: Number, |
||||||
|
default: 5 |
||||||
|
}, |
||||||
|
explain: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
imgSize: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return { |
||||||
|
width: '310px', |
||||||
|
height: '155px' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
blockSize: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return { |
||||||
|
width: '50px', |
||||||
|
height: '50px' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
barSize: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return { |
||||||
|
width: '310px', |
||||||
|
height: '30px' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
const { mode, captchaType, type, blockSize, explain } = toRefs(props) |
||||||
|
const { proxy } = getCurrentInstance() |
||||||
|
const secretKey = ref('') //后端返回的ase加密秘钥 |
||||||
|
const passFlag = ref('') //是否通过的标识 |
||||||
|
const backImgBase = ref('') //验证码背景图片 |
||||||
|
const blockBackImgBase = ref('') //验证滑块的背景图片 |
||||||
|
const backToken = ref('') //后端返回的唯一token值 |
||||||
|
const startMoveTime = ref('') //移动开始的时间 |
||||||
|
const endMovetime = ref('') //移动结束的时间 |
||||||
|
const tipWords = ref('') |
||||||
|
const text = ref('') |
||||||
|
const finishText = ref('') |
||||||
|
const setSize = reactive({ |
||||||
|
imgHeight: 0, |
||||||
|
imgWidth: 0, |
||||||
|
barHeight: 0, |
||||||
|
barWidth: 0 |
||||||
|
}) |
||||||
|
const moveBlockLeft = ref(undefined) |
||||||
|
const leftBarWidth = ref(undefined) |
||||||
|
// 移动中样式 |
||||||
|
const moveBlockBackgroundColor = ref(undefined) |
||||||
|
const leftBarBorderColor = ref('#ddd') |
||||||
|
const iconColor = ref(undefined) |
||||||
|
const iconClass = ref('icon-right') |
||||||
|
const status = ref(false) //鼠标状态 |
||||||
|
const isEnd = ref(false) //是够验证完成 |
||||||
|
const showRefresh = ref(true) |
||||||
|
const transitionLeft = ref('') |
||||||
|
const transitionWidth = ref('') |
||||||
|
const startLeft = ref(0) |
||||||
|
|
||||||
|
const barArea = computed(() => { |
||||||
|
return proxy.$el.querySelector('.verify-bar-area') |
||||||
|
}) |
||||||
|
const init = () => { |
||||||
|
if (explain.value === '') { |
||||||
|
text.value = t('component.captcha.slide') |
||||||
|
} else { |
||||||
|
text.value = explain.value |
||||||
|
} |
||||||
|
getPictrue() |
||||||
|
nextTick(() => { |
||||||
|
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy) |
||||||
|
setSize.imgHeight = imgHeight |
||||||
|
setSize.imgWidth = imgWidth |
||||||
|
setSize.barHeight = barHeight |
||||||
|
setSize.barWidth = barWidth |
||||||
|
proxy.$parent.$emit('ready', proxy) |
||||||
|
}) |
||||||
|
|
||||||
|
window.removeEventListener('touchmove', function (e) { |
||||||
|
move(e) |
||||||
|
}) |
||||||
|
window.removeEventListener('mousemove', function (e) { |
||||||
|
move(e) |
||||||
|
}) |
||||||
|
|
||||||
|
//鼠标松开 |
||||||
|
window.removeEventListener('touchend', function () { |
||||||
|
end() |
||||||
|
}) |
||||||
|
window.removeEventListener('mouseup', function () { |
||||||
|
end() |
||||||
|
}) |
||||||
|
|
||||||
|
window.addEventListener('touchmove', function (e) { |
||||||
|
move(e) |
||||||
|
}) |
||||||
|
window.addEventListener('mousemove', function (e) { |
||||||
|
move(e) |
||||||
|
}) |
||||||
|
|
||||||
|
//鼠标松开 |
||||||
|
window.addEventListener('touchend', function () { |
||||||
|
end() |
||||||
|
}) |
||||||
|
window.addEventListener('mouseup', function () { |
||||||
|
end() |
||||||
|
}) |
||||||
|
} |
||||||
|
watch(type, () => { |
||||||
|
init() |
||||||
|
}) |
||||||
|
onMounted(() => { |
||||||
|
// 禁止拖拽 |
||||||
|
init() |
||||||
|
proxy.$el.onselectstart = function () { |
||||||
|
return false |
||||||
|
} |
||||||
|
}) |
||||||
|
//鼠标按下 |
||||||
|
const start = (e) => { |
||||||
|
e = e || window.event |
||||||
|
if (!e.touches) { |
||||||
|
//兼容PC端 |
||||||
|
var x = e.clientX |
||||||
|
} else { |
||||||
|
//兼容移动端 |
||||||
|
var x = e.touches[0].pageX |
||||||
|
} |
||||||
|
startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left) |
||||||
|
startMoveTime.value = +new Date() //开始滑动的时间 |
||||||
|
if (isEnd.value == false) { |
||||||
|
text.value = '' |
||||||
|
moveBlockBackgroundColor.value = '#337ab7' |
||||||
|
leftBarBorderColor.value = '#337AB7' |
||||||
|
iconColor.value = '#fff' |
||||||
|
e.stopPropagation() |
||||||
|
status.value = true |
||||||
|
} |
||||||
|
} |
||||||
|
//鼠标移动 |
||||||
|
const move = (e) => { |
||||||
|
e = e || window.event |
||||||
|
if (status.value && isEnd.value == false) { |
||||||
|
if (!e.touches) { |
||||||
|
//兼容PC端 |
||||||
|
var x = e.clientX |
||||||
|
} else { |
||||||
|
//兼容移动端 |
||||||
|
var x = e.touches[0].pageX |
||||||
|
} |
||||||
|
var bar_area_left = barArea.value.getBoundingClientRect().left |
||||||
|
var move_block_left = x - bar_area_left //小方块相对于父元素的left值 |
||||||
|
if (move_block_left >= barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2) { |
||||||
|
move_block_left = barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2 |
||||||
|
} |
||||||
|
if (move_block_left <= 0) { |
||||||
|
move_block_left = parseInt(parseInt(blockSize.value.width) / 2) |
||||||
|
} |
||||||
|
//拖动后小方块的left值 |
||||||
|
moveBlockLeft.value = move_block_left - startLeft.value + 'px' |
||||||
|
leftBarWidth.value = move_block_left - startLeft.value + 'px' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//鼠标松开 |
||||||
|
const end = () => { |
||||||
|
endMovetime.value = +new Date() |
||||||
|
//判断是否重合 |
||||||
|
if (status.value && isEnd.value == false) { |
||||||
|
var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', '')) |
||||||
|
moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth) |
||||||
|
let data = { |
||||||
|
captchaType: captchaType.value, |
||||||
|
pointJson: secretKey.value |
||||||
|
? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value) |
||||||
|
: JSON.stringify({ x: moveLeftDistance, y: 5.0 }), |
||||||
|
token: backToken.value |
||||||
|
} |
||||||
|
checkCaptcha(data).then((response) => { |
||||||
|
const res = response.data |
||||||
|
if (res.repCode == '0000') { |
||||||
|
moveBlockBackgroundColor.value = '#5cb85c' |
||||||
|
leftBarBorderColor.value = '#5cb85c' |
||||||
|
iconColor.value = '#fff' |
||||||
|
iconClass.value = 'icon-check' |
||||||
|
showRefresh.value = false |
||||||
|
isEnd.value = true |
||||||
|
if (mode.value == 'pop') { |
||||||
|
setTimeout(() => { |
||||||
|
proxy.$parent.clickShow = false |
||||||
|
refresh() |
||||||
|
}, 1500) |
||||||
|
} |
||||||
|
passFlag.value = true |
||||||
|
tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s |
||||||
|
${t('component.captcha.success')}` |
||||||
|
const captchaVerification = secretKey.value |
||||||
|
? aesEncrypt(backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value) |
||||||
|
: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }) |
||||||
|
setTimeout(() => { |
||||||
|
tipWords.value = '' |
||||||
|
proxy.$parent.closeBox() |
||||||
|
proxy.$parent.$emit('success', { captchaVerification }) |
||||||
|
}, 1000) |
||||||
|
} else { |
||||||
|
moveBlockBackgroundColor.value = '#d9534f' |
||||||
|
leftBarBorderColor.value = '#d9534f' |
||||||
|
iconColor.value = '#fff' |
||||||
|
iconClass.value = 'icon-close' |
||||||
|
passFlag.value = false |
||||||
|
setTimeout(function () { |
||||||
|
refresh() |
||||||
|
}, 1000) |
||||||
|
proxy.$parent.$emit('error', proxy) |
||||||
|
tipWords.value = t('component.captcha.fail') |
||||||
|
setTimeout(() => { |
||||||
|
tipWords.value = '' |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
}) |
||||||
|
status.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const refresh = async () => { |
||||||
|
showRefresh.value = true |
||||||
|
finishText.value = '' |
||||||
|
|
||||||
|
transitionLeft.value = 'left .3s' |
||||||
|
moveBlockLeft.value = 0 |
||||||
|
|
||||||
|
leftBarWidth.value = undefined |
||||||
|
transitionWidth.value = 'width .3s' |
||||||
|
|
||||||
|
leftBarBorderColor.value = '#ddd' |
||||||
|
moveBlockBackgroundColor.value = '#fff' |
||||||
|
iconColor.value = '#000' |
||||||
|
iconClass.value = 'icon-right' |
||||||
|
isEnd.value = false |
||||||
|
|
||||||
|
await getPictrue() |
||||||
|
setTimeout(() => { |
||||||
|
transitionWidth.value = '' |
||||||
|
transitionLeft.value = '' |
||||||
|
text.value = explain.value |
||||||
|
}, 300) |
||||||
|
} |
||||||
|
|
||||||
|
// 请求背景图片和验证图片 |
||||||
|
const getPictrue = async () => { |
||||||
|
let data = { |
||||||
|
captchaType: captchaType.value |
||||||
|
} |
||||||
|
const res = await getCaptcha(data) |
||||||
|
if (res.data.repCode == '0000') { |
||||||
|
backImgBase.value = res.data.repData.originalImageBase64 |
||||||
|
blockBackImgBase.value = 'data:image/png;base64,' + res.data.repData.jigsawImageBase64 |
||||||
|
backToken.value = res.data.repData.token |
||||||
|
secretKey.value = res.data.repData.secretKey |
||||||
|
} else { |
||||||
|
tipWords.value = res.data.repMsg |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
import VerifySlide from './VerifySlide.vue' |
||||||
|
import VerifyPoints from './VerifyPoints.vue' |
||||||
|
|
||||||
|
export { VerifySlide, VerifyPoints } |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import CryptoJS from 'crypto-js' |
||||||
|
/** |
||||||
|
* @word 要加密的内容 |
||||||
|
* @keyWord String 服务器随机返回的关键字 |
||||||
|
* */ |
||||||
|
export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') { |
||||||
|
const key = CryptoJS.enc.Utf8.parse(keyWord) |
||||||
|
const srcs = CryptoJS.enc.Utf8.parse(word) |
||||||
|
const encrypted = CryptoJS.AES.encrypt(srcs, key, { |
||||||
|
mode: CryptoJS.mode.ECB, |
||||||
|
padding: CryptoJS.pad.Pkcs7 |
||||||
|
}) |
||||||
|
return encrypted.toString() |
||||||
|
} |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
export function resetSize(vm) { |
||||||
|
let img_width, img_height, bar_width, bar_height //图片的宽度、高度，移动条的宽度、高度
|
||||||
|
const EmployeeWindow = window as any |
||||||
|
const parentWidth = vm.$el.parentNode.offsetWidth || EmployeeWindow.offsetWidth |
||||||
|
const parentHeight = vm.$el.parentNode.offsetHeight || EmployeeWindow.offsetHeight |
||||||
|
if (vm.imgSize.width.indexOf('%') != -1) { |
||||||
|
img_width = (parseInt(vm.imgSize.width) / 100) * parentWidth + 'px' |
||||||
|
} else { |
||||||
|
img_width = vm.imgSize.width |
||||||
|
} |
||||||
|
|
||||||
|
if (vm.imgSize.height.indexOf('%') != -1) { |
||||||
|
img_height = (parseInt(vm.imgSize.height) / 100) * parentHeight + 'px' |
||||||
|
} else { |
||||||
|
img_height = vm.imgSize.height |
||||||
|
} |
||||||
|
|
||||||
|
if (vm.barSize.width.indexOf('%') != -1) { |
||||||
|
bar_width = (parseInt(vm.barSize.width) / 100) * parentWidth + 'px' |
||||||
|
} else { |
||||||
|
bar_width = vm.barSize.width |
||||||
|
} |
||||||
|
|
||||||
|
if (vm.barSize.height.indexOf('%') != -1) { |
||||||
|
bar_height = (parseInt(vm.barSize.height) / 100) * parentHeight + 'px' |
||||||
|
} else { |
||||||
|
bar_height = vm.barSize.height |
||||||
|
} |
||||||
|
|
||||||
|
return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height } |
||||||
|
} |
||||||
|
|
||||||
|
export const _code_chars = [ |
||||||
|
1, |
||||||
|
2, |
||||||
|
3, |
||||||
|
4, |
||||||
|
5, |
||||||
|
6, |
||||||
|
7, |
||||||
|
8, |
||||||
|
9, |
||||||
|
'a', |
||||||
|
'b', |
||||||
|
'c', |
||||||
|
'd', |
||||||
|
'e', |
||||||
|
'f', |
||||||
|
'g', |
||||||
|
'h', |
||||||
|
'i', |
||||||
|
'j', |
||||||
|
'k', |
||||||
|
'l', |
||||||
|
'm', |
||||||
|
'n', |
||||||
|
'o', |
||||||
|
'p', |
||||||
|
'q', |
||||||
|
'r', |
||||||
|
's', |
||||||
|
't', |
||||||
|
'u', |
||||||
|
'v', |
||||||
|
'w', |
||||||
|
'x', |
||||||
|
'y', |
||||||
|
'z', |
||||||
|
'A', |
||||||
|
'B', |
||||||
|
'C', |
||||||
|
'D', |
||||||
|
'E', |
||||||
|
'F', |
||||||
|
'G', |
||||||
|
'H', |
||||||
|
'I', |
||||||
|
'J', |
||||||
|
'K', |
||||||
|
'L', |
||||||
|
'M', |
||||||
|
'N', |
||||||
|
'O', |
||||||
|
'P', |
||||||
|
'Q', |
||||||
|
'R', |
||||||
|
'S', |
||||||
|
'T', |
||||||
|
'U', |
||||||
|
'V', |
||||||
|
'W', |
||||||
|
'X', |
||||||
|
'Y', |
||||||
|
'Z' |
||||||
|
] |
||||||
|
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'] |
||||||
|
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'] |
||||||
@ -1,7 +0,0 @@ |
|||||||
import { withInstall } from '@/utils' |
|
||||||
import basicDragVerify from './src/DragVerify.vue' |
|
||||||
import rotateDragVerify from './src/ImgRotate.vue' |
|
||||||
|
|
||||||
export const BasicDragVerify = withInstall(basicDragVerify) |
|
||||||
export const RotateDragVerify = withInstall(rotateDragVerify) |
|
||||||
export * from './src/typing' |
|
||||||
@ -1,365 +0,0 @@ |
|||||||
<script lang="tsx"> |
|
||||||
import type { Ref } from 'vue' |
|
||||||
import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue' |
|
||||||
import { useTimeoutFn } from '@/hooks/core/useTimeout' |
|
||||||
import { useEventListener } from '@/hooks/event/useEventListener' |
|
||||||
import { basicProps } from './props' |
|
||||||
import { getSlot } from '@/utils/helper/tsxHelper' |
|
||||||
import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue' |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
name: 'BaseDargVerify', |
|
||||||
props: basicProps, |
|
||||||
emits: ['success', 'update:value', 'change', 'start', 'move', 'end'], |
|
||||||
setup(props, { emit, slots, expose }) { |
|
||||||
const state = reactive({ |
|
||||||
isMoving: false, |
|
||||||
isPassing: false, |
|
||||||
moveDistance: 0, |
|
||||||
toLeft: false, |
|
||||||
startTime: 0, |
|
||||||
endTime: 0 |
|
||||||
}) |
|
||||||
|
|
||||||
const wrapElRef = ref<HTMLDivElement | null>(null) |
|
||||||
const barElRef = ref<HTMLDivElement | null>(null) |
|
||||||
const contentElRef = ref<HTMLDivElement | null>(null) |
|
||||||
const actionElRef = ref(null) as Ref<HTMLDivElement | null> |
|
||||||
|
|
||||||
useEventListener({ |
|
||||||
el: document, |
|
||||||
name: 'mouseup', |
|
||||||
listener: () => { |
|
||||||
if (state.isMoving) { |
|
||||||
resume() |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const getActionStyleRef = computed(() => { |
|
||||||
const { height, actionStyle } = props |
|
||||||
const h = `${parseInt(height as string)}px` |
|
||||||
return { |
|
||||||
left: 0, |
|
||||||
width: h, |
|
||||||
height: h, |
|
||||||
...actionStyle |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const getWrapStyleRef = computed(() => { |
|
||||||
const { height, width, circle, wrapStyle } = props |
|
||||||
const h = parseInt(height as string) |
|
||||||
const w = `${parseInt(width as string)}px` |
|
||||||
return { |
|
||||||
width: w, |
|
||||||
height: `${h}px`, |
|
||||||
lineHeight: `${h}px`, |
|
||||||
borderRadius: circle ? h / 2 + 'px' : 0, |
|
||||||
...wrapStyle |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const getBarStyleRef = computed(() => { |
|
||||||
const { height, circle, barStyle } = props |
|
||||||
const h = parseInt(height as string) |
|
||||||
return { |
|
||||||
height: `${h}px`, |
|
||||||
borderRadius: circle ? h / 2 + 'px 0 0 ' + h / 2 + 'px' : 0, |
|
||||||
...barStyle |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const getContentStyleRef = computed(() => { |
|
||||||
const { height, width, contentStyle } = props |
|
||||||
const h = `${parseInt(height as string)}px` |
|
||||||
const w = `${parseInt(width as string)}px` |
|
||||||
|
|
||||||
return { |
|
||||||
height: h, |
|
||||||
width: w, |
|
||||||
...contentStyle |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
watch( |
|
||||||
() => state.isPassing, |
|
||||||
(isPassing) => { |
|
||||||
if (isPassing) { |
|
||||||
const { startTime, endTime } = state |
|
||||||
const time = (endTime - startTime) / 1000 |
|
||||||
emit('success', { isPassing, time: time.toFixed(1) }) |
|
||||||
emit('update:value', isPassing) |
|
||||||
emit('change', isPassing) |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
watchEffect(() => { |
|
||||||
state.isPassing = !!props.value |
|
||||||
}) |
|
||||||
|
|
||||||
function getEventPageX(e: MouseEvent | TouchEvent) { |
|
||||||
return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX |
|
||||||
} |
|
||||||
|
|
||||||
function handleDragStart(e: MouseEvent | TouchEvent) { |
|
||||||
if (state.isPassing) { |
|
||||||
return |
|
||||||
} |
|
||||||
const actionEl = unref(actionElRef) |
|
||||||
if (!actionEl) return |
|
||||||
emit('start', e) |
|
||||||
state.moveDistance = getEventPageX(e) - parseInt(actionEl.style.left.replace('px', ''), 10) |
|
||||||
state.startTime = new Date().getTime() |
|
||||||
state.isMoving = true |
|
||||||
} |
|
||||||
|
|
||||||
function getOffset(el: HTMLDivElement) { |
|
||||||
const actionWidth = parseInt(el.style.width) |
|
||||||
const { width } = props |
|
||||||
const widthNum = parseInt(width as string) |
|
||||||
const offset = widthNum - actionWidth - 6 |
|
||||||
return { offset, widthNum, actionWidth } |
|
||||||
} |
|
||||||
|
|
||||||
function handleDragMoving(e: MouseEvent | TouchEvent) { |
|
||||||
const { isMoving, moveDistance } = state |
|
||||||
if (isMoving) { |
|
||||||
const actionEl = unref(actionElRef) |
|
||||||
const barEl = unref(barElRef) |
|
||||||
if (!actionEl || !barEl) return |
|
||||||
const { offset, widthNum, actionWidth } = getOffset(actionEl) |
|
||||||
const moveX = getEventPageX(e) - moveDistance |
|
||||||
|
|
||||||
emit('move', { |
|
||||||
event: e, |
|
||||||
moveDistance, |
|
||||||
moveX |
|
||||||
}) |
|
||||||
if (moveX > 0 && moveX <= offset) { |
|
||||||
actionEl.style.left = `${moveX}px` |
|
||||||
barEl.style.width = `${moveX + actionWidth / 2}px` |
|
||||||
} else if (moveX > offset) { |
|
||||||
actionEl.style.left = `${widthNum - actionWidth}px` |
|
||||||
barEl.style.width = `${widthNum - actionWidth / 2}px` |
|
||||||
if (!props.isSlot) { |
|
||||||
checkPass() |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function handleDragOver(e: MouseEvent | TouchEvent) { |
|
||||||
const { isMoving, isPassing, moveDistance } = state |
|
||||||
if (isMoving && !isPassing) { |
|
||||||
emit('end', e) |
|
||||||
const actionEl = unref(actionElRef) |
|
||||||
const barEl = unref(barElRef) |
|
||||||
if (!actionEl || !barEl) return |
|
||||||
const moveX = getEventPageX(e) - moveDistance |
|
||||||
const { offset, widthNum, actionWidth } = getOffset(actionEl) |
|
||||||
if (moveX < offset) { |
|
||||||
if (!props.isSlot) { |
|
||||||
resume() |
|
||||||
} else { |
|
||||||
setTimeout(() => { |
|
||||||
if (!props.value) { |
|
||||||
resume() |
|
||||||
} else { |
|
||||||
const contentEl = unref(contentElRef) |
|
||||||
if (contentEl) { |
|
||||||
contentEl.style.width = `${parseInt(barEl.style.width)}px` |
|
||||||
} |
|
||||||
} |
|
||||||
}, 0) |
|
||||||
} |
|
||||||
} else { |
|
||||||
actionEl.style.left = `${widthNum - actionWidth}px` |
|
||||||
barEl.style.width = `${widthNum - actionWidth / 2}px` |
|
||||||
checkPass() |
|
||||||
} |
|
||||||
state.isMoving = false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function checkPass() { |
|
||||||
if (props.isSlot) { |
|
||||||
resume() |
|
||||||
return |
|
||||||
} |
|
||||||
state.endTime = new Date().getTime() |
|
||||||
state.isPassing = true |
|
||||||
state.isMoving = false |
|
||||||
} |
|
||||||
|
|
||||||
function resume() { |
|
||||||
state.isMoving = false |
|
||||||
state.isPassing = false |
|
||||||
state.moveDistance = 0 |
|
||||||
state.toLeft = false |
|
||||||
state.startTime = 0 |
|
||||||
state.endTime = 0 |
|
||||||
const actionEl = unref(actionElRef) |
|
||||||
const barEl = unref(barElRef) |
|
||||||
const contentEl = unref(contentElRef) |
|
||||||
if (!actionEl || !barEl || !contentEl) return |
|
||||||
state.toLeft = true |
|
||||||
useTimeoutFn(() => { |
|
||||||
state.toLeft = false |
|
||||||
actionEl.style.left = '0' |
|
||||||
barEl.style.width = '0' |
|
||||||
// The time is consistent with the animation time |
|
||||||
}, 300) |
|
||||||
contentEl.style.width = unref(getContentStyleRef).width |
|
||||||
} |
|
||||||
|
|
||||||
expose({ |
|
||||||
resume |
|
||||||
}) |
|
||||||
|
|
||||||
return () => { |
|
||||||
const renderBar = () => { |
|
||||||
const cls = [`darg-verify-bar`] |
|
||||||
if (state.toLeft) { |
|
||||||
cls.push('to-left') |
|
||||||
} |
|
||||||
return <div class={cls} ref={barElRef} style={unref(getBarStyleRef)} /> |
|
||||||
} |
|
||||||
|
|
||||||
const renderContent = () => { |
|
||||||
const cls = [`darg-verify-content`] |
|
||||||
const { isPassing } = state |
|
||||||
const { text, successText } = props |
|
||||||
|
|
||||||
isPassing && cls.push('success') |
|
||||||
|
|
||||||
return ( |
|
||||||
<div class={cls} ref={contentElRef} style={unref(getContentStyleRef)}> |
|
||||||
{getSlot(slots, 'text', isPassing) || (isPassing ? successText : text)} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const renderAction = () => { |
|
||||||
const cls = [`darg-verify-action`] |
|
||||||
const { toLeft, isPassing } = state |
|
||||||
if (toLeft) { |
|
||||||
cls.push('to-left') |
|
||||||
} |
|
||||||
return ( |
|
||||||
<div class={cls} onMousedown={handleDragStart} onTouchstart={handleDragStart} style={unref(getActionStyleRef)} ref={actionElRef}> |
|
||||||
{getSlot(slots, 'actionIcon', isPassing) || |
|
||||||
(isPassing ? ( |
|
||||||
<CheckOutlined class={`darg-verify-action__icon`} /> |
|
||||||
) : ( |
|
||||||
<DoubleRightOutlined class={`darg-verify-action__icon`} /> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div |
|
||||||
class="darg-verify" |
|
||||||
ref={wrapElRef} |
|
||||||
style={unref(getWrapStyleRef)} |
|
||||||
onMousemove={handleDragMoving} |
|
||||||
onTouchmove={handleDragMoving} |
|
||||||
onMouseleave={handleDragOver} |
|
||||||
onMouseup={handleDragOver} |
|
||||||
onTouchend={handleDragOver} |
|
||||||
> |
|
||||||
{renderBar()} |
|
||||||
{renderContent()} |
|
||||||
{renderAction()} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
</script> |
|
||||||
<style lang="less"> |
|
||||||
@radius: 4px; |
|
||||||
|
|
||||||
.darg-verify { |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
text-align: center; |
|
||||||
background-color: rgb(238 238 238); |
|
||||||
border: 1px solid #ddd; |
|
||||||
border-radius: @radius; |
|
||||||
|
|
||||||
&-bar { |
|
||||||
position: absolute; |
|
||||||
width: 0; |
|
||||||
height: 36px; |
|
||||||
background-color: @success-color; |
|
||||||
border-radius: @radius; |
|
||||||
|
|
||||||
&.to-left { |
|
||||||
width: 0 !important; |
|
||||||
transition: width 0.3s; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&-content { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
font-size: 12px; |
|
||||||
text-size-adjust: none; |
|
||||||
background-color: -webkit-gradient( |
|
||||||
linear, |
|
||||||
left top, |
|
||||||
right top, |
|
||||||
color-stop(0, #333), |
|
||||||
color-stop(0.4, #333), |
|
||||||
color-stop(0.5, #fff), |
|
||||||
color-stop(0.6, #333), |
|
||||||
color-stop(1, #333) |
|
||||||
); |
|
||||||
animation: slidetounlock 3s infinite; |
|
||||||
background-clip: text; |
|
||||||
user-select: none; |
|
||||||
|
|
||||||
&.success { |
|
||||||
-webkit-text-fill-color: @white; |
|
||||||
} |
|
||||||
|
|
||||||
& > * { |
|
||||||
-webkit-text-fill-color: #333; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&-action { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
display: flex; |
|
||||||
cursor: move; |
|
||||||
background-color: @white; |
|
||||||
border-radius: @radius; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
&__icon { |
|
||||||
cursor: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
&.to-left { |
|
||||||
left: 0 !important; |
|
||||||
transition: left 0.3s; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes slidetounlock { |
|
||||||
0% { |
|
||||||
background-position: -120px 0; |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
background-position: 120px 0; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,214 +0,0 @@ |
|||||||
<script lang="tsx"> |
|
||||||
import type { MoveData, DragVerifyActionType } from './typing' |
|
||||||
import { defineComponent, computed, unref, reactive, watch, ref } from 'vue' |
|
||||||
import { useTimeoutFn } from '@/hooks/core/useTimeout' |
|
||||||
import BasicDragVerify from './DragVerify.vue' |
|
||||||
import { hackCss } from '@/utils/domUtils' |
|
||||||
import { rotateProps } from './props' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
name: 'ImgRotateDragVerify', |
|
||||||
inheritAttrs: false, |
|
||||||
props: rotateProps, |
|
||||||
emits: ['success', 'change', 'update:value'], |
|
||||||
setup(props, { emit, attrs, expose }) { |
|
||||||
const basicRef = ref<Nullable<DragVerifyActionType>>(null) |
|
||||||
const state = reactive({ |
|
||||||
showTip: false, |
|
||||||
isPassing: false, |
|
||||||
imgStyle: {}, |
|
||||||
randomRotate: 0, |
|
||||||
currentRotate: 0, |
|
||||||
toOrigin: false, |
|
||||||
startTime: 0, |
|
||||||
endTime: 0, |
|
||||||
draged: false |
|
||||||
}) |
|
||||||
const { t } = useI18n() |
|
||||||
|
|
||||||
watch( |
|
||||||
() => state.isPassing, |
|
||||||
(isPassing) => { |
|
||||||
if (isPassing) { |
|
||||||
const { startTime, endTime } = state |
|
||||||
const time = (endTime - startTime) / 1000 |
|
||||||
emit('success', { isPassing, time: time.toFixed(1) }) |
|
||||||
emit('change', isPassing) |
|
||||||
emit('update:value', isPassing) |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
const getImgWrapStyleRef = computed(() => { |
|
||||||
const { imgWrapStyle, imgWidth } = props |
|
||||||
return { |
|
||||||
width: `${imgWidth}px`, |
|
||||||
height: `${imgWidth}px`, |
|
||||||
...imgWrapStyle |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const getFactorRef = computed(() => { |
|
||||||
const { minDegree, maxDegree } = props |
|
||||||
if (minDegree === maxDegree) { |
|
||||||
return Math.floor(1 + Math.random() * 1) / 10 + 1 |
|
||||||
} |
|
||||||
return 1 |
|
||||||
}) |
|
||||||
function handleStart() { |
|
||||||
state.startTime = new Date().getTime() |
|
||||||
} |
|
||||||
|
|
||||||
function handleDragBarMove(data: MoveData) { |
|
||||||
state.draged = true |
|
||||||
const { imgWidth, height, maxDegree } = props |
|
||||||
const { moveX } = data |
|
||||||
const currentRotate = Math.ceil((moveX / (imgWidth! - parseInt(height as string))) * maxDegree! * unref(getFactorRef)) |
|
||||||
state.currentRotate = currentRotate |
|
||||||
state.imgStyle = hackCss('transform', `rotateZ(${state.randomRotate - currentRotate}deg)`) |
|
||||||
} |
|
||||||
|
|
||||||
function handleImgOnLoad() { |
|
||||||
const { minDegree, maxDegree } = props |
|
||||||
const ranRotate = Math.floor(minDegree! + Math.random() * (maxDegree! - minDegree!)) // 生成随机角度 |
|
||||||
state.randomRotate = ranRotate |
|
||||||
state.imgStyle = hackCss('transform', `rotateZ(${ranRotate}deg)`) |
|
||||||
} |
|
||||||
|
|
||||||
function handleDragEnd() { |
|
||||||
const { randomRotate, currentRotate } = state |
|
||||||
const { diffDegree } = props |
|
||||||
|
|
||||||
if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) { |
|
||||||
state.imgStyle = hackCss('transform', `rotateZ(${randomRotate}deg)`) |
|
||||||
state.toOrigin = true |
|
||||||
useTimeoutFn(() => { |
|
||||||
state.toOrigin = false |
|
||||||
state.showTip = true |
|
||||||
// 时间与动画时间保持一致 |
|
||||||
}, 300) |
|
||||||
} else { |
|
||||||
checkPass() |
|
||||||
} |
|
||||||
state.showTip = true |
|
||||||
} |
|
||||||
function checkPass() { |
|
||||||
state.isPassing = true |
|
||||||
state.endTime = new Date().getTime() |
|
||||||
} |
|
||||||
|
|
||||||
function resume() { |
|
||||||
state.showTip = false |
|
||||||
const basicEl = unref(basicRef) |
|
||||||
if (!basicEl) { |
|
||||||
return |
|
||||||
} |
|
||||||
state.isPassing = false |
|
||||||
|
|
||||||
basicEl.resume() |
|
||||||
handleImgOnLoad() |
|
||||||
} |
|
||||||
|
|
||||||
expose({ resume }) |
|
||||||
|
|
||||||
// handleImgOnLoad(); |
|
||||||
return () => { |
|
||||||
const { src } = props |
|
||||||
const { toOrigin, isPassing, startTime, endTime } = state |
|
||||||
const imgCls: string[] = [] |
|
||||||
if (toOrigin) { |
|
||||||
imgCls.push('to-origin') |
|
||||||
} |
|
||||||
const time = (endTime - startTime) / 1000 |
|
||||||
|
|
||||||
return ( |
|
||||||
<div class="ir-dv"> |
|
||||||
<div class={`ir-dv-img__wrap`} style={unref(getImgWrapStyleRef)}> |
|
||||||
<img |
|
||||||
src={src} |
|
||||||
onLoad={handleImgOnLoad} |
|
||||||
width={parseInt(props.width as string)} |
|
||||||
class={imgCls} |
|
||||||
style={state.imgStyle} |
|
||||||
onClick={() => { |
|
||||||
resume() |
|
||||||
}} |
|
||||||
alt="verify" |
|
||||||
/> |
|
||||||
{state.showTip && ( |
|
||||||
<span class={[`ir-dv-img__tip`, state.isPassing ? 'success' : 'error']}> |
|
||||||
{state.isPassing ? t('component.verify.time', { time: time.toFixed(1) }) : t('component.verify.error')} |
|
||||||
</span> |
|
||||||
)} |
|
||||||
{!state.showTip && !state.draged && <span class={[`ir-dv-img__tip`, 'normal']}>{t('component.verify.redoTip')}</span>} |
|
||||||
</div> |
|
||||||
<BasicDragVerify |
|
||||||
class={`ir-dv-drag__bar`} |
|
||||||
onMove={handleDragBarMove} |
|
||||||
onEnd={handleDragEnd} |
|
||||||
onStart={handleStart} |
|
||||||
ref={basicRef} |
|
||||||
{...{ ...attrs, ...props }} |
|
||||||
value={isPassing} |
|
||||||
isSlot={true} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
</script> |
|
||||||
<style lang="less"> |
|
||||||
.ir-dv { |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
&-img__wrap { |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
border-radius: 50%; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 100%; |
|
||||||
border-radius: 50%; |
|
||||||
|
|
||||||
&.to-origin { |
|
||||||
transition: transform 0.3s; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&-img__tip { |
|
||||||
position: absolute; |
|
||||||
bottom: 10px; |
|
||||||
left: 0; |
|
||||||
z-index: 1; |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: 30px; |
|
||||||
font-size: 12px; |
|
||||||
line-height: 30px; |
|
||||||
color: @white; |
|
||||||
text-align: center; |
|
||||||
|
|
||||||
&.success { |
|
||||||
background-color: fade(@success-color, 60%); |
|
||||||
} |
|
||||||
|
|
||||||
&.error { |
|
||||||
background-color: fade(@error-color, 60%); |
|
||||||
} |
|
||||||
|
|
||||||
&.normal { |
|
||||||
background-color: rgb(0 0 0 / 30%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&-drag__bar { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
export const basicProps = { |
|
||||||
value: { |
|
||||||
type: Boolean as PropType<boolean>, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
|
|
||||||
isSlot: { |
|
||||||
type: Boolean as PropType<boolean>, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
|
|
||||||
text: { |
|
||||||
type: [String] as PropType<string>, |
|
||||||
default: t('component.verify.dragText') |
|
||||||
}, |
|
||||||
successText: { |
|
||||||
type: [String] as PropType<string>, |
|
||||||
default: t('component.verify.successText') |
|
||||||
}, |
|
||||||
height: { |
|
||||||
type: [Number, String] as PropType<number | string>, |
|
||||||
default: 40 |
|
||||||
}, |
|
||||||
|
|
||||||
width: { |
|
||||||
type: [Number, String] as PropType<number | string>, |
|
||||||
default: 220 |
|
||||||
}, |
|
||||||
|
|
||||||
circle: { |
|
||||||
type: Boolean as PropType<boolean>, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
|
|
||||||
wrapStyle: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
default: () => ({}) |
|
||||||
}, |
|
||||||
contentStyle: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
default: () => ({}) |
|
||||||
}, |
|
||||||
barStyle: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
default: () => ({}) |
|
||||||
}, |
|
||||||
actionStyle: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
default: () => ({}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export const rotateProps = { |
|
||||||
...basicProps, |
|
||||||
src: { |
|
||||||
type: String as PropType<string> |
|
||||||
}, |
|
||||||
|
|
||||||
imgWidth: { |
|
||||||
type: Number as PropType<number>, |
|
||||||
default: 260 |
|
||||||
}, |
|
||||||
|
|
||||||
imgWrapStyle: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
default: () => ({}) |
|
||||||
}, |
|
||||||
|
|
||||||
minDegree: { |
|
||||||
type: Number as PropType<number>, |
|
||||||
default: 90 |
|
||||||
}, |
|
||||||
|
|
||||||
maxDegree: { |
|
||||||
type: Number as PropType<number>, |
|
||||||
default: 270 |
|
||||||
}, |
|
||||||
|
|
||||||
diffDegree: { |
|
||||||
type: Number as PropType<number>, |
|
||||||
default: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
export interface DragVerifyActionType { |
|
||||||
resume: () => void |
|
||||||
} |
|
||||||
|
|
||||||
export interface PassingData { |
|
||||||
isPassing: boolean |
|
||||||
time: number |
|
||||||
} |
|
||||||
|
|
||||||
export interface MoveData { |
|
||||||
event: MouseEvent | TouchEvent |
|
||||||
moveDistance: number |
|
||||||
moveX: number |
|
||||||
} |
|
||||||
Loading…
Reference in new issue