36 changed files with 9 additions and 1883 deletions
@ -1,81 +0,0 @@
|
||||
import { defHttp } from '@/utils/http/axios' |
||||
import { getRefreshToken } from '@/utils/auth' |
||||
|
||||
enum Api { |
||||
Login = '/system/auth/login', |
||||
RefreshToken = '/system/auth/refresh-token?refreshToken=', |
||||
GetTenantIdByName = '/system/tenant/get-id-by-name?name=', |
||||
LoginOut = '/system/auth/logout', |
||||
GetUserInfo = '/system/auth/get-permission-info', |
||||
GetCaptcha = '/system/captcha/get', |
||||
CheckCaptcha = '/system/captcha/check', |
||||
} |
||||
|
||||
// 刷新访问令牌
|
||||
export function refreshToken() { |
||||
const refreshToken: string = getRefreshToken() |
||||
return defHttp.post({ url: Api.RefreshToken + refreshToken }) |
||||
} |
||||
|
||||
// 登出
|
||||
export function loginOut() { |
||||
return defHttp.delete({ url: Api.LoginOut }) |
||||
} |
||||
|
||||
// 获取用户权限信息
|
||||
export function getUserInfo() { |
||||
return defHttp.get({ url: Api.GetUserInfo }) |
||||
} |
||||
|
||||
// 获取登录验证码
|
||||
export function sendSmsCode(mobile, scene) { |
||||
return defHttp.post({ |
||||
url: '/system/auth/send-sms-code', |
||||
data: { |
||||
mobile, |
||||
scene, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
// 获取验证图片 以及token
|
||||
export function getCaptcha(data) { |
||||
return defHttp.post({ url: Api.GetCaptcha, data }, { isReturnNativeResponse: true }) |
||||
} |
||||
|
||||
// 滑动或者点选验证
|
||||
export function checkCaptcha(data) { |
||||
return defHttp.post({ url: Api.CheckCaptcha, data }, { isReturnNativeResponse: true }) |
||||
} |
||||
|
||||
// ========== OAUTH 2.0 相关 ==========
|
||||
|
||||
export function getAuthorize(clientId) { |
||||
return defHttp.get({ url: `/system/oauth2/authorize?clientId=${clientId}` }) |
||||
} |
||||
|
||||
export function authorize(responseType, clientId, redirectUri, state, autoApprove, checkedScopes, uncheckedScopes) { |
||||
// 构建 scopes
|
||||
const scopes = {} |
||||
for (const scope of checkedScopes) |
||||
scopes[scope] = true |
||||
|
||||
for (const scope of uncheckedScopes) |
||||
scopes[scope] = false |
||||
|
||||
// 发起请求
|
||||
return defHttp.post({ |
||||
url: '/system/oauth2/authorize', |
||||
headers: { |
||||
'Content-type': 'application/x-www-form-urlencoded', |
||||
}, |
||||
params: { |
||||
response_type: responseType, |
||||
client_id: clientId, |
||||
redirect_uri: redirectUri, |
||||
state, |
||||
auto_approve: autoApprove, |
||||
scope: JSON.stringify(scopes), |
||||
}, |
||||
}) |
||||
} |
||||
@ -1,9 +0,0 @@
|
||||
export interface UserLoginVO { |
||||
username: string |
||||
password: string |
||||
captchaVerification: string |
||||
} |
||||
|
||||
export interface TentantNameVO { |
||||
id: number |
||||
} |
||||
@ -1,12 +0,0 @@
|
||||
import type { RouteMeta } from 'vue-router' |
||||
|
||||
export interface RouteItem { |
||||
path: string |
||||
component: any |
||||
meta: RouteMeta |
||||
name?: string |
||||
alias?: string | string[] |
||||
redirect?: string |
||||
caseSensitive?: boolean |
||||
children?: RouteItem[] |
||||
} |
||||
@ -1,5 +0,0 @@
|
||||
export interface UploadApiResult { |
||||
message: string |
||||
code: number |
||||
url: string |
||||
} |
||||
@ -1,38 +0,0 @@
|
||||
/** |
||||
* @description: Login interface parameters |
||||
*/ |
||||
export interface LoginParams { |
||||
username: string |
||||
password: string |
||||
} |
||||
|
||||
/** |
||||
* @description: SmsLogin interface parameters |
||||
*/ |
||||
export interface SmsLoginParams { |
||||
mobile: number |
||||
code: number |
||||
} |
||||
|
||||
/** |
||||
* @description: Login interface return value |
||||
*/ |
||||
export interface LoginResultModel { |
||||
userId: string | number |
||||
accessToken: string |
||||
refreshToken: string |
||||
expiresTime: number |
||||
} |
||||
|
||||
/** |
||||
* @description: Get user information return value |
||||
*/ |
||||
export interface GetUserInfoModel { |
||||
user: userModel |
||||
} |
||||
|
||||
export interface userModel { |
||||
id: string | number |
||||
avatar: string |
||||
nickname: string |
||||
} |
||||
@ -1,128 +0,0 @@
|
||||
import { ContentTypeEnum } from '@/enums/httpEnum' |
||||
import { defHttp } from '@/utils/http/axios' |
||||
|
||||
export interface ProfileDept { |
||||
id: number |
||||
name: string |
||||
} |
||||
export interface ProfileRole { |
||||
id: number |
||||
name: string |
||||
} |
||||
export interface ProfilePost { |
||||
id: number |
||||
name: string |
||||
} |
||||
export interface SocialUser { |
||||
id: number |
||||
type: number |
||||
openid: string |
||||
token: string |
||||
rawTokenInfo: string |
||||
nickname: string |
||||
avatar: string |
||||
rawUserInfo: string |
||||
code: string |
||||
state: string |
||||
} |
||||
export interface ProfileVO { |
||||
id: number |
||||
username: string |
||||
nickname: string |
||||
dept: ProfileDept |
||||
roles: ProfileRole[] |
||||
posts: ProfilePost[] |
||||
socialUsers: SocialUser[] |
||||
email: string |
||||
mobile: string |
||||
sex: number |
||||
avatar: string |
||||
status: number |
||||
remark: string |
||||
loginIp: string |
||||
loginDate: Date |
||||
createTime: Date |
||||
} |
||||
|
||||
export interface UserProfileUpdateReqVO { |
||||
nickname: string |
||||
email: string |
||||
mobile: string |
||||
sex: number |
||||
} |
||||
|
||||
enum Api { |
||||
getUserProfileApi = '/system/user/profile/get', |
||||
putUserProfileApi = '/system/user/profile/update', |
||||
uploadAvatarApi = '/system/user/profile/update-avatar', |
||||
updateUserPwdApi = '/system/user/profile/update-password', |
||||
socialBindApi = '/system/social-user/bind', |
||||
socialUnbindApi = '/system/social-user/unbind', |
||||
} |
||||
|
||||
/** |
||||
* @description: getUserProfileApi |
||||
*/ |
||||
export function getUserProfileApi() { |
||||
return defHttp.get({ url: Api.getUserProfileApi }) |
||||
} |
||||
|
||||
/** |
||||
* @description: updateUserProfileApi |
||||
*/ |
||||
export function updateUserProfileApi(data: UserProfileUpdateReqVO) { |
||||
return defHttp.put({ url: Api.putUserProfileApi, data }) |
||||
} |
||||
|
||||
// 用户密码重置
|
||||
export function updateUserPwdApi(oldPassword: string, newPassword: string) { |
||||
return defHttp.put({ |
||||
url: Api.updateUserPwdApi, |
||||
data: { |
||||
oldPassword, |
||||
newPassword, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
// 用户头像上传
|
||||
export function uploadAvatarApi(data) { |
||||
return defHttp.put({ |
||||
url: Api.uploadAvatarApi, |
||||
headers: { |
||||
'Content-type': ContentTypeEnum.FORM_DATA, |
||||
'ignoreCancelToken': true, |
||||
}, |
||||
data, |
||||
}) |
||||
} |
||||
|
||||
// 社交绑定，使用 code 授权码
|
||||
export function socialBind(type, code, state) { |
||||
return defHttp.post({ |
||||
url: Api.socialBindApi, |
||||
data: { |
||||
type, |
||||
code, |
||||
state, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
// 取消社交绑定
|
||||
export function socialUnbind(type, openid) { |
||||
return defHttp.delete({ |
||||
url: Api.socialUnbindApi, |
||||
data: { |
||||
type, |
||||
openid, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
// 社交授权的跳转
|
||||
export function socialAuthRedirect(type, redirectUri) { |
||||
return defHttp.get({ |
||||
url: `/system/auth/social-auth-redirect?type=${type}&redirectUri=${redirectUri}`, |
||||
}) |
||||
} |
||||
@ -1,4 +0,0 @@
|
||||
import verify from './src/Verify.vue' |
||||
import { withInstall } from '@/utils/index' |
||||
|
||||
export const Verify = withInstall(verify) |
||||
@ -1,132 +0,0 @@
|
||||
<script type="text/babel"> |
||||
/** |
||||
* Verify 验证码组件 |
||||
* @description 分发验证码使用 |
||||
*/ |
||||
import { computed, ref, toRefs, watchEffect } from 'vue' |
||||
import VerifySlide from './Verify/VerifySlide.vue' |
||||
import VerifyPoints from './Verify/VerifyPoints.vue' |
||||
import { useI18n } from '@/hooks/web/useI18n' |
||||
import './style/verify.css' |
||||
|
||||
export default { |
||||
name: 'Vue3Verify', |
||||
components: { |
||||
VerifySlide, |
||||
VerifyPoints, |
||||
}, |
||||
props: { |
||||
captchaType: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
figure: { |
||||
type: Number, |
||||
}, |
||||
arith: { |
||||
type: Number, |
||||
}, |
||||
mode: { |
||||
type: String, |
||||
default: 'pop', |
||||
}, |
||||
vSpace: { |
||||
type: Number, |
||||
}, |
||||
explain: { |
||||
type: String, |
||||
}, |
||||
imgSize: { |
||||
type: Object, |
||||
default() { |
||||
return { |
||||
width: '310px', |
||||
height: '155px', |
||||
} |
||||
}, |
||||
}, |
||||
blockSize: { |
||||
type: Object, |
||||
}, |
||||
barSize: { |
||||
type: Object, |
||||
}, |
||||
}, |
||||
setup(props) { |
||||
const { t } = useI18n() |
||||
const { captchaType, mode } = toRefs(props) |
||||
const clickShow = ref(false) |
||||
const verifyType = ref(undefined) |
||||
const componentType = ref(undefined) |
||||
|
||||
const instance = ref({}) |
||||
|
||||
const showBox = computed(() => { |
||||
if (mode.value === 'pop') |
||||
return clickShow.value |
||||
else |
||||
return true |
||||
}) |
||||
/** |
||||
* refresh |
||||
* @description 刷新 |
||||
*/ |
||||
const refresh = () => { |
||||
if (instance.value.refresh) |
||||
instance.value.refresh() |
||||
} |
||||
const closeBox = () => { |
||||
clickShow.value = false |
||||
refresh() |
||||
} |
||||
const show = () => { |
||||
if (mode.value === 'pop') |
||||
clickShow.value = true |
||||
} |
||||
watchEffect(() => { |
||||
switch (captchaType.value) { |
||||
case 'blockPuzzle': |
||||
verifyType.value = '2' |
||||
componentType.value = 'VerifySlide' |
||||
break |
||||
case 'clickWord': |
||||
verifyType.value = '' |
||||
componentType.value = 'VerifyPoints' |
||||
break |
||||
} |
||||
}) |
||||
|
||||
return { |
||||
t, |
||||
clickShow, |
||||
verifyType, |
||||
componentType, |
||||
instance, |
||||
showBox, |
||||
closeBox, |
||||
show, |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div v-show="showBox" :class="mode === 'pop' ? 'mask' : ''"> |
||||
<div :class="mode === 'pop' ? 'verifybox' : ''" :style="{ 'max-width': `${parseInt(imgSize.width) + 20}px` }"> |
||||
<div v-if="mode === 'pop'" class="verifybox-top"> |
||||
{{ t('component.captcha.verification') }} |
||||
<span class="verifybox-close" @click="closeBox"> |
||||
<i class="iconfont icon-close" /> |
||||
</span> |
||||
</div> |
||||
<div class="verifybox-bottom" :style="{ padding: mode === 'pop' ? '10px' : '0' }"> |
||||
<!-- 验证码容器 --> |
||||
<component |
||||
:is="componentType" v-if="componentType" ref="instance" :captcha-type="captchaType" :type="verifyType" |
||||
:figure="figure" :arith="arith" :mode="mode" :spaces="vSpace" :explain="explain" :img-size="imgSize" |
||||
:block-size="blockSize" :bar-size="barSize" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
@ -1,256 +0,0 @@
|
||||
<script type="text/babel" setup> |
||||
/** |
||||
* VerifyPoints |
||||
* @description 点选 |
||||
*/ |
||||
import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue' |
||||
import { resetSize } from './../utils/util' |
||||
import { aesEncrypt } from './../utils/ase' |
||||
import { checkCaptcha, getCaptcha } from '@/api/base/login' |
||||
import { useI18n } from '@/hooks/web/useI18n' |
||||
|
||||
const props = defineProps({ |
||||
// 弹出式pop，固定fixed |
||||
mode: { |
||||
type: String, |
||||
default: 'fixed', |
||||
}, |
||||
captchaType: { |
||||
type: String, |
||||
}, |
||||
// 间隔 |
||||
spaces: { |
||||
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() |
||||
const secretKey = ref('') // 后端返回的ase加密秘钥 |
||||
const checkNum = ref(3) // 默认需要点击的字数 |
||||
const fontPos = reactive([]) // 选中的坐标信息 |
||||
const checkPosArr = reactive([]) // 用户点击的坐标 |
||||
const num = ref(1) // 点击的记数 |
||||
const pointBackImgBase = ref('') // 后端获取到的背景图片 |
||||
const poinTextList = reactive([]) // 后端返回的点击字体顺序 |
||||
const backToken = ref('') // 后端返回的token值 |
||||
const setSize = reactive({ |
||||
imgHeight: 0, |
||||
imgWidth: 0, |
||||
barHeight: 0, |
||||
barWidth: 0, |
||||
}) |
||||
const tempPoints = reactive([]) |
||||
const text = ref('') |
||||
const barAreaColor = ref(undefined) |
||||
const barAreaBorderColor = ref(undefined) |
||||
const showRefresh = ref(true) |
||||
const bindingClick = ref(true) |
||||
|
||||
function init() { |
||||
// 加载页面 |
||||
fontPos.splice(0, fontPos.length) |
||||
checkPosArr.splice(0, checkPosArr.length) |
||||
num.value = 1 |
||||
getPictrue() |
||||
nextTick(() => { |
||||
const { 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 getMousePos = function (obj, e) { |
||||
const x = e.offsetX |
||||
const y = e.offsetY |
||||
return { x, y } |
||||
} |
||||
// 创建坐标点 |
||||
const createPoint = function (pos) { |
||||
tempPoints.push(Object.assign({}, pos)) |
||||
return num.value + 1 |
||||
} |
||||
|
||||
// 坐标转换函数 |
||||
const pointTransfrom = function (pointArr, imgSize) { |
||||
const newPointArr = pointArr.map((p) => { |
||||
const x = Math.round((310 * p.x) / Number.parseInt(imgSize.imgWidth)) |
||||
const y = Math.round((155 * p.y) / Number.parseInt(imgSize.imgHeight)) |
||||
return { x, y } |
||||
}) |
||||
return newPointArr |
||||
} |
||||
|
||||
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 |
||||
} |
||||
|
||||
function canvasClick(e) { |
||||
checkPosArr.push(getMousePos(canvas, e)) |
||||
if (num.value === checkNum.value) { |
||||
num.value = createPoint(getMousePos(canvas, e)) |
||||
// 按比例转换坐标值 |
||||
const arr = pointTransfrom(checkPosArr, setSize) |
||||
checkPosArr.length = 0 |
||||
checkPosArr.push(...arr) |
||||
// 等创建坐标执行完 |
||||
setTimeout(() => { |
||||
// var flag = this.comparePos(this.fontPos, this.checkPosArr); |
||||
// 发送后端请求 |
||||
const captchaVerification = secretKey.value |
||||
? aesEncrypt(`${backToken.value}---${JSON.stringify(checkPosArr)}`, secretKey.value) |
||||
: `${backToken.value}---${JSON.stringify(checkPosArr)}` |
||||
const 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)) |
||||
} |
||||
|
||||
// 请求背景图片和验证图片 |
||||
async function getPictrue() { |
||||
const 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 |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<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': `${spaces}px`, |
||||
}" |
||||
> |
||||
<div v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh"> |
||||
<i class="iconfont icon-refresh" /> |
||||
</div> |
||||
<img |
||||
ref="canvas" |
||||
:src="`data:image/png;base64,${pointBackImgBase}`" |
||||
alt="" |
||||
style=" display: block;width: 100%; height: 100%" |
||||
@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> |
||||
@ -1,364 +0,0 @@
|
||||
<script type="text/babel" setup> |
||||
/** |
||||
* VerifySlide |
||||
* @description 滑块 |
||||
*/ |
||||
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
import { aesEncrypt } from './../utils/ase' |
||||
import { resetSize } from './../utils/util' |
||||
import { checkCaptcha, getCaptcha } from '@/api/base/login' |
||||
import { useI18n } from '@/hooks/web/useI18n' |
||||
|
||||
const props = defineProps({ |
||||
captchaType: { |
||||
type: String, |
||||
}, |
||||
type: { |
||||
type: String, |
||||
default: '1', |
||||
}, |
||||
// 弹出式pop，固定fixed |
||||
mode: { |
||||
type: String, |
||||
default: 'fixed', |
||||
}, |
||||
spaces: { |
||||
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') |
||||
}) |
||||
function init() { |
||||
if (explain.value === '') |
||||
text.value = t('component.captcha.slide') |
||||
else |
||||
text.value = explain.value |
||||
|
||||
getPictrue() |
||||
nextTick(() => { |
||||
const { 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', (e) => { |
||||
move(e) |
||||
}) |
||||
window.removeEventListener('mousemove', (e) => { |
||||
move(e) |
||||
}) |
||||
|
||||
// 鼠标松开 |
||||
window.removeEventListener('touchend', () => { |
||||
end() |
||||
}) |
||||
window.removeEventListener('mouseup', () => { |
||||
end() |
||||
}) |
||||
|
||||
window.addEventListener('touchmove', (e) => { |
||||
move(e) |
||||
}) |
||||
window.addEventListener('mousemove', (e) => { |
||||
move(e) |
||||
}) |
||||
|
||||
// 鼠标松开 |
||||
window.addEventListener('touchend', () => { |
||||
end() |
||||
}) |
||||
window.addEventListener('mouseup', () => { |
||||
end() |
||||
}) |
||||
} |
||||
watch(type, () => { |
||||
init() |
||||
}) |
||||
onMounted(() => { |
||||
// 禁止拖拽 |
||||
init() |
||||
proxy.$el.onselectstart = function () { |
||||
return false |
||||
} |
||||
}) |
||||
// 鼠标按下 |
||||
function start(e) { |
||||
e = e || window.event |
||||
let x |
||||
if (!e.touches) { |
||||
// 兼容PC端 |
||||
x = e.clientX |
||||
} |
||||
else { |
||||
// 兼容移动端 |
||||
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 |
||||
} |
||||
} |
||||
// 鼠标移动 |
||||
function move(e) { |
||||
e = e || window.event |
||||
let x |
||||
if (status.value && isEnd.value === false) { |
||||
if (!e.touches) { |
||||
// 兼容PC端 |
||||
x = e.clientX |
||||
} |
||||
else { |
||||
// 兼容移动端 |
||||
x = e.touches[0].pageX |
||||
} |
||||
const bar_area_left = barArea.value.getBoundingClientRect().left |
||||
let move_block_left = x - bar_area_left // 小方块相对于父元素的left值 |
||||
if (move_block_left >= barArea.value.offsetWidth - Number.parseInt(Number.parseInt(blockSize.value.width) / 2) - 2) |
||||
move_block_left = barArea.value.offsetWidth - Number.parseInt(Number.parseInt(blockSize.value.width) / 2) - 2 |
||||
|
||||
if (move_block_left <= 0) |
||||
move_block_left = Number.parseInt(Number.parseInt(blockSize.value.width) / 2) |
||||
|
||||
// 拖动后小方块的left值 |
||||
moveBlockLeft.value = `${move_block_left - startLeft.value}px` |
||||
leftBarWidth.value = `${move_block_left - startLeft.value}px` |
||||
} |
||||
} |
||||
|
||||
// 鼠标松开 |
||||
function end() { |
||||
endMovetime.value = +new Date() |
||||
// 判断是否重合 |
||||
if (status.value && isEnd.value === false) { |
||||
let moveLeftDistance = Number.parseInt((moveBlockLeft.value || '').replace('px', '')) |
||||
moveLeftDistance = (moveLeftDistance * 310) / Number.parseInt(setSize.imgWidth) |
||||
const 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(() => { |
||||
refresh() |
||||
}, 1000) |
||||
proxy.$parent.$emit('error', proxy) |
||||
tipWords.value = t('component.captcha.fail') |
||||
setTimeout(() => { |
||||
tipWords.value = '' |
||||
}, 1000) |
||||
} |
||||
}) |
||||
status.value = false |
||||
} |
||||
} |
||||
|
||||
async function refresh() { |
||||
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) |
||||
} |
||||
|
||||
// 请求背景图片和验证图片 |
||||
async function getPictrue() { |
||||
const 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> |
||||
|
||||
<template> |
||||
<div style="position: relative"> |
||||
<div v-if="type === '2'" class="verify-img-out" :style="{ height: `${parseInt(setSize.imgHeight) + spaces}px` }"> |
||||
<div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }"> |
||||
<img :src="`data:image/png;base64,${backImgBase}`" alt="" style=" display: block;width: 100%; height: 100%"> |
||||
<div v-show="showRefresh" class="verify-refresh" @click="refresh"> |
||||
<i class="iconfont icon-refresh" /> |
||||
</div> |
||||
<transition name="tips"> |
||||
<span v-if="tipWords" class="verify-tips" :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" /> |
||||
<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" /> |
||||
<div |
||||
class="verify-move-block" |
||||
:style="{ |
||||
'width': barSize.height, |
||||
'height': barSize.height, |
||||
'background-color': moveBlockBackgroundColor, |
||||
'left': moveBlockLeft, |
||||
'transition': transitionLeft, |
||||
}" |
||||
@touchstart="start" |
||||
@mousedown="start" |
||||
> |
||||
<i class="iconfont verify-icon" :class="[iconClass]" :style="{ color: iconColor }" /> |
||||
<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) + spaces}px`, |
||||
'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`, |
||||
}" |
||||
> |
||||
<img :src="blockBackImgBase" alt="" style=" display: block;width: 100%; height: 100%; -webkit-user-drag: none"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
@ -1,4 +0,0 @@
|
||||
import VerifySlide from './VerifySlide.vue' |
||||
import VerifyPoints from './VerifyPoints.vue' |
||||
|
||||
export { VerifySlide, VerifyPoints } |
||||
File diff suppressed because one or more lines are too long
@ -1,15 +0,0 @@
|
||||
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() |
||||
} |
||||
@ -1,93 +0,0 @@
|
||||
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.includes('%')) |
||||
img_width = `${(Number.parseInt(vm.imgSize.width) / 100) * parentWidth}px` |
||||
else |
||||
img_width = vm.imgSize.width |
||||
|
||||
if (vm.imgSize.height.includes('%')) |
||||
img_height = `${(Number.parseInt(vm.imgSize.height) / 100) * parentHeight}px` |
||||
else |
||||
img_height = vm.imgSize.height |
||||
|
||||
if (vm.barSize.width.includes('%')) |
||||
bar_width = `${(Number.parseInt(vm.barSize.width) / 100) * parentWidth}px` |
||||
else |
||||
bar_width = vm.barSize.width |
||||
|
||||
if (vm.barSize.height.includes('%')) |
||||
bar_height = `${(Number.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,69 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { List } from 'ant-design-vue' |
||||
import { onMounted } from 'vue' |
||||
import type { ListItem } from './data' |
||||
import { CollapseContainer } from '@/components/Container/index' |
||||
import { getUserProfileApi } from '@/api/base/profile' |
||||
|
||||
const accountBindList: ListItem[] = [ |
||||
{ |
||||
key: '20', |
||||
title: '钉钉', |
||||
description: '当前未绑定钉钉账号', |
||||
extra: '绑定', |
||||
avatar: 'i-ri:dingding-fill', |
||||
color: '#2eabff', |
||||
}, |
||||
{ |
||||
key: '30', |
||||
title: '企业微信', |
||||
description: '当前未绑定企业微信', |
||||
extra: '绑定', |
||||
avatar: 'i-ri:wechat-line', |
||||
color: '#2eabff', |
||||
}, |
||||
] |
||||
|
||||
async function init() { |
||||
const userInfo = await getUserProfileApi() |
||||
// TODO |
||||
for (const i in accountBindList) { |
||||
if (userInfo.socialUsers) { |
||||
for (const j in userInfo.socialUsers) { |
||||
if (accountBindList[i].key === userInfo.socialUsers[j].type) { |
||||
accountBindList[i].title = '已绑定' |
||||
break |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
onMounted(async () => { |
||||
await init() |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<CollapseContainer title="账号绑定" :can-expan="false"> |
||||
<List> |
||||
<template v-for="item in accountBindList" :key="item.key"> |
||||
<List.Item> |
||||
<List.Item.Meta> |
||||
<template #avatar> |
||||
<span v-if="item.avatar" class="text-4xl" :class="item.avatar" :style="{ color: item.color }" /> |
||||
</template> |
||||
<template #title> |
||||
{{ item.title }} |
||||
<a-button v-if="item.extra" type="link" size="small" class="float-right mr-7.5 mt-2.5 cursor-pointer"> |
||||
{{ item.extra }} |
||||
</a-button> |
||||
</template> |
||||
<template #description> |
||||
<div>{{ item.description }}</div> |
||||
</template> |
||||
</List.Item.Meta> |
||||
</List.Item> |
||||
</template> |
||||
</List> |
||||
</CollapseContainer> |
||||
</template> |
||||
@ -1,76 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { Button, Col, Row } from 'ant-design-vue' |
||||
import { computed, onMounted } from 'vue' |
||||
import { baseSetschemas } from './data' |
||||
import { BasicForm, useForm } from '@/components/Form/index' |
||||
import { CollapseContainer } from '@/components/Container' |
||||
import { CropperAvatar } from '@/components/Cropper' |
||||
import { useMessage } from '@/hooks/web/useMessage' |
||||
import headerImg from '@/assets/images/header.jpg' |
||||
import { useUserStore } from '@/store/modules/user' |
||||
import { getUserProfileApi, updateUserProfileApi, uploadAvatarApi } from '@/api/base/profile' |
||||
|
||||
const { createMessage } = useMessage() |
||||
const userStore = useUserStore() |
||||
|
||||
const [register, { setFieldsValue, validate }] = useForm({ |
||||
labelWidth: 120, |
||||
schemas: baseSetschemas, |
||||
showActionButtonGroup: false, |
||||
}) |
||||
|
||||
onMounted(async () => { |
||||
const data = await getUserProfileApi() |
||||
setFieldsValue(data) |
||||
}) |
||||
|
||||
const avatar = computed(() => { |
||||
const { avatar } = userStore.getUserInfo.user |
||||
return avatar || headerImg |
||||
}) |
||||
|
||||
async function updateAvatar({ data }) { |
||||
const res = await uploadAvatarApi({ avatarFile: data }) |
||||
const userinfo = userStore.getUserInfo |
||||
userinfo.user.avatar = res |
||||
userStore.setUserInfo(userinfo) |
||||
} |
||||
|
||||
async function handleSubmit() { |
||||
try { |
||||
const values = await validate() |
||||
await updateUserProfileApi(values as any) |
||||
} |
||||
finally { |
||||
createMessage.success('更新成功！') |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<CollapseContainer title="基本设置" :can-expan="false"> |
||||
<Row :gutter="24"> |
||||
<Col :span="14"> |
||||
<BasicForm @register="register" /> |
||||
</Col> |
||||
<Col :span="10"> |
||||
<div> |
||||
<div class="mb-2"> |
||||
头像 |
||||
</div> |
||||
<CropperAvatar |
||||
:value="avatar" |
||||
btn-text="更换头像" |
||||
:btn-props="{ preIcon: 'i-ant-design:cloud-upload-outlined' }" |
||||
width="150" |
||||
class="mb-4 block rounded-full" |
||||
@change="updateAvatar" |
||||
/> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
<Button type="primary" @click="handleSubmit"> |
||||
更新基本信息 |
||||
</Button> |
||||
</CollapseContainer> |
||||
</template> |
||||
@ -1,49 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
import { passwordSchema } from './data' |
||||
import { useI18n } from '@/hooks/web/useI18n' |
||||
import { useMessage } from '@/hooks/web/useMessage' |
||||
import { BasicForm, useForm } from '@/components/Form' |
||||
import { BasicModal, useModalInner } from '@/components/Modal' |
||||
import { updateUserPwdApi } from '@/api/base/profile' |
||||
|
||||
defineOptions({ name: 'PasswordModal' }) |
||||
|
||||
const emit = defineEmits(['success', 'register']) |
||||
const { t } = useI18n() |
||||
const { createMessage } = useMessage() |
||||
const title = ref('修改密码') |
||||
|
||||
const [registerForm, { resetFields, validate }] = useForm({ |
||||
labelWidth: 120, |
||||
baseColProps: { span: 24 }, |
||||
schemas: passwordSchema, |
||||
showActionButtonGroup: false, |
||||
actionColOptions: { span: 23 }, |
||||
}) |
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(() => { |
||||
resetFields() |
||||
setModalProps({ confirmLoading: false }) |
||||
}) |
||||
|
||||
async function handleSubmit() { |
||||
try { |
||||
const values = await validate() |
||||
await updateUserPwdApi(values.oldPassword, values.newPassword) |
||||
setModalProps({ confirmLoading: true }) |
||||
closeModal() |
||||
emit('success') |
||||
createMessage.success(t('common.saveSuccessText')) |
||||
} |
||||
finally { |
||||
setModalProps({ confirmLoading: false }) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<BasicModal v-bind="$attrs" :title="title" @register="registerModal" @ok="handleSubmit"> |
||||
<BasicForm @register="registerForm" /> |
||||
</BasicModal> |
||||
</template> |
||||
@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { List } from 'ant-design-vue' |
||||
import { secureSettingList } from './data' |
||||
import PasswordModal from './PasswordModal.vue' |
||||
import { CollapseContainer } from '@/components/Container/index' |
||||
import { useModal } from '@/components/Modal' |
||||
import { useMessage } from '@/hooks/web/useMessage' |
||||
|
||||
const ListItem = List.Item |
||||
const ListItemMeta = List.Item.Meta |
||||
|
||||
const { createMessage } = useMessage() |
||||
const [registerModal, { openModal }] = useModal() |
||||
|
||||
function handleEdit(title: string) { |
||||
if (title === '账户密码') |
||||
openModal(true, {}) |
||||
} |
||||
function handleSuccess() { |
||||
createMessage.success('更新成功！') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<CollapseContainer title="安全设置" :can-expan="false"> |
||||
<List> |
||||
<template v-for="item in secureSettingList" :key="item.key"> |
||||
<ListItem> |
||||
<ListItemMeta> |
||||
<template #title> |
||||
{{ item.title }} |
||||
<div v-if="item.extra" class="float-right mr-7.5 mt-2.5 cursor-pointer text-blue-500 font-normal"> |
||||
<a-button type="link" @click="handleEdit(item.title)"> |
||||
{{ item.extra }} |
||||
</a-button> |
||||
</div> |
||||
</template> |
||||
<template #description> |
||||
<div>{{ item.description }}</div> |
||||
</template> |
||||
</ListItemMeta> |
||||
</ListItem> |
||||
</template> |
||||
</List> |
||||
</CollapseContainer> |
||||
<PasswordModal @register="registerModal" @success="handleSuccess" /> |
||||
</template> |
||||
@ -1,165 +0,0 @@
|
||||
/* eslint-disable prefer-promise-reject-errors */ |
||||
import type { FormSchema } from '@/components/Form' |
||||
import { useI18n } from '@/hooks/web/useI18n' |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
export interface ListItem { |
||||
key: string |
||||
title: string |
||||
description: string |
||||
extra?: string |
||||
avatar?: string |
||||
color?: string |
||||
} |
||||
|
||||
// tab的list
|
||||
export const settingList = [ |
||||
{ |
||||
key: '1', |
||||
name: '基本设置', |
||||
component: 'BaseSetting', |
||||
}, |
||||
{ |
||||
key: '2', |
||||
name: '安全设置', |
||||
component: 'SecureSetting', |
||||
}, |
||||
{ |
||||
key: '3', |
||||
name: '账号绑定', |
||||
component: 'AccountBind', |
||||
}, |
||||
] |
||||
|
||||
// 基础设置 form
|
||||
export const baseSetschemas: FormSchema[] = [ |
||||
{ |
||||
field: 'nickname', |
||||
component: 'Input', |
||||
label: t('profile.user.nickname'), |
||||
colProps: { span: 18 }, |
||||
}, |
||||
{ |
||||
field: 'mobile', |
||||
component: 'Input', |
||||
label: t('profile.user.mobile'), |
||||
colProps: { span: 18 }, |
||||
}, |
||||
{ |
||||
field: 'email', |
||||
component: 'Input', |
||||
label: t('profile.user.email'), |
||||
colProps: { span: 18 }, |
||||
}, |
||||
{ |
||||
field: 'sex', |
||||
component: 'RadioGroup', |
||||
componentProps: { |
||||
options: [ |
||||
{ label: '男', value: 1 }, |
||||
{ label: '女', value: 2 }, |
||||
], |
||||
}, |
||||
label: t('profile.user.sex'), |
||||
colProps: { span: 18 }, |
||||
}, |
||||
] |
||||
|
||||
// 安全设置 list
|
||||
export const secureSettingList: ListItem[] = [ |
||||
{ |
||||
key: '1', |
||||
title: '账户密码', |
||||
description: '当前密码强度：：强', |
||||
extra: '修改', |
||||
}, |
||||
{ |
||||
key: '2', |
||||
title: '密保手机', |
||||
description: '已绑定手机：：138****8293', |
||||
extra: '修改', |
||||
}, |
||||
{ |
||||
key: '3', |
||||
title: '密保问题', |
||||
description: '未设置密保问题，密保问题可有效保护账户安全', |
||||
extra: '修改', |
||||
}, |
||||
{ |
||||
key: '4', |
||||
title: '备用邮箱', |
||||
description: '已绑定邮箱：：ant***sign.com', |
||||
extra: '修改', |
||||
}, |
||||
{ |
||||
key: '5', |
||||
title: 'MFA 设备', |
||||
description: '未绑定 MFA 设备，绑定后，可以进行二次确认', |
||||
extra: '修改', |
||||
}, |
||||
] |
||||
|
||||
// 新消息通知 list
|
||||
export const msgNotifyList: ListItem[] = [ |
||||
{ |
||||
key: '1', |
||||
title: '账户密码', |
||||
description: '其他用户的消息将以站内信的形式通知', |
||||
}, |
||||
{ |
||||
key: '2', |
||||
title: '系统消息', |
||||
description: '系统消息将以站内信的形式通知', |
||||
}, |
||||
{ |
||||
key: '3', |
||||
title: '待办任务', |
||||
description: '待办任务将以站内信的形式通知', |
||||
}, |
||||
] |
||||
|
||||
export const passwordSchema: FormSchema[] = [ |
||||
{ |
||||
field: 'oldPassword', |
||||
label: '当前密码', |
||||
component: 'InputPassword', |
||||
required: true, |
||||
}, |
||||
{ |
||||
field: 'newPassword', |
||||
label: '新密码', |
||||
component: 'StrengthMeter', |
||||
componentProps: { |
||||
placeholder: '新密码', |
||||
}, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入新密码', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
field: 'confirmPassword', |
||||
label: '确认密码', |
||||
component: 'InputPassword', |
||||
|
||||
dynamicRules: ({ values }) => { |
||||
return [ |
||||
{ |
||||
required: true, |
||||
validator: (_, value) => { |
||||
if (!value) |
||||
return Promise.reject('密码不能为空') |
||||
|
||||
if (value !== values.newPassword) |
||||
return Promise.reject('两次输入的密码不一致!') |
||||
|
||||
return Promise.resolve() |
||||
}, |
||||
}, |
||||
] |
||||
}, |
||||
}, |
||||
] |
||||
@ -1,29 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { TabPane, Tabs } from 'ant-design-vue' |
||||
import { ref } from 'vue' |
||||
import { settingList } from './data' |
||||
import BaseSetting from './BaseSetting.vue' |
||||
import SecureSetting from './SecureSetting.vue' |
||||
import AccountBind from './AccountBind.vue' |
||||
import { ScrollContainer } from '@/components/Container/index' |
||||
|
||||
const wrapperRef = ref(null) |
||||
|
||||
const tabBarStyle = { width: '220px' } |
||||
</script> |
||||
|
||||
<template> |
||||
<ScrollContainer> |
||||
<div ref="wrapperRef" class="m-3 rounded-1.5 bg-[var(--component-background)]"> |
||||
<Tabs tab-position="left" :tab-bar-style="tabBarStyle"> |
||||
<template v-for="item in settingList" :key="item.key"> |
||||
<TabPane :tab="item.name"> |
||||
<BaseSetting v-if="item.component === 'BaseSetting'" /> |
||||
<SecureSetting v-if="item.component === 'SecureSetting'" /> |
||||
<AccountBind v-if="item.component === 'AccountBind'" /> |
||||
</TabPane> |
||||
</template> |
||||
</Tabs> |
||||
</div> |
||||
</ScrollContainer> |
||||
</template> |
||||
Loading…
Reference in new issue