feat: 添加登录，注册，忘记密码功能
This commit is contained in:
260
locales/en.yaml
260
locales/en.yaml
@@ -1,124 +1,136 @@
|
||||
buttons:
|
||||
pureLoginOut: LoginOut
|
||||
pureLogin: Login
|
||||
pureOpenSystemSet: Open System Configs
|
||||
pureReload: Reload
|
||||
pureCloseCurrentTab: Close CurrentTab
|
||||
pureCloseLeftTabs: Close LeftTabs
|
||||
pureCloseRightTabs: Close RightTabs
|
||||
pureCloseOtherTabs: Close OtherTabs
|
||||
pureCloseAllTabs: Close AllTabs
|
||||
pureContentFullScreen: Content FullScreen
|
||||
pureContentExitFullScreen: Content ExitFullScreen
|
||||
pureClickCollapse: Collapse
|
||||
pureClickExpand: Expand
|
||||
pureConfirm: Confirm
|
||||
pureSwitch: Switch
|
||||
pureClose: Close
|
||||
pureBackTop: BackTop
|
||||
pureOpenText: Open
|
||||
pureCloseText: Close
|
||||
search:
|
||||
pureTotal: Total
|
||||
pureHistory: History
|
||||
pureCollect: Collect
|
||||
pureDragSort: （Drag Sort）
|
||||
pureEmpty: Empty
|
||||
purePlaceholder: Search Menu
|
||||
panel:
|
||||
pureSystemSet: System Configs
|
||||
pureCloseSystemSet: Close System Configs
|
||||
pureClearCacheAndToLogin: Clear cache and return to login page
|
||||
pureClearCache: Clear Cache
|
||||
pureOverallStyle: Overall Style
|
||||
pureOverallStyleLight: Light
|
||||
pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
|
||||
pureOverallStyleDark: Dark
|
||||
pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
|
||||
pureOverallStyleSystem: Auto
|
||||
pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
|
||||
pureThemeColor: Theme Color
|
||||
pureLayoutModel: Layout Model
|
||||
pureVerticalTip: The menu on the left is familiar and friendly
|
||||
pureHorizontalTip: Top menu, concise overview
|
||||
pureMixTip: Mixed menu, flexible
|
||||
pureStretch: Stretch Page
|
||||
pureStretchFixed: Fixed
|
||||
pureStretchFixedTip: Compact pages make it easy to find the information you need
|
||||
pureStretchCustom: Custom
|
||||
pureStretchCustomTip: Minimum 1280, maximum 1600
|
||||
pureTagsStyle: Tags Style
|
||||
pureTagsStyleSmart: Smart
|
||||
pureTagsStyleSmartTip: Smart tags add fun and brilliance
|
||||
pureTagsStyleCard: Card
|
||||
pureTagsStyleCardTip: Card tags for efficient browsing
|
||||
pureTagsStyleChrome: Chrome
|
||||
pureTagsStyleChromeTip: Chrome style is classic and elegant
|
||||
pureInterfaceDisplay: Interface Display
|
||||
pureGreyModel: Grey Model
|
||||
pureWeakModel: Weak Model
|
||||
pureHiddenTags: Hidden Tags
|
||||
pureHiddenFooter: Hidden Footer
|
||||
pureMultiTagsCache: MultiTags Cache
|
||||
menus:
|
||||
pureHome: Home
|
||||
pureLogin: Login
|
||||
pureAbnormal: Abnormal Page
|
||||
pureFourZeroFour: "404"
|
||||
pureFourZeroOne: "403"
|
||||
pureFive: "500"
|
||||
purePermission: Permission Manage
|
||||
purePermissionPage: Page Permission
|
||||
purePermissionButton: Button Permission
|
||||
purePermissionButtonRouter: Route return button permission
|
||||
purePermissionButtonLogin: Login interface return button permission
|
||||
status:
|
||||
pureLoad: Loading...
|
||||
pureMessage: Message
|
||||
pureNotify: Notify
|
||||
pureTodo: Todo
|
||||
pureNoMessage: No Message
|
||||
pureNoNotify: No Notify
|
||||
pureNoTodo: No Todo
|
||||
login:
|
||||
pureUsername: Username
|
||||
purePassword: Password
|
||||
pureVerifyCode: VerifyCode
|
||||
pureRemember: days no need to login
|
||||
pureRememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
|
||||
pureSure: Sure Password
|
||||
pureForget: Forget Password?
|
||||
pureLogin: Login
|
||||
pureThirdLogin: Third Login
|
||||
purePhoneLogin: Phone Login
|
||||
pureQRCodeLogin: QRCode Login
|
||||
pureRegister: Register
|
||||
pureWeChatLogin: WeChat Login
|
||||
pureAlipayLogin: Alipay Login
|
||||
pureQQLogin: QQ Login
|
||||
pureWeiBoLogin: Weibo Login
|
||||
purePhone: Phone
|
||||
pureSmsVerifyCode: SMS VerifyCode
|
||||
pureBack: Back
|
||||
pureTest: Mock Test
|
||||
pureTip: After scanning the code, click "Confirm" to complete the login
|
||||
pureDefinite: Definite
|
||||
pureLoginSuccess: Login Success
|
||||
pureLoginFail: Login Fail
|
||||
pureRegisterSuccess: Regist Success
|
||||
pureTickPrivacy: Please tick Privacy Policy
|
||||
pureReadAccept: I have read it carefully and accept
|
||||
purePrivacyPolicy: Privacy Policy
|
||||
pureGetVerifyCode: Get VerifyCode
|
||||
pureInfo: Seconds
|
||||
pureUsernameReg: Please enter username
|
||||
purePassWordReg: Please enter password
|
||||
pureVerifyCodeReg: Please enter verify code
|
||||
pureVerifyCodeCorrectReg: Please enter correct verify code
|
||||
pureVerifyCodeSixReg: Please enter a 6-digit verify code
|
||||
purePhoneReg: Please enter the phone
|
||||
purePhoneCorrectReg: Please enter the correct phone number format
|
||||
purePassWordRuleReg: The password format should be any combination of 8-18 digits
|
||||
purePassWordSureReg: Please enter confirm password
|
||||
purePassWordDifferentReg: The two passwords do not match!
|
||||
purePassWordUpdateReg: Password has been updated
|
||||
buttons:AccountSettings: Account
|
||||
buttons:LoginOut: LoginOut
|
||||
buttons:Login: Login
|
||||
buttons:OpenSystemSet: Open System Configs
|
||||
buttons:Reload: Reload
|
||||
buttons:CloseCurrentTab: Close CurrentTab
|
||||
buttons:CloseLeftTabs: Close LeftTabs
|
||||
buttons:CloseRightTabs: Close RightTabs
|
||||
buttons:CloseOtherTabs: Close OtherTabs
|
||||
buttons:CloseAllTabs: Close AllTabs
|
||||
buttons:ContentFullScreen: Content FullScreen
|
||||
buttons:ContentExitFullScreen: Content ExitFullScreen
|
||||
buttons:ClickCollapse: Collapse
|
||||
buttons:ClickExpand: Expand
|
||||
buttons:Confirm: Confirm
|
||||
buttons:Cancel: Cancel
|
||||
buttons:Switch: Switch
|
||||
buttons:Close: Close
|
||||
buttons:BackTop: BackTop
|
||||
buttons:OpenText: Open
|
||||
buttons:CloseText: Close
|
||||
search:Total: Total
|
||||
search:History: History
|
||||
search:Collect: Collect
|
||||
search:DragSort: （Drag Sort）
|
||||
search:Empty: Empty
|
||||
search:Placeholder: Search Menu
|
||||
panel:SystemSet: System Configs
|
||||
panel:CloseSystemSet: Close System Configs
|
||||
panel:ClearCacheAndToLogin: Clear cache and return to login page
|
||||
panel:ClearCache: Clear Cache
|
||||
panel:OverallStyle: Overall Style
|
||||
panel:OverallStyleLight: Light
|
||||
panel:OverallStyleLightTip: Set sail freshly and light up the comfortable work interface
|
||||
panel:OverallStyleDark: Dark
|
||||
panel:OverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
|
||||
panel:OverallStyleSystem: Auto
|
||||
panel:OverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
|
||||
panel:ThemeColor: Theme Color
|
||||
panel:LayoutModel: Layout Model
|
||||
panel:VerticalTip: The menu on the left is familiar and friendly
|
||||
panel:HorizontalTip: Top menu, concise overview
|
||||
panel:MixTip: Mixed menu, flexible
|
||||
panel:Stretch: Stretch Page
|
||||
panel:StretchFixed: Fixed
|
||||
panel:StretchFixedTip: Compact pages make it easy to find the information you need
|
||||
panel:StretchCustom: Custom
|
||||
panel:StretchCustomTip: Minimum 1280, maximum 1600
|
||||
panel:TagsStyle: Tags Style
|
||||
panel:TagsStyleSmart: Smart
|
||||
panel:TagsStyleSmartTip: Smart tags add fun and brilliance
|
||||
panel:TagsStyleCard: Card
|
||||
panel:TagsStyleCardTip: Card tags for efficient browsing
|
||||
panel:TagsStyleChrome: Chrome
|
||||
panel:TagsStyleChromeTip: Chrome style is classic and elegant
|
||||
panel:InterfaceDisplay: Interface Display
|
||||
panel:GreyModel: Grey Model
|
||||
panel:WeakModel: Weak Model
|
||||
panel:HiddenTags: Hidden Tags
|
||||
panel:HiddenFooter: Hidden Footer
|
||||
panel:MultiTagsCache: MultiTags Cache
|
||||
menus:Home: Home
|
||||
menus:Login: Login
|
||||
menus:Empty: Empty Page
|
||||
menus:SysManagement: System Manage
|
||||
menus:User: User Manage
|
||||
menus:Role: Role Manage
|
||||
menus:SystemMenu: Menu Manage
|
||||
menus:Dept: Dept Manage
|
||||
menus:SysMonitor: System Monitor
|
||||
menus:OnlineUser: Online User
|
||||
menus:LoginLog: Login Log
|
||||
menus:OperationLog: Operation Log
|
||||
menus:Abnormal: Abnormal Page
|
||||
menus:FourZeroFour: "404"
|
||||
menus:FourZeroOne: "403"
|
||||
menus:Five: "500"
|
||||
status:Load: Loading...
|
||||
status:Message: Message
|
||||
status:Notify: Notify
|
||||
status:Todo: Todo
|
||||
status:NoMessage: No Message
|
||||
status:NoNotify: No Notify
|
||||
status:NoTodo: No Todo
|
||||
login:Username: Username
|
||||
login:Nickname: Nickname
|
||||
login:Password: Password
|
||||
login:VerifyCode: VerifyCode
|
||||
login:Remember: days no need to login
|
||||
login:RememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
|
||||
login:Sure: Sure Password
|
||||
login:Forget: Forget Password?
|
||||
login:Login: Login
|
||||
login:Nextstep: Nextstep
|
||||
login:Laststep: Laststep
|
||||
login:ThirdLogin: Third Login
|
||||
login:PhoneLogin: Phone Login
|
||||
login:QRCodeLogin: QRCode Login
|
||||
login:Register: Register
|
||||
login:WeChatLogin: WeChat Login
|
||||
login:AlipayLogin: Alipay Login
|
||||
login:QQLogin: QQ Login
|
||||
login:WeiBoLogin: Weibo Login
|
||||
login:Phone: Phone
|
||||
login:Email: Email
|
||||
login:SmsVerifyCode: SMS VerifyCode
|
||||
login:EmailVerifyCode: Email VerifyCode
|
||||
login:Back: Back
|
||||
login:Test: Mock Test
|
||||
login:Tip: After scanning the code, click "Confirm" to complete the login
|
||||
login:Definite: Definite
|
||||
login:LoginSuccess: Login Success
|
||||
login:LoginFail: Login Fail
|
||||
login:RegisterSuccess: Regist Success
|
||||
login:TickPrivacy: Please tick Privacy Policy
|
||||
login:ReadAccept: I have read it carefully and accept
|
||||
login:PrivacyPolicy: Privacy Policy
|
||||
login:GetVerifyCode: Get VerifyCode
|
||||
login:Info: Seconds
|
||||
login:UsernameReg: Please enter username
|
||||
login:NicknameReg: Please enter nickname
|
||||
login:PassWordReg: Please enter password
|
||||
login:VerifyCodeReg: Please enter verify code
|
||||
login:EamilReg: Please enter email
|
||||
login:VerifyCodeCorrectReg: Please enter correct verify code
|
||||
login:VerifyCodeSixReg: Please enter a 6-digit verify code
|
||||
login:PhoneReg: Please enter the phone
|
||||
login:PhoneCorrectReg: Please enter the correct phone number format
|
||||
login:PassWordRuleReg: The password format should be any combination of 8-18 digits
|
||||
login:PassWordSureReg: Please enter confirm password
|
||||
login:PassWordDifferentReg: The two passwords do not match!
|
||||
login:PassWordUpdateReg: Password has been updated
|
||||
logout:message: Whether to exit the system?
|
||||
logout:success: Logout Success
|
||||
logout:fail: Logout Fail
|
||||
logout:cancel: Logout Cancel
|
||||
|
||||
@@ -1,124 +1,137 @@
|
||||
buttons:
|
||||
pureLoginOut: 退出系统
|
||||
pureLogin: 登录
|
||||
pureOpenSystemSet: 打开系统配置
|
||||
pureReload: 重新加载
|
||||
pureCloseCurrentTab: 关闭当前标签页
|
||||
pureCloseLeftTabs: 关闭左侧标签页
|
||||
pureCloseRightTabs: 关闭右侧标签页
|
||||
pureCloseOtherTabs: 关闭其他标签页
|
||||
pureCloseAllTabs: 关闭全部标签页
|
||||
pureContentFullScreen: 内容区全屏
|
||||
pureContentExitFullScreen: 内容区退出全屏
|
||||
pureClickCollapse: 点击折叠
|
||||
pureClickExpand: 点击展开
|
||||
pureConfirm: 确认
|
||||
pureSwitch: 切换
|
||||
pureClose: 关闭
|
||||
pureBackTop: 回到顶部
|
||||
pureOpenText: 开
|
||||
pureCloseText: 关
|
||||
search:
|
||||
pureTotal: 共
|
||||
pureHistory: 搜索历史
|
||||
pureCollect: 收藏
|
||||
pureDragSort: （可拖拽排序）
|
||||
pureEmpty: 暂无搜索结果
|
||||
purePlaceholder: 搜索菜单（支持拼音搜索）
|
||||
panel:
|
||||
pureSystemSet: 系统配置
|
||||
pureCloseSystemSet: 关闭配置
|
||||
pureClearCacheAndToLogin: 清空缓存并返回登录页
|
||||
pureClearCache: 清空缓存
|
||||
pureOverallStyle: 整体风格
|
||||
pureOverallStyleLight: 浅色
|
||||
pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
|
||||
pureOverallStyleDark: 深色
|
||||
pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
|
||||
pureOverallStyleSystem: 自动
|
||||
pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
|
||||
pureThemeColor: 主题色
|
||||
pureLayoutModel: 导航模式
|
||||
pureVerticalTip: 左侧菜单，亲切熟悉
|
||||
pureHorizontalTip: 顶部菜单，简洁概览
|
||||
pureMixTip: 混合菜单，灵活多变
|
||||
pureStretch: 页宽
|
||||
pureStretchFixed: 固定
|
||||
pureStretchFixedTip: 紧凑页面，轻松找到所需信息
|
||||
pureStretchCustom: 自定义
|
||||
pureStretchCustomTip: 最小1280、最大1600
|
||||
pureTagsStyle: 页签风格
|
||||
pureTagsStyleSmart: 灵动
|
||||
pureTagsStyleSmartTip: 灵动标签，添趣生辉
|
||||
pureTagsStyleCard: 卡片
|
||||
pureTagsStyleCardTip: 卡片标签，高效浏览
|
||||
pureTagsStyleChrome: 谷歌
|
||||
pureTagsStyleChromeTip: 谷歌风格，经典美观
|
||||
pureInterfaceDisplay: 界面显示
|
||||
pureGreyModel: 灰色模式
|
||||
pureWeakModel: 色弱模式
|
||||
pureHiddenTags: 隐藏标签页
|
||||
pureHiddenFooter: 隐藏页脚
|
||||
pureMultiTagsCache: 页签持久化
|
||||
menus:
|
||||
pureHome: 首页
|
||||
pureLogin: 登录
|
||||
pureAbnormal: 异常页面
|
||||
pureFourZeroFour: "404"
|
||||
pureFourZeroOne: "403"
|
||||
pureFive: "500"
|
||||
purePermission: 权限管理
|
||||
purePermissionPage: 页面权限
|
||||
purePermissionButton: 按钮权限
|
||||
purePermissionButtonRouter: 路由返回按钮权限
|
||||
purePermissionButtonLogin: 登录接口返回按钮权限
|
||||
status:
|
||||
pureLoad: 加载中...
|
||||
pureMessage: 消息
|
||||
pureNotify: 通知
|
||||
pureTodo: 待办
|
||||
pureNoMessage: 暂无消息
|
||||
pureNoNotify: 暂无通知
|
||||
pureNoTodo: 暂无待办
|
||||
login:
|
||||
pureUsername: 账号
|
||||
purePassword: 密码
|
||||
pureVerifyCode: 验证码
|
||||
pureRemember: 天内免登录
|
||||
pureRememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
|
||||
pureSure: 确认密码
|
||||
pureForget: 忘记密码?
|
||||
pureLogin: 登录
|
||||
pureThirdLogin: 第三方登录
|
||||
purePhoneLogin: 手机登录
|
||||
pureQRCodeLogin: 二维码登录
|
||||
pureRegister: 注册
|
||||
pureWeChatLogin: 微信登录
|
||||
pureAlipayLogin: 支付宝登录
|
||||
pureQQLogin: QQ登录
|
||||
pureWeiBoLogin: 微博登录
|
||||
purePhone: 手机号码
|
||||
pureSmsVerifyCode: 短信验证码
|
||||
pureBack: 返回
|
||||
pureTest: 模拟测试
|
||||
pureTip: 扫码后点击"确认"，即可完成登录
|
||||
pureDefinite: 确定
|
||||
pureLoginSuccess: 登录成功
|
||||
pureLoginFail: 登录失败
|
||||
pureRegisterSuccess: 注册成功
|
||||
pureTickPrivacy: 请勾选隐私政策
|
||||
pureReadAccept: 我已仔细阅读并接受
|
||||
purePrivacyPolicy: 《隐私政策》
|
||||
pureGetVerifyCode: 获取验证码
|
||||
pureInfo: 秒后重新获取
|
||||
pureUsernameReg: 请输入账号
|
||||
purePassWordReg: 请输入密码
|
||||
pureVerifyCodeReg: 请输入验证码
|
||||
pureVerifyCodeCorrectReg: 请输入正确的验证码
|
||||
pureVerifyCodeSixReg: 请输入6位数字验证码
|
||||
purePhoneReg: 请输入手机号码
|
||||
purePhoneCorrectReg: 请输入正确的手机号码格式
|
||||
purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
|
||||
purePassWordSureReg: 请输入确认密码
|
||||
purePassWordDifferentReg: 两次密码不一致!
|
||||
purePassWordUpdateReg: 修改密码成功
|
||||
buttons:AccountSettings: 账户设置
|
||||
buttons:LoginOut: 退出系统
|
||||
buttons:Login: 登录
|
||||
buttons:OpenSystemSet: 打开系统配置
|
||||
buttons:Reload: 重新加载
|
||||
buttons:CloseCurrentTab: 关闭当前标签页
|
||||
buttons:CloseLeftTabs: 关闭左侧标签页
|
||||
buttons:CloseRightTabs: 关闭右侧标签页
|
||||
buttons:CloseOtherTabs: 关闭其他标签页
|
||||
buttons:CloseAllTabs: 关闭全部标签页
|
||||
buttons:ContentFullScreen: 内容区全屏
|
||||
buttons:ContentExitFullScreen: 内容区退出全屏
|
||||
buttons:ClickCollapse: 点击折叠
|
||||
buttons:ClickExpand: 点击展开
|
||||
buttons:Confirm: 确认
|
||||
buttons:Switch: 切换
|
||||
buttons:Close: 关闭
|
||||
buttons:Cancel: 取消
|
||||
buttons:BackTop: 回到顶部
|
||||
buttons:OpenText: 开
|
||||
buttons:CloseText: 关
|
||||
search:Total: 共
|
||||
search:History: 搜索历史
|
||||
search:Collect: 收藏
|
||||
search:DragSort: （可拖拽排序）
|
||||
search:Empty: 暂无搜索结果
|
||||
search:Placeholder: 搜索菜单（支持拼音搜索）
|
||||
panel:SystemSet: 系统配置
|
||||
panel:CloseSystemSet: 关闭配置
|
||||
panel:ClearCacheAndToLogin: 清空缓存并返回登录页
|
||||
panel:ClearCache: 清空缓存
|
||||
panel:OverallStyle: 整体风格
|
||||
panel:OverallStyleLight: 浅色
|
||||
panel:OverallStyleLightTip: 清新启航，点亮舒适的工作界面
|
||||
panel:OverallStyleDark: 深色
|
||||
panel:OverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
|
||||
panel:OverallStyleSystem: 自动
|
||||
panel:OverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
|
||||
panel:ThemeColor: 主题色
|
||||
panel:LayoutModel: 导航模式
|
||||
panel:VerticalTip: 左侧菜单，亲切熟悉
|
||||
panel:HorizontalTip: 顶部菜单，简洁概览
|
||||
panel:MixTip: 混合菜单，灵活多变
|
||||
panel:Stretch: 页宽
|
||||
panel:StretchFixed: 固定
|
||||
panel:StretchFixedTip: 紧凑页面，轻松找到所需信息
|
||||
panel:StretchCustom: 自定义
|
||||
panel:StretchCustomTip: 最小1280、最大1600
|
||||
panel:TagsStyle: 页签风格
|
||||
panel:TagsStyleSmart: 灵动
|
||||
panel:TagsStyleSmartTip: 灵动标签，添趣生辉
|
||||
panel:TagsStyleCard: 卡片
|
||||
panel:TagsStyleCardTip: 卡片标签，高效浏览
|
||||
panel:TagsStyleChrome: 谷歌
|
||||
panel:TagsStyleChromeTip: 谷歌风格，经典美观
|
||||
panel:InterfaceDisplay: 界面显示
|
||||
panel:GreyModel: 灰色模式
|
||||
panel:WeakModel: 色弱模式
|
||||
panel:HiddenTags: 隐藏标签页
|
||||
panel:HiddenFooter: 隐藏页脚
|
||||
panel:MultiTagsCache: 页签持久化
|
||||
menus:Home: 首页
|
||||
menus:Login: 登录
|
||||
menus:Empty: 无Layout页
|
||||
menus:SysManagement: 系统管理
|
||||
menus:User: 用户管理
|
||||
menus:Role: 角色管理
|
||||
menus:SystemMenu: 菜单管理
|
||||
menus:Dept: 部门管理
|
||||
menus:SysMonitor: 系统监控
|
||||
menus:OnlineUser: 在线用户
|
||||
menus:LoginLog: 登录日志
|
||||
menus:OperationLog: 操作日志
|
||||
menus:Abnormal: 异常页面
|
||||
menus:FourZeroFour: "404"
|
||||
menus:FourZeroOne: "403"
|
||||
menus:Five: "500"
|
||||
status:Load: 加载中...
|
||||
status:Message: 消息
|
||||
status:Notify: 通知
|
||||
status:Todo: 待办
|
||||
status:NoMessage: 暂无消息
|
||||
status:NoNotify: 暂无通知
|
||||
status:NoTodo: 暂无待办
|
||||
login:Username: 账号
|
||||
login:Nickname: 昵称
|
||||
login:Password: 密码
|
||||
login:VerifyCode: 验证码
|
||||
login:Remember: 天内免登录
|
||||
login:RememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
|
||||
login:Sure: 确认密码
|
||||
login:Forget: 忘记密码?
|
||||
login:Login: 登录
|
||||
login:Nextstep: 下一步
|
||||
login:Laststep: 上一步
|
||||
login:ThirdLogin: 第三方登录
|
||||
login:PhoneLogin: 手机登录
|
||||
login:QRCodeLogin: 二维码登录
|
||||
login:Register: 注册
|
||||
login:WeChatLogin: 微信登录
|
||||
login:AlipayLogin: 支付宝登录
|
||||
login:QQLogin: QQ登录
|
||||
login:WeiBoLogin: 微博登录
|
||||
login:Phone: 手机号码
|
||||
login:Email: 邮箱
|
||||
login:SmsVerifyCode: 短信验证码
|
||||
login:EmailVerifyCode: 邮箱验证码
|
||||
login:Back: 返回
|
||||
login:Test: 模拟测试
|
||||
login:Tip: 扫码后点击"确认"，即可完成登录
|
||||
login:Definite: 确定
|
||||
login:LoginSuccess: 登录成功
|
||||
login:LoginFail: 登录失败
|
||||
login:RegisterSuccess: 注册成功
|
||||
login:TickPrivacy: 请勾选隐私政策
|
||||
login:ReadAccept: 我已仔细阅读并接受
|
||||
login:PrivacyPolicy: 《隐私政策》
|
||||
login:GetVerifyCode: 获取验证码
|
||||
login:Info: 秒后重新获取
|
||||
login:UsernameReg: 请输入账号
|
||||
login:NicknameReg: 请输入昵称
|
||||
login:PassWordReg: 请输入密码
|
||||
login:EmailReg: 请输入邮箱
|
||||
login:VerifyCodeReg: 请输入验证码
|
||||
login:VerifyCodeCorrectReg: 请输入正确的验证码
|
||||
login:VerifyCodeSixReg: 请输入6位数字验证码
|
||||
login:PhoneReg: 请输入手机号码
|
||||
login:PhoneCorrectReg: 请输入正确的手机号码格式
|
||||
login:PassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
|
||||
login:PassWordSureReg: 请输入确认密码
|
||||
login:PassWordDifferentReg: 两次密码不一致!
|
||||
login:PassWordUpdateReg: 修改密码成功
|
||||
logout:message: 是否退出当前系统?
|
||||
logout:success: 退出成功
|
||||
logout:fail: 退出失败
|
||||
logout:cancel: 退出取消
|
||||
|
||||
|
||||
@@ -53,9 +53,11 @@
|
||||
"@pureadmin/utils": "^2.5.0",
|
||||
"@vueuse/core": "^12.0.0",
|
||||
"@vueuse/motion": "^2.2.6",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.7.9",
|
||||
"dayjs": "^1.11.13",
|
||||
"cropperjs": "^1.6.2",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.9.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
|
||||
34
pnpm-lock.yaml
generated
34
pnpm-lock.yaml
generated
@@ -23,12 +23,18 @@ importers:
|
||||
'@vueuse/motion':
|
||||
specifier: ^2.2.6
|
||||
version: 2.2.6(rollup@4.28.1)(vue@3.5.13(typescript@5.6.3))
|
||||
'@zxcvbn-ts/core':
|
||||
specifier: ^3.0.4
|
||||
version: 3.0.4
|
||||
animate.css:
|
||||
specifier: ^4.1.1
|
||||
version: 4.1.1
|
||||
axios:
|
||||
specifier: ^1.7.9
|
||||
version: 1.7.9
|
||||
cropperjs:
|
||||
specifier: ^1.6.2
|
||||
version: 1.6.2
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
@@ -747,8 +753,8 @@ packages:
|
||||
resolution: {integrity: sha512-8tR1xe7ZEbkabTuE/tNhzpolygUn9OaYp9yuYAF4MgDNZg06C3Qny80bes2/e9/Wm3aVkPUlCw6WgU7mQd0yEg==, tarball: https://registry.npmmirror.com/@intlify/shared/-/shared-11.0.0-rc.1.tgz}
|
||||
engines: {node: '>= 16'}
|
||||
|
||||
'@intlify/shared@11.0.1':
|
||||
resolution: {integrity: sha512-lH164+aDDptHZ3dBDbIhRa1dOPQUp+83iugpc+1upTOWCnwyC1PVis6rSWNMMJ8VQxvtHQB9JMib48K55y0PvQ==, tarball: https://registry.npmmirror.com/@intlify/shared/-/shared-11.0.1.tgz}
|
||||
'@intlify/shared@11.1.1':
|
||||
resolution: {integrity: sha512-2kGiWoXaeV8HZlhU/Nml12oTbhv7j2ufsJ5vQaa0VTjzUmZVdd/nmKFRAOJ/FtjO90Qba5AnZDwsrY7ZND5udA==, tarball: https://registry.npmmirror.com/@intlify/shared/-/shared-11.1.1.tgz}
|
||||
engines: {node: '>= 16'}
|
||||
|
||||
'@intlify/unplugin-vue-i18n@6.0.1':
|
||||
@@ -1275,6 +1281,9 @@ packages:
|
||||
'@vueuse/shared@9.13.0':
|
||||
resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
|
||||
|
||||
'@zxcvbn-ts/core@3.0.4':
|
||||
resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==, tarball: https://registry.npmmirror.com/@zxcvbn-ts/core/-/core-3.0.4.tgz}
|
||||
|
||||
JSONStream@1.3.5:
|
||||
resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
|
||||
hasBin: true
|
||||
@@ -1570,6 +1579,9 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
cropperjs@1.6.2:
|
||||
resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==, tarball: https://registry.npmmirror.com/cropperjs/-/cropperjs-1.6.2.tgz}
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||
engines: {node: '>= 8'}
|
||||
@@ -1923,7 +1935,7 @@ packages:
|
||||
resolution: {integrity: sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==}
|
||||
|
||||
fastest-levenshtein@1.0.16:
|
||||
resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
|
||||
resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==, tarball: https://registry.npmmirror.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz}
|
||||
engines: {node: '>= 4.9.1'}
|
||||
|
||||
fastq@1.17.1:
|
||||
@@ -4220,14 +4232,14 @@ snapshots:
|
||||
|
||||
'@intlify/shared@11.0.0-rc.1': {}
|
||||
|
||||
'@intlify/shared@11.0.1': {}
|
||||
'@intlify/shared@11.1.1': {}
|
||||
|
||||
'@intlify/unplugin-vue-i18n@6.0.1(@vue/compiler-dom@3.5.13)(eslint@9.16.0(jiti@2.4.1))(rollup@4.28.1)(typescript@5.6.3)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
|
||||
dependencies:
|
||||
'@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0(jiti@2.4.1))
|
||||
'@intlify/bundle-utils': 10.0.0(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))
|
||||
'@intlify/shared': 11.0.1
|
||||
'@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@11.0.1)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
|
||||
'@intlify/shared': 11.1.1
|
||||
'@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@11.1.1)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
|
||||
'@rollup/pluginutils': 5.1.3(rollup@4.28.1)
|
||||
'@typescript-eslint/scope-manager': 8.18.0
|
||||
'@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
|
||||
@@ -4249,11 +4261,11 @@ snapshots:
|
||||
- supports-color
|
||||
- typescript
|
||||
|
||||
'@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@11.0.1)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
|
||||
'@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@11.1.1)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
|
||||
dependencies:
|
||||
'@babel/parser': 7.26.3
|
||||
optionalDependencies:
|
||||
'@intlify/shared': 11.0.1
|
||||
'@intlify/shared': 11.1.1
|
||||
'@vue/compiler-dom': 3.5.13
|
||||
vue: 3.5.13(typescript@5.6.3)
|
||||
vue-i18n: 10.0.5(vue@3.5.13(typescript@5.6.3))
|
||||
@@ -4823,6 +4835,10 @@ snapshots:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
|
||||
'@zxcvbn-ts/core@3.0.4':
|
||||
dependencies:
|
||||
fastest-levenshtein: 1.0.16
|
||||
|
||||
JSONStream@1.3.5:
|
||||
dependencies:
|
||||
jsonparse: 1.3.1
|
||||
@@ -5150,6 +5166,8 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: 5.6.3
|
||||
|
||||
cropperjs@1.6.2: {}
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
dependencies:
|
||||
path-key: 3.1.1
|
||||
|
||||
154
src/api/login.ts
Normal file
154
src/api/login.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
import type { UserInfo } from "@/utils/auth";
|
||||
import { http } from "@/utils/http";
|
||||
|
||||
export type LoginResult = {
|
||||
/** `token` */
|
||||
accessToken: string;
|
||||
/** 用于调用刷新`accessToken`的接口时所需的`token` */
|
||||
refreshToken: string;
|
||||
/** `accessToken`的过期时间戳（毫秒） */
|
||||
expiresTime: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 登录
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const getLogin = (data?: object) => {
|
||||
return http.request<LoginResult>("post", "/api/login", {
|
||||
headers: {
|
||||
"content-type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
/** 刷新token */
|
||||
export const refreshTokenApi = (data: { refreshToken: string }) => {
|
||||
return http.request<LoginResult>("post", "/api/refreshToken", {
|
||||
headers: {
|
||||
"content-type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
export type CaptchaResponse = {
|
||||
/**验证码ID */
|
||||
uuid: string;
|
||||
/**验证码 */
|
||||
captcha: string;
|
||||
};
|
||||
|
||||
/** 获取验证码 */
|
||||
export const GetCaptchaAPI = () => {
|
||||
return http.request<CaptchaResponse>("get", "/api/captcha");
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取用户动态路由
|
||||
* @returns
|
||||
*/
|
||||
export const getUserRoutesAPI = () => {
|
||||
return http.request<any[]>("GET", "/api/getRoutes");
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
export const getUserInfoAPI = () => {
|
||||
return http.request<UserInfo>("get", `/api/info`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
export const logoutAPI = () => {
|
||||
return http.request<null>("post", `/api/logout`);
|
||||
};
|
||||
|
||||
/**获取验证码参数 */
|
||||
type GetCodeParams = {
|
||||
/**用户账号 */
|
||||
username: string;
|
||||
/**验证码类型 */
|
||||
title: string;
|
||||
/**收件邮箱 */
|
||||
mail: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const postGetCodeAPI = (data: GetCodeParams) => {
|
||||
return http.request<null>("post", `/api/code`, {
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 注册参数
|
||||
*/
|
||||
type RegisterParams = {
|
||||
/**用户名 */
|
||||
username: string;
|
||||
/**密码 */
|
||||
password: string;
|
||||
/**邮箱 */
|
||||
email: string;
|
||||
/**验证码 */
|
||||
code: string;
|
||||
/**性别 */
|
||||
gender: number;
|
||||
/**昵称 */
|
||||
nickname: string;
|
||||
/**手机号 */
|
||||
phone: string;
|
||||
/**部门ID */
|
||||
department_id: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* 用户注册
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const postRegisterAPI = (data: RegisterParams) => {
|
||||
return http.request<null>("post", `/api/register`, {
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
type ResetPasswordParams = {
|
||||
/**
|
||||
* 用户账号
|
||||
*/
|
||||
username: string;
|
||||
/**
|
||||
* 邮箱
|
||||
*/
|
||||
mail: string;
|
||||
/**
|
||||
* 验证码
|
||||
*/
|
||||
code: string;
|
||||
/**
|
||||
* 密码
|
||||
*/
|
||||
password: string;
|
||||
};
|
||||
/**
|
||||
* 重置密码
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const postResetPasswordAPI = (data: ResetPasswordParams) => {
|
||||
return http.request<null>("post", `/api/resetPassword`, {
|
||||
data
|
||||
});
|
||||
};
|
||||
@@ -1,4 +1,5 @@
|
||||
import { http } from "@/utils/http";
|
||||
import type { FileInfo } from "types/file";
|
||||
|
||||
/**
|
||||
* 登录结果
|
||||
@@ -35,19 +36,90 @@ export const getLogin = (data?: object) => {
|
||||
});
|
||||
};
|
||||
|
||||
export type CaptchaResponse = {
|
||||
/**验证码 */
|
||||
image: string;
|
||||
/**验证码ID */
|
||||
captchaId: string;
|
||||
/**
|
||||
* 更新邮箱
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const putUpdateEmailAPI = (data: {
|
||||
/**密码 */
|
||||
password: string;
|
||||
/**邮箱 */
|
||||
email: string;
|
||||
}) => {
|
||||
return http.request<null>("put", `/api/user/updateEmail`, {
|
||||
headers: {
|
||||
"content-type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/** 获取验证码 */
|
||||
export const GetCaptchaAPI = () => {
|
||||
return http.request<CaptchaResponse>("get", "/api/captcha");
|
||||
/**
|
||||
* 更新密码
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const putUpdatePasswordAPI = (data: {
|
||||
/**旧密码 */
|
||||
oldPassword: string;
|
||||
/**新密码 */
|
||||
newPassword: string;
|
||||
}) => {
|
||||
return http.request<null>("put", `/api/user/updatePassword`, {
|
||||
headers: {
|
||||
"content-type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 更新手机号
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const putUpdatePhoneAPI = (data: {
|
||||
/**密码 */
|
||||
password: string;
|
||||
/**手机号 */
|
||||
phone: string;
|
||||
}) => {
|
||||
return http.request<null>("put", `/api/user/updatePhone`, {
|
||||
headers: {
|
||||
"content-type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
export type UserInfo = {
|
||||
permissions: string[];
|
||||
roles: string[];
|
||||
/**更新用户基础信息参数 */
|
||||
type UpdateBaseUserInfoParams = {
|
||||
/**姓名 */
|
||||
name: string;
|
||||
/**性别 */
|
||||
gender: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新用户基础信息
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const putUpdateBaseUserInfoAPI = (data: UpdateBaseUserInfoParams) => {
|
||||
return http.request<null>("PUT", "/api/user/updateBaseUserInfo", { data });
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新头像
|
||||
* @param id 用户ID
|
||||
* @param data 图片数据
|
||||
* @returns
|
||||
*/
|
||||
export const postUploadAvatarAPI = (id: string, data: { file: Blob }) => {
|
||||
return http.request<FileInfo>("post", `/api/user/avatar/${id}`, {
|
||||
headers: {
|
||||
"content-type": "multipart/form-data"
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/user.png
Normal file
BIN
src/assets/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
7
src/components/ReCropper/index.ts
Normal file
7
src/components/ReCropper/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import reCropper from "./src";
|
||||
import { withInstall } from "@pureadmin/utils";
|
||||
|
||||
/** 图片裁剪组件 */
|
||||
export const ReCropper = withInstall(reCropper);
|
||||
|
||||
export default ReCropper;
|
||||
8
src/components/ReCropper/src/circled.css
Normal file
8
src/components/ReCropper/src/circled.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "cropperjs/dist/cropper.css";
|
||||
|
||||
.re-circled {
|
||||
.cropper-view-box,
|
||||
.cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
457
src/components/ReCropper/src/index.tsx
Normal file
457
src/components/ReCropper/src/index.tsx
Normal file
@@ -0,0 +1,457 @@
|
||||
import "./circled.css";
|
||||
import Cropper from "cropperjs";
|
||||
import { ElUpload } from "element-plus";
|
||||
import type { CSSProperties } from "vue";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import { longpress } from "@/directives/longpress";
|
||||
import { useTippy, directive as tippy } from "vue-tippy";
|
||||
import {
|
||||
type PropType,
|
||||
ref,
|
||||
unref,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
defineComponent
|
||||
} from "vue";
|
||||
import {
|
||||
delay,
|
||||
debounce,
|
||||
isArray,
|
||||
downloadByBase64,
|
||||
useResizeObserver
|
||||
} from "@pureadmin/utils";
|
||||
import {
|
||||
Reload,
|
||||
Upload,
|
||||
ArrowH,
|
||||
ArrowV,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
ArrowLeft,
|
||||
ChangeIcon,
|
||||
ArrowRight,
|
||||
RotateLeft,
|
||||
SearchPlus,
|
||||
RotateRight,
|
||||
SearchMinus,
|
||||
DownloadIcon
|
||||
} from "./svg";
|
||||
|
||||
type Options = Cropper.Options;
|
||||
|
||||
const defaultOptions: Options = {
|
||||
aspectRatio: 1,
|
||||
zoomable: true,
|
||||
zoomOnTouch: true,
|
||||
zoomOnWheel: true,
|
||||
cropBoxMovable: true,
|
||||
cropBoxResizable: true,
|
||||
toggleDragModeOnDblclick: true,
|
||||
autoCrop: true,
|
||||
background: true,
|
||||
highlight: true,
|
||||
center: true,
|
||||
responsive: true,
|
||||
restore: true,
|
||||
checkCrossOrigin: true,
|
||||
checkOrientation: true,
|
||||
scalable: true,
|
||||
modal: true,
|
||||
guides: true,
|
||||
movable: true,
|
||||
rotatable: true
|
||||
};
|
||||
|
||||
const props = {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String },
|
||||
circled: { type: Boolean, default: false },
|
||||
/** 是否可以通过点击裁剪区域关闭右键弹出的功能菜单，默认 `true` */
|
||||
isClose: { type: Boolean, default: true },
|
||||
realTimePreview: { type: Boolean, default: true },
|
||||
height: { type: [String, Number], default: "360px" },
|
||||
crossorigin: {
|
||||
type: String as PropType<"" | "anonymous" | "use-credentials" | undefined>,
|
||||
default: undefined
|
||||
},
|
||||
imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
|
||||
options: { type: Object as PropType<Options>, default: () => ({}) }
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: "ReCropper",
|
||||
props,
|
||||
setup(props, { attrs, emit }) {
|
||||
const tippyElRef = ref<ElRef<HTMLImageElement>>();
|
||||
const imgElRef = ref<ElRef<HTMLImageElement>>();
|
||||
const cropper = ref<Nullable<Cropper>>();
|
||||
const inCircled = ref(props.circled);
|
||||
const isInClose = ref(props.isClose);
|
||||
const inSrc = ref(props.src);
|
||||
const isReady = ref(false);
|
||||
const imgBase64 = ref();
|
||||
|
||||
let scaleX = 1;
|
||||
let scaleY = 1;
|
||||
|
||||
const debounceRealTimeCroppered = debounce(realTimeCroppered, 80);
|
||||
|
||||
const getImageStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
height: props.height,
|
||||
maxWidth: "100%",
|
||||
...props.imageStyle
|
||||
};
|
||||
});
|
||||
|
||||
const getClass = computed(() => {
|
||||
return [
|
||||
attrs.class,
|
||||
{
|
||||
["re-circled"]: inCircled.value
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
"p-[6px]",
|
||||
"h-[30px]",
|
||||
"w-[30px]",
|
||||
"outline-none",
|
||||
"rounded-[4px]",
|
||||
"cursor-pointer",
|
||||
"hover:bg-[rgba(0,0,0,0.06)]"
|
||||
];
|
||||
});
|
||||
|
||||
const getWrapperStyle = computed((): CSSProperties => {
|
||||
return { height: `${props.height}`.replace(/px/, "") + "px" };
|
||||
});
|
||||
|
||||
onMounted(init);
|
||||
|
||||
onUnmounted(() => {
|
||||
cropper.value?.destroy();
|
||||
isReady.value = false;
|
||||
cropper.value = null;
|
||||
imgBase64.value = "";
|
||||
scaleX = 1;
|
||||
scaleY = 1;
|
||||
});
|
||||
|
||||
useResizeObserver(tippyElRef, () => handCropper("reset"));
|
||||
|
||||
async function init() {
|
||||
const imgEl = unref(imgElRef);
|
||||
if (!imgEl) return;
|
||||
cropper.value = new Cropper(imgEl, {
|
||||
...defaultOptions,
|
||||
ready: () => {
|
||||
isReady.value = true;
|
||||
realTimeCroppered();
|
||||
delay(400).then(() => emit("readied", cropper.value));
|
||||
},
|
||||
crop() {
|
||||
debounceRealTimeCroppered();
|
||||
},
|
||||
zoom() {
|
||||
debounceRealTimeCroppered();
|
||||
},
|
||||
cropmove() {
|
||||
debounceRealTimeCroppered();
|
||||
},
|
||||
...props.options
|
||||
});
|
||||
}
|
||||
|
||||
function realTimeCroppered() {
|
||||
props.realTimePreview && croppered();
|
||||
}
|
||||
|
||||
function croppered() {
|
||||
if (!cropper.value) return;
|
||||
const canvas = inCircled.value
|
||||
? getRoundedCanvas()
|
||||
: cropper.value.getCroppedCanvas();
|
||||
// https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
|
||||
canvas.toBlob(blob => {
|
||||
if (!blob) return;
|
||||
const fileReader: FileReader = new FileReader();
|
||||
fileReader.readAsDataURL(blob);
|
||||
fileReader.onloadend = e => {
|
||||
if (!e.target?.result || !blob) return;
|
||||
imgBase64.value = e.target.result;
|
||||
emit("cropper", {
|
||||
base64: e.target.result,
|
||||
blob,
|
||||
info: { size: blob.size, ...cropper.value.getData() }
|
||||
});
|
||||
};
|
||||
fileReader.onerror = () => {
|
||||
emit("error");
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getRoundedCanvas() {
|
||||
const sourceCanvas = cropper.value!.getCroppedCanvas();
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d")!;
|
||||
const width = sourceCanvas.width;
|
||||
const height = sourceCanvas.height;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
context.imageSmoothingEnabled = true;
|
||||
context.drawImage(sourceCanvas, 0, 0, width, height);
|
||||
context.globalCompositeOperation = "destination-in";
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
width / 2,
|
||||
height / 2,
|
||||
Math.min(width, height) / 2,
|
||||
0,
|
||||
2 * Math.PI,
|
||||
true
|
||||
);
|
||||
context.fill();
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function handCropper(event: string, arg?: number | Array<number>) {
|
||||
if (event === "scaleX") {
|
||||
scaleX = arg = scaleX === -1 ? 1 : -1;
|
||||
}
|
||||
|
||||
if (event === "scaleY") {
|
||||
scaleY = arg = scaleY === -1 ? 1 : -1;
|
||||
}
|
||||
arg && isArray(arg)
|
||||
? cropper.value?.[event]?.(...arg)
|
||||
: cropper.value?.[event]?.(arg);
|
||||
}
|
||||
|
||||
function beforeUpload(file) {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
inSrc.value = "";
|
||||
reader.onload = e => {
|
||||
inSrc.value = e.target?.result as string;
|
||||
};
|
||||
reader.onloadend = () => {
|
||||
init();
|
||||
};
|
||||
return false;
|
||||
}
|
||||
|
||||
const menuContent = defineComponent({
|
||||
directives: {
|
||||
tippy,
|
||||
longpress
|
||||
},
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="flex flex-wrap w-[60px] justify-between">
|
||||
<ElUpload
|
||||
accept="image/*"
|
||||
show-file-list={false}
|
||||
before-upload={beforeUpload}
|
||||
>
|
||||
<Upload
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "上传",
|
||||
placement: "left-start"
|
||||
}}
|
||||
/>
|
||||
</ElUpload>
|
||||
<DownloadIcon
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "下载",
|
||||
placement: "right-start"
|
||||
}}
|
||||
onClick={() => downloadByBase64(imgBase64.value, "cropping.png")}
|
||||
/>
|
||||
<ChangeIcon
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "圆形、矩形裁剪",
|
||||
placement: "left-start"
|
||||
}}
|
||||
onClick={() => {
|
||||
inCircled.value = !inCircled.value;
|
||||
realTimeCroppered();
|
||||
}}
|
||||
/>
|
||||
<Reload
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "重置",
|
||||
placement: "right-start"
|
||||
}}
|
||||
onClick={() => handCropper("reset")}
|
||||
/>
|
||||
<ArrowUp
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "上移（可长按）",
|
||||
placement: "left-start"
|
||||
}}
|
||||
v-longpress={[() => handCropper("move", [0, -10]), "0:100"]}
|
||||
/>
|
||||
<ArrowDown
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "下移（可长按）",
|
||||
placement: "right-start"
|
||||
}}
|
||||
v-longpress={[() => handCropper("move", [0, 10]), "0:100"]}
|
||||
/>
|
||||
<ArrowLeft
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "左移（可长按）",
|
||||
placement: "left-start"
|
||||
}}
|
||||
v-longpress={[() => handCropper("move", [-10, 0]), "0:100"]}
|
||||
/>
|
||||
<ArrowRight
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "右移（可长按）",
|
||||
placement: "right-start"
|
||||
}}
|
||||
v-longpress={[() => handCropper("move", [10, 0]), "0:100"]}
|
||||
/>
|
||||
<ArrowH
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "水平翻转",
|
||||
placement: "left-start"
|
||||
}}
|
||||
onClick={() => handCropper("scaleX", -1)}
|
||||
/>
|
||||
<ArrowV
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "垂直翻转",
|
||||
placement: "right-start"
|
||||
}}
|
||||
onClick={() => handCropper("scaleY", -1)}
|
||||
/>
|
||||
<RotateLeft
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "逆时针旋转",
|
||||
placement: "left-start"
|
||||
}}
|
||||
onClick={() => handCropper("rotate", -45)}
|
||||
/>
|
||||
<RotateRight
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "顺时针旋转",
|
||||
placement: "right-start"
|
||||
}}
|
||||
onClick={() => handCropper("rotate", 45)}
|
||||
/>
|
||||
<SearchPlus
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "放大（可长按）",
|
||||
placement: "left-start"
|
||||
}}
|
||||
v-longpress={[() => handCropper("zoom", 0.1), "0:100"]}
|
||||
/>
|
||||
<SearchMinus
|
||||
class={iconClass.value}
|
||||
v-tippy={{
|
||||
content: "缩小（可长按）",
|
||||
placement: "right-start"
|
||||
}}
|
||||
v-longpress={[() => handCropper("zoom", -0.1), "0:100"]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
function onContextmenu(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const { show, setProps, destroy, state } = useTippy(tippyElRef, {
|
||||
content: menuContent,
|
||||
arrow: false,
|
||||
theme: "light",
|
||||
trigger: "manual",
|
||||
interactive: true,
|
||||
appendTo: "parent",
|
||||
// hideOnClick: false,
|
||||
placement: "bottom-end"
|
||||
});
|
||||
|
||||
setProps({
|
||||
getReferenceClientRect: () => ({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: event.clientY,
|
||||
bottom: event.clientY,
|
||||
left: event.clientX,
|
||||
right: event.clientX
|
||||
})
|
||||
});
|
||||
|
||||
show();
|
||||
|
||||
if (isInClose.value) {
|
||||
if (!state.value.isShown && !state.value.isVisible) return;
|
||||
useEventListener(tippyElRef, "click", destroy);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
inSrc,
|
||||
props,
|
||||
imgElRef,
|
||||
tippyElRef,
|
||||
getClass,
|
||||
getWrapperStyle,
|
||||
getImageStyle,
|
||||
isReady,
|
||||
croppered,
|
||||
onContextmenu
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
const {
|
||||
inSrc,
|
||||
isReady,
|
||||
getClass,
|
||||
getImageStyle,
|
||||
onContextmenu,
|
||||
getWrapperStyle
|
||||
} = this;
|
||||
const { alt, crossorigin } = this.props;
|
||||
|
||||
return inSrc ? (
|
||||
<div
|
||||
ref="tippyElRef"
|
||||
class={getClass}
|
||||
style={getWrapperStyle}
|
||||
onContextmenu={event => onContextmenu(event)}
|
||||
>
|
||||
<img
|
||||
v-show={isReady}
|
||||
ref="imgElRef"
|
||||
style={getImageStyle}
|
||||
src={inSrc}
|
||||
alt={alt}
|
||||
crossorigin={crossorigin}
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
});
|
||||
1
src/components/ReCropper/src/svg/arrow-down.svg
Normal file
1
src/components/ReCropper/src/svg/arrow-down.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2"/></svg>
|
||||
|
After Width: | Height: | Size: 346 B |
1
src/components/ReCropper/src/svg/arrow-h.svg
Normal file
1
src/components/ReCropper/src/svg/arrow-h.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m296.992 216.992-272 272L3.008 512l21.984 23.008 272 272 46.016-46.016L126.016 544h772L680.992 760.992l46.016 46.016 272-272L1020.992 512l-21.984-23.008-272-272-46.048 46.048L898.016 480h-772l216.96-216.992z"/></svg>
|
||||
|
After Width: | Height: | Size: 325 B |
1
src/components/ReCropper/src/svg/arrow-left.svg
Normal file
1
src/components/ReCropper/src/svg/arrow-left.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8"/></svg>
|
||||
|
After Width: | Height: | Size: 343 B |
1
src/components/ReCropper/src/svg/arrow-right.svg
Normal file
1
src/components/ReCropper/src/svg/arrow-right.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M869 487.8 491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4"/></svg>
|
||||
|
After Width: | Height: | Size: 350 B |
1
src/components/ReCropper/src/svg/arrow-up.svg
Normal file
1
src/components/ReCropper/src/svg/arrow-up.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M868 545.5 536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2"/></svg>
|
||||
|
After Width: | Height: | Size: 338 B |
1
src/components/ReCropper/src/svg/arrow-v.svg
Normal file
1
src/components/ReCropper/src/svg/arrow-v.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m512 67.008-23.008 21.984-256 256 46.048 46.048L480 190.016v644L279.008 632.96l-46.048 46.08 256 256 23.008 21.984 23.008-21.984 256-256-46.016-46.016L544 834.016v-644l200.992 200.96 46.016-45.984-256-256z"/></svg>
|
||||
|
After Width: | Height: | Size: 323 B |
1
src/components/ReCropper/src/svg/change.svg
Normal file
1
src/components/ReCropper/src/svg/change.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M956.8 988.8H585.6c-16 0-25.6-9.6-25.6-28.8V576c0-16 9.6-28.8 25.6-28.8h371.2c16 0 25.6 9.6 25.6 28.8v384c0 16-9.6 28.8-25.6 28.8M608 937.6h326.4V598.4H608zm-121.6 44.8C262.4 982.4 144 848 144 595.2c0-19.2 9.6-28.8 25.6-28.8s25.6 12.8 25.6 28.8c0 220.8 96 326.4 288 326.4 16 0 25.6 12.8 25.6 28.8s-6.4 32-22.4 32"/><path d="M262.4 694.4c-6.4 0-9.6-3.2-16-6.4L160 601.6c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8-3.2 3.2-6.4 6.4-12.8 6.4"/><path d="M86.4 694.4c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8L99.2 688c-3.2 3.2-6.4 6.4-12.8 6.4m790.4-249.6c-16 0-28.8-12.8-28.8-32 0-224-99.2-336-300.8-336-16 0-28.8-12.8-28.8-32s9.6-32 28.8-32c233.6 0 355.2 137.6 355.2 396.8 0 22.4-9.6 35.2-25.6 35.2"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4l-86.4-86.4c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8 0 3.2-6.4 6.4-12.8 6.4"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0s9.6 22.4 0 28.8l-86.4 86.4c-3.2 3.2-6.4 6.4-12.8 6.4M288 524.8C156.8 524.8 48 416 48 278.4S156.8 35.2 288 35.2 528 144 528 281.6 419.2 524.8 288 524.8m-3.2-432c-99.2 0-179.2 83.2-179.2 185.6S185.6 464 284.8 464 464 380.8 464 278.4 384 92.8 284.8 92.8"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/components/ReCropper/src/svg/download.svg
Normal file
1
src/components/ReCropper/src/svg/download.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8"/></svg>
|
||||
|
After Width: | Height: | Size: 417 B |
31
src/components/ReCropper/src/svg/index.ts
Normal file
31
src/components/ReCropper/src/svg/index.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import Reload from "./reload.svg?component";
|
||||
import Upload from "./upload.svg?component";
|
||||
import ArrowH from "./arrow-h.svg?component";
|
||||
import ArrowV from "./arrow-v.svg?component";
|
||||
import ArrowUp from "./arrow-up.svg?component";
|
||||
import ChangeIcon from "./change.svg?component";
|
||||
import ArrowDown from "./arrow-down.svg?component";
|
||||
import ArrowLeft from "./arrow-left.svg?component";
|
||||
import DownloadIcon from "./download.svg?component";
|
||||
import ArrowRight from "./arrow-right.svg?component";
|
||||
import RotateLeft from "./rotate-left.svg?component";
|
||||
import SearchPlus from "./search-plus.svg?component";
|
||||
import RotateRight from "./rotate-right.svg?component";
|
||||
import SearchMinus from "./search-minus.svg?component";
|
||||
|
||||
export {
|
||||
Reload,
|
||||
Upload,
|
||||
ArrowH,
|
||||
ArrowV,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
ArrowLeft,
|
||||
ChangeIcon,
|
||||
ArrowRight,
|
||||
RotateLeft,
|
||||
SearchPlus,
|
||||
RotateRight,
|
||||
SearchMinus,
|
||||
DownloadIcon
|
||||
};
|
||||
1
src/components/ReCropper/src/svg/reload.svg
Normal file
1
src/components/ReCropper/src/svg/reload.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8m756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2"/></svg>
|
||||
|
After Width: | Height: | Size: 863 B |
1
src/components/ReCropper/src/svg/rotate-left.svg
Normal file
1
src/components/ReCropper/src/svg/rotate-left.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"/><path fill="currentColor" d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"/></svg>
|
||||
|
After Width: | Height: | Size: 630 B |
1
src/components/ReCropper/src/svg/rotate-right.svg
Normal file
1
src/components/ReCropper/src/svg/rotate-right.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8"/><path fill="currentColor" d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H396V494h440z"/></svg>
|
||||
|
After Width: | Height: | Size: 633 B |
1
src/components/ReCropper/src/svg/search-minus.svg
Normal file
1
src/components/ReCropper/src/svg/search-minus.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"/></svg>
|
||||
|
After Width: | Height: | Size: 532 B |
1
src/components/ReCropper/src/svg/search-plus.svg
Normal file
1
src/components/ReCropper/src/svg/search-plus.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"/></svg>
|
||||
|
After Width: | Height: | Size: 628 B |
1
src/components/ReCropper/src/svg/upload.svg
Normal file
1
src/components/ReCropper/src/svg/upload.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13M878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8"/></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
7
src/components/ReCropperPreview/index.ts
Normal file
7
src/components/ReCropperPreview/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import reCropperPreview from "./src/index.vue";
|
||||
import { withInstall } from "@pureadmin/utils";
|
||||
|
||||
/** 图片裁剪预览组件 */
|
||||
export const ReCropperPreview = withInstall(reCropperPreview);
|
||||
|
||||
export default ReCropperPreview;
|
||||
76
src/components/ReCropperPreview/src/index.vue
Normal file
76
src/components/ReCropperPreview/src/index.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from "vue";
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "ReCropperPreview"
|
||||
});
|
||||
|
||||
defineProps({
|
||||
imgSrc: String
|
||||
});
|
||||
|
||||
const emit = defineEmits(["cropper"]);
|
||||
|
||||
const infos = ref();
|
||||
const popoverRef = ref();
|
||||
const refCropper = ref();
|
||||
const showPopover = ref(false);
|
||||
const cropperImg = ref<string>("");
|
||||
|
||||
function onCropper({ base64, blob, info }) {
|
||||
infos.value = info;
|
||||
cropperImg.value = base64;
|
||||
emit("cropper", { base64, blob, info });
|
||||
}
|
||||
|
||||
function hidePopover() {
|
||||
popoverRef.value.hide();
|
||||
}
|
||||
|
||||
defineExpose({ hidePopover });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:visible="showPopover"
|
||||
placement="right"
|
||||
width="18vw"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="w-[18vw]">
|
||||
<ReCropper
|
||||
ref="refCropper"
|
||||
:src="imgSrc"
|
||||
circled
|
||||
@cropper="onCropper"
|
||||
@readied="showPopover = true"
|
||||
/>
|
||||
<p v-show="showPopover" class="mt-1 text-center">
|
||||
温馨提示：右键上方裁剪区可开启功能菜单
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap justify-center items-center text-center">
|
||||
<el-image
|
||||
v-if="cropperImg"
|
||||
:src="cropperImg"
|
||||
:preview-src-list="Array.of(cropperImg)"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="infos" class="mt-1">
|
||||
<p>
|
||||
图像大小：{{ parseInt(infos.width) }} ×
|
||||
{{ parseInt(infos.height) }}像素
|
||||
</p>
|
||||
<p>
|
||||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +0,0 @@
|
||||
import perms from "./src/perms";
|
||||
|
||||
const Perms = perms;
|
||||
|
||||
export { Perms };
|
||||
@@ -1,20 +0,0 @@
|
||||
import { defineComponent, Fragment } from "vue";
|
||||
import { hasPerms } from "@/utils/auth";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Perms",
|
||||
props: {
|
||||
value: {
|
||||
type: undefined,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
return () => {
|
||||
if (!slots) return null;
|
||||
return hasPerms(props.value) ? (
|
||||
<Fragment>{slots.default?.()}</Fragment>
|
||||
) : null;
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -2,5 +2,4 @@ export * from "./auth";
|
||||
export * from "./copy";
|
||||
export * from "./longpress";
|
||||
export * from "./optimize";
|
||||
export * from "./perms";
|
||||
export * from "./ripple";
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import { hasPerms } from "@/utils/auth";
|
||||
import type { Directive, DirectiveBinding } from "vue";
|
||||
|
||||
export const perms: Directive = {
|
||||
mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
|
||||
const { value } = binding;
|
||||
if (value) {
|
||||
!hasPerms(value) && el.parentNode?.removeChild(el);
|
||||
} else {
|
||||
throw new Error(
|
||||
"[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -133,7 +133,7 @@ const transitionMain = defineComponent({
|
||||
}"
|
||||
>
|
||||
<el-backtop
|
||||
:title="t('buttons.pureBackTop')"
|
||||
:title="t('buttons:BackTop')"
|
||||
target=".app-main .el-scrollbar__wrap"
|
||||
>
|
||||
<BackTopIcon />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import { getConfig } from "@/config";
|
||||
|
||||
const TITLE = getConfig("Title");
|
||||
|
||||
@@ -24,6 +24,7 @@ const {
|
||||
userAvatar,
|
||||
avatarsStyle,
|
||||
toggleSideBar,
|
||||
toAccountSettings,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass
|
||||
} = useNav();
|
||||
@@ -94,19 +95,26 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="toAccountSettings">
|
||||
<IconifyIconOffline
|
||||
:icon="AccountSettingsIcon"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons:AccountSettings") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureLoginOut") }}
|
||||
{{ t("buttons:LoginOut") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
:title="t('buttons:OpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
|
||||
@@ -112,7 +112,7 @@ function hoverDescription(event, description) {
|
||||
max-width: 238px;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.notice-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -20,13 +20,13 @@ export interface TabItem {
|
||||
export const noticesData: TabItem[] = [
|
||||
{
|
||||
key: "1",
|
||||
name: $t("status.pureNotify"),
|
||||
name: $t("status:Notify"),
|
||||
list: [],
|
||||
emptyText: $t("status.pureNoNotify")
|
||||
emptyText: $t("status:NoNotify")
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: $t("status.pureMessage"),
|
||||
name: $t("status:Message"),
|
||||
list: [
|
||||
{
|
||||
avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile1.svg",
|
||||
@@ -51,11 +51,11 @@ export const noticesData: TabItem[] = [
|
||||
type: "2"
|
||||
}
|
||||
],
|
||||
emptyText: $t("status.pureNoMessage")
|
||||
emptyText: $t("status:NoMessage")
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: $t("status.pureTodo"),
|
||||
name: $t("status:Todo"),
|
||||
list: [
|
||||
{
|
||||
avatar: "",
|
||||
@@ -94,6 +94,6 @@ export const noticesData: TabItem[] = [
|
||||
type: "3"
|
||||
}
|
||||
],
|
||||
emptyText: $t("status.pureNoTodo")
|
||||
emptyText: $t("status:NoTodo")
|
||||
}
|
||||
];
|
||||
|
||||
@@ -44,7 +44,7 @@ const getLabel = computed(
|
||||
>
|
||||
<el-empty
|
||||
v-if="notices.length === 0"
|
||||
:description="t('status.pureNoMessage')"
|
||||
:description="t('status:NoMessage')"
|
||||
:image-size="60"
|
||||
/>
|
||||
<span v-else>
|
||||
|
||||
@@ -54,11 +54,11 @@ onBeforeUnmount(() => {
|
||||
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
|
||||
>
|
||||
<h4 class="dark:text-white">
|
||||
{{ t("panel.pureSystemSet") }}
|
||||
{{ t("panel:SystemSet") }}
|
||||
</h4>
|
||||
<span
|
||||
v-tippy="{
|
||||
content: t('panel.pureCloseSystemSet'),
|
||||
content: t('panel:CloseSystemSet'),
|
||||
placement: 'bottom-start',
|
||||
zIndex: 41000
|
||||
}"
|
||||
@@ -82,7 +82,7 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
<el-button
|
||||
v-tippy="{
|
||||
content: t('panel.pureClearCacheAndToLogin'),
|
||||
content: t('panel:ClearCacheAndToLogin'),
|
||||
placement: 'left-start',
|
||||
zIndex: 41000
|
||||
}"
|
||||
@@ -91,7 +91,7 @@ onBeforeUnmount(() => {
|
||||
bg
|
||||
@click="onReset"
|
||||
>
|
||||
{{ t("panel.pureClearCache") }}
|
||||
{{ t("panel:ClearCache") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,19 +18,19 @@ const { device } = useNav();
|
||||
<div class="search-footer text-[#333] dark:text-white">
|
||||
<span class="search-footer-item">
|
||||
<EnterOutlined class="icon" />
|
||||
{{ t("buttons.pureConfirm") }}
|
||||
{{ t("buttons:Confirm") }}
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<IconifyIconOffline :icon="ArrowUpLine" class="icon" />
|
||||
<IconifyIconOffline :icon="ArrowDownLine" class="icon" />
|
||||
{{ t("buttons.pureSwitch") }}
|
||||
{{ t("buttons:Switch") }}
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<MdiKeyboardEsc class="icon" />
|
||||
{{ t("buttons.pureClose") }}
|
||||
{{ t("buttons:Close") }}
|
||||
</span>
|
||||
<p v-if="device !== 'mobile' && total > 0" class="search-footer-total">
|
||||
{{ `${t("search.pureTotal")} ${total}` }}
|
||||
{{ `${t("search:Total")} ${total}` }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -144,7 +144,7 @@ defineExpose({ handleScroll });
|
||||
<div ref="historyRef" class="history">
|
||||
<template v-if="historyList.length">
|
||||
<div :style="titleStyle">
|
||||
{{ t("search.pureHistory") }}
|
||||
{{ t("search:History") }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in historyList"
|
||||
@@ -165,7 +165,7 @@ defineExpose({ handleScroll });
|
||||
<template v-if="collectList.length">
|
||||
<div :style="titleStyle">
|
||||
{{
|
||||
`${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
|
||||
`${t("search:Collect")}${collectList.length > 1 ? t("search:DragSort") : ""}`
|
||||
}}
|
||||
</div>
|
||||
<div class="collect-container">
|
||||
|
||||
@@ -6,8 +6,8 @@ import { useRouter } from "vue-router";
|
||||
import SearchResult from "./SearchResult.vue";
|
||||
import SearchFooter from "./SearchFooter.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import SearchHistory from "./SearchHistory.vue";
|
||||
import { transformI18n, $t } from "@/plugins/i18n";
|
||||
import type { optionsItem, dragItem } from "../types";
|
||||
import { ref, computed, shallowRef, watch } from "vue";
|
||||
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
|
||||
@@ -293,7 +293,7 @@ onKeyStroke("ArrowDown", handleDown);
|
||||
v-model="keyword"
|
||||
size="large"
|
||||
clearable
|
||||
:placeholder="t('search.purePlaceholder')"
|
||||
:placeholder="t('search:Placeholder')"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
@@ -305,7 +305,7 @@ onKeyStroke("ArrowDown", handleDown);
|
||||
</el-input>
|
||||
<div class="search-content">
|
||||
<el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
|
||||
<el-empty v-if="showEmpty" :description="t('search.pureEmpty')" />
|
||||
<el-empty v-if="showEmpty" :description="t('search:Empty')" />
|
||||
<SearchHistory
|
||||
v-if="showSearchHistory"
|
||||
ref="historyRef"
|
||||
|
||||
@@ -147,13 +147,13 @@ function setFalse(Doms): any {
|
||||
const stretchTypeOptions = computed<Array<OptionsType>>(() => {
|
||||
return [
|
||||
{
|
||||
label: t("panel.pureStretchFixed"),
|
||||
tip: t("panel.pureStretchFixedTip"),
|
||||
label: t("panel:StretchFixed"),
|
||||
tip: t("panel:StretchFixedTip"),
|
||||
value: "fixed"
|
||||
},
|
||||
{
|
||||
label: t("panel.pureStretchCustom"),
|
||||
tip: t("panel.pureStretchCustomTip"),
|
||||
label: t("panel:StretchCustom"),
|
||||
tip: t("panel:StretchCustomTip"),
|
||||
value: "custom"
|
||||
}
|
||||
];
|
||||
@@ -195,24 +195,24 @@ const pClass = computed(() => {
|
||||
const themeOptions = computed<Array<OptionsType>>(() => {
|
||||
return [
|
||||
{
|
||||
label: t("panel.pureOverallStyleLight"),
|
||||
label: t("panel:OverallStyleLight"),
|
||||
icon: DayIcon,
|
||||
theme: "light",
|
||||
tip: t("panel.pureOverallStyleLightTip"),
|
||||
tip: t("panel:OverallStyleLightTip"),
|
||||
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
|
||||
},
|
||||
{
|
||||
label: t("panel.pureOverallStyleDark"),
|
||||
label: t("panel:OverallStyleDark"),
|
||||
icon: DarkIcon,
|
||||
theme: "dark",
|
||||
tip: t("panel.pureOverallStyleDarkTip"),
|
||||
tip: t("panel:OverallStyleDarkTip"),
|
||||
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
|
||||
},
|
||||
{
|
||||
label: t("panel.pureOverallStyleSystem"),
|
||||
label: t("panel:OverallStyleSystem"),
|
||||
icon: SystemIcon,
|
||||
theme: "system",
|
||||
tip: t("panel.pureOverallStyleSystemTip"),
|
||||
tip: t("panel:OverallStyleSystemTip"),
|
||||
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
|
||||
}
|
||||
];
|
||||
@@ -221,18 +221,18 @@ const themeOptions = computed<Array<OptionsType>>(() => {
|
||||
const markOptions = computed<Array<OptionsType>>(() => {
|
||||
return [
|
||||
{
|
||||
label: t("panel.pureTagsStyleSmart"),
|
||||
tip: t("panel.pureTagsStyleSmartTip"),
|
||||
label: t("panel:TagsStyleSmart"),
|
||||
tip: t("panel:TagsStyleSmartTip"),
|
||||
value: "smart"
|
||||
},
|
||||
{
|
||||
label: t("panel.pureTagsStyleCard"),
|
||||
tip: t("panel.pureTagsStyleCardTip"),
|
||||
label: t("panel:TagsStyleCard"),
|
||||
tip: t("panel:TagsStyleCardTip"),
|
||||
value: "card"
|
||||
},
|
||||
{
|
||||
label: t("panel.pureTagsStyleChrome"),
|
||||
tip: t("panel.pureTagsStyleChromeTip"),
|
||||
label: t("panel:TagsStyleChrome"),
|
||||
tip: t("panel:TagsStyleChromeTip"),
|
||||
value: "chrome"
|
||||
}
|
||||
];
|
||||
@@ -317,7 +317,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
<template>
|
||||
<LayPanel>
|
||||
<div class="p-5">
|
||||
<p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
|
||||
<p :class="pClass">{{ t("panel:OverallStyle") }}</p>
|
||||
<Segmented
|
||||
resize
|
||||
class="select-none"
|
||||
@@ -335,7 +335,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
"
|
||||
/>
|
||||
|
||||
<p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
|
||||
<p :class="['mt-5', pClass]">{{ t("panel:ThemeColor") }}</p>
|
||||
<ul class="theme-color">
|
||||
<li
|
||||
v-for="(item, index) in themeColors"
|
||||
@@ -354,12 +354,12 @@ onUnmounted(() => removeMatchMedia);
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
|
||||
<p :class="['mt-5', pClass]">{{ t("panel:LayoutModel") }}</p>
|
||||
<ul class="pure-theme">
|
||||
<li
|
||||
ref="verticalRef"
|
||||
v-tippy="{
|
||||
content: t('panel.pureVerticalTip'),
|
||||
content: t('panel:VerticalTip'),
|
||||
zIndex: 41000
|
||||
}"
|
||||
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
|
||||
@@ -372,7 +372,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
v-if="device !== 'mobile'"
|
||||
ref="horizontalRef"
|
||||
v-tippy="{
|
||||
content: t('panel.pureHorizontalTip'),
|
||||
content: t('panel:HorizontalTip'),
|
||||
zIndex: 41000
|
||||
}"
|
||||
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
|
||||
@@ -385,7 +385,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
v-if="device !== 'mobile'"
|
||||
ref="mixRef"
|
||||
v-tippy="{
|
||||
content: t('panel.pureMixTip'),
|
||||
content: t('panel:MixTip'),
|
||||
zIndex: 41000
|
||||
}"
|
||||
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
|
||||
@@ -397,7 +397,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
</ul>
|
||||
|
||||
<span v-if="useAppStoreHook().getViewportWidth > 1280">
|
||||
<p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
|
||||
<p :class="['mt-5', pClass]">{{ t("panel:Stretch") }}</p>
|
||||
<Segmented
|
||||
resize
|
||||
class="mb-2 select-none"
|
||||
@@ -440,7 +440,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
|
||||
<p :class="['mt-4', pClass]">{{ t("panel:TagsStyle") }}</p>
|
||||
<Segmented
|
||||
resize
|
||||
class="select-none"
|
||||
@@ -450,46 +450,46 @@ onUnmounted(() => removeMatchMedia);
|
||||
/>
|
||||
|
||||
<p class="mt-5 font-medium text-sm dark:text-white">
|
||||
{{ t("panel.pureInterfaceDisplay") }}
|
||||
{{ t("panel:InterfaceDisplay") }}
|
||||
</p>
|
||||
<ul class="setting">
|
||||
<li>
|
||||
<span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
|
||||
<span class="dark:text-white">{{ t("panel:GreyModel") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.greyVal"
|
||||
inline-prompt
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
:active-text="t('buttons:OpenText')"
|
||||
:inactive-text="t('buttons:CloseText')"
|
||||
@change="greyChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
|
||||
<span class="dark:text-white">{{ t("panel:WeakModel") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.weakVal"
|
||||
inline-prompt
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
:active-text="t('buttons:OpenText')"
|
||||
:inactive-text="t('buttons:CloseText')"
|
||||
@change="weekChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
|
||||
<span class="dark:text-white">{{ t("panel:HiddenTags") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.tabsVal"
|
||||
inline-prompt
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
:active-text="t('buttons:OpenText')"
|
||||
:inactive-text="t('buttons:CloseText')"
|
||||
@change="tagsChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">{{ t("panel.pureHiddenFooter") }}</span>
|
||||
<span class="dark:text-white">{{ t("panel:HiddenFooter") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.hideFooter"
|
||||
inline-prompt
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
:active-text="t('buttons:OpenText')"
|
||||
:inactive-text="t('buttons:CloseText')"
|
||||
@change="hideFooterChange"
|
||||
/>
|
||||
</li>
|
||||
@@ -500,20 +500,20 @@ onUnmounted(() => removeMatchMedia);
|
||||
inline-prompt
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
:active-text="t('buttons:OpenText')"
|
||||
:inactive-text="t('buttons:CloseText')"
|
||||
@change="logoChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">
|
||||
{{ t("panel.pureMultiTagsCache") }}
|
||||
{{ t("panel:MultiTagsCache") }}
|
||||
</span>
|
||||
<el-switch
|
||||
v-model="settings.multiTagsCache"
|
||||
inline-prompt
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
:active-text="t('buttons:OpenText')"
|
||||
:inactive-text="t('buttons:CloseText')"
|
||||
@change="multiTagsCacheChange"
|
||||
/>
|
||||
</li>
|
||||
|
||||
@@ -35,6 +35,7 @@ const {
|
||||
userAvatar,
|
||||
backTopMenu,
|
||||
avatarsStyle,
|
||||
toAccountSettings,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass
|
||||
} = useNav();
|
||||
@@ -121,20 +122,27 @@ onMounted(() => {
|
||||
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-item @click="toAccountSettings">
|
||||
<IconifyIconOffline
|
||||
:icon="AccountSettingsIcon"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons:AccountSettings") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureLoginOut") }}
|
||||
{{ t("buttons:LoginOut") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
:title="t('buttons:OpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
|
||||
@@ -32,6 +32,7 @@ const {
|
||||
userAvatar,
|
||||
getDivStyle,
|
||||
avatarsStyle,
|
||||
toAccountSettings,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass
|
||||
} = useNav();
|
||||
@@ -142,20 +143,27 @@ watch(
|
||||
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-item @click="toAccountSettings">
|
||||
<IconifyIconOffline
|
||||
:icon="AccountSettingsIcon"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons:AccountSettings") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureLoginOut") }}
|
||||
{{ t("buttons:LoginOut") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
:title="t('buttons:OpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
|
||||
@@ -36,9 +36,7 @@ const toggleClick = () => {
|
||||
<template>
|
||||
<div
|
||||
v-tippy="{
|
||||
content: isActive
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand'),
|
||||
content: isActive ? t('buttons:ClickCollapse') : t('buttons:ClickExpand'),
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
|
||||
@@ -47,8 +47,8 @@ const toggleClick = () => {
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: isActive
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand'),
|
||||
? t('buttons:ClickCollapse')
|
||||
: t('buttons:ClickExpand'),
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
|
||||
@@ -25,9 +25,7 @@ const toggleClick = () => {
|
||||
<template>
|
||||
<div
|
||||
class="px-3 mr-1 navbar-bg-hover"
|
||||
:title="
|
||||
isActive ? t('buttons.pureClickCollapse') : t('buttons.pureClickExpand')
|
||||
"
|
||||
:title="isActive ? t('buttons:ClickCollapse') : t('buttons:ClickExpand')"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
|
||||
@@ -344,10 +344,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
setTimeout(() => {
|
||||
if (pureSetting.hiddenSideBar) {
|
||||
tagsViews[6].icon = ExitFullscreen;
|
||||
tagsViews[6].text = $t("buttons.pureContentExitFullScreen");
|
||||
tagsViews[6].text = $t("buttons:ContentExitFullScreen");
|
||||
} else {
|
||||
tagsViews[6].icon = Fullscreen;
|
||||
tagsViews[6].text = $t("buttons.pureContentFullScreen");
|
||||
tagsViews[6].text = $t("buttons:ContentFullScreen");
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
@@ -511,6 +511,7 @@ function tagOnClick(item) {
|
||||
} else {
|
||||
router.push({ path });
|
||||
}
|
||||
emitter.emit("tagOnClick", item);
|
||||
}
|
||||
|
||||
onClickOutside(contextmenuRef, closeMenu, {
|
||||
|
||||
@@ -71,7 +71,7 @@ onMounted(() => {
|
||||
<div
|
||||
v-loading="loading"
|
||||
class="frame"
|
||||
:element-loading-text="t('status.pureLoad')"
|
||||
:element-loading-text="t('status:Load')"
|
||||
>
|
||||
<iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,10 @@ import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { logoutAPI } from "@/api/login";
|
||||
import { message } from "@/utils/message";
|
||||
|
||||
export function useDataThemeChange() {
|
||||
const { layoutTheme, layout } = useLayout();
|
||||
@@ -110,17 +114,48 @@ export function useDataThemeChange() {
|
||||
|
||||
/** 清空缓存并返回登录页 */
|
||||
function onReset() {
|
||||
removeToken();
|
||||
storageLocal().clear();
|
||||
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
|
||||
useAppStoreHook().setLayout(Layout);
|
||||
setEpThemeColor(EpThemeColor);
|
||||
useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
|
||||
toggleClass(Grey, "html-grey", document.querySelector("html"));
|
||||
toggleClass(Weak, "html-weakness", document.querySelector("html"));
|
||||
router.push("/login");
|
||||
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
|
||||
resetRouter();
|
||||
ElMessageBox.confirm(
|
||||
transformI18n("logout:message"),
|
||||
transformI18n("buttons:LoginOut"),
|
||||
{
|
||||
confirmButtonText: transformI18n("buttons:Confirm"),
|
||||
cancelButtonText: transformI18n("buttons:Cancel"),
|
||||
type: "warning",
|
||||
center: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
const res = await logoutAPI();
|
||||
if (!res.success) {
|
||||
removeToken();
|
||||
storageLocal().clear();
|
||||
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } =
|
||||
getConfig();
|
||||
useAppStoreHook().setLayout(Layout);
|
||||
setEpThemeColor(EpThemeColor);
|
||||
useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
|
||||
toggleClass(Grey, "html-grey", document.querySelector("html"));
|
||||
toggleClass(Weak, "html-weakness", document.querySelector("html"));
|
||||
router.push("/login");
|
||||
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
|
||||
resetRouter();
|
||||
message(transformI18n("logout:success"), {
|
||||
type: "success",
|
||||
duration: 1000
|
||||
});
|
||||
} else {
|
||||
message(transformI18n("logout:fail"), {
|
||||
type: "error",
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
message(transformI18n("logout:cancel"), {
|
||||
type: "info",
|
||||
duration: 1000
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { storeToRefs } from "pinia";
|
||||
import { getConfig } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import Avatar from "@/assets/user.jpg";
|
||||
import Avatar from "@/assets/user.png";
|
||||
import { getTopMenu } from "@/router/utils";
|
||||
import { useFullscreen } from "@vueuse/core";
|
||||
import type { routeMetaType } from "../types";
|
||||
@@ -14,9 +14,11 @@ import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useGlobal, isAllEmpty } from "@pureadmin/utils";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { message } from "@/utils/message";
|
||||
import { logoutAPI } from "@/api/login";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
|
||||
const errorInfo =
|
||||
"The current routing configuration is incorrect, please check the configuration";
|
||||
|
||||
@@ -98,7 +100,37 @@ export function useNav() {
|
||||
|
||||
/** 退出登录 */
|
||||
function logout() {
|
||||
useUserStoreHook().logOut();
|
||||
ElMessageBox.confirm(
|
||||
transformI18n("logout:message"),
|
||||
transformI18n("buttons:LoginOut"),
|
||||
{
|
||||
confirmButtonText: transformI18n("buttons:Confirm"),
|
||||
cancelButtonText: transformI18n("buttons:Cancel"),
|
||||
type: "warning",
|
||||
center: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
const res = await logoutAPI();
|
||||
if (!res.success) {
|
||||
useUserStoreHook().logOut();
|
||||
message(transformI18n("logout:success"), {
|
||||
type: "success",
|
||||
duration: 1000
|
||||
});
|
||||
} else {
|
||||
message(transformI18n("logout:fail"), {
|
||||
type: "error",
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
message(transformI18n("logout:cancel"), {
|
||||
type: "info",
|
||||
duration: 1000
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function backTopMenu() {
|
||||
@@ -109,6 +141,10 @@ export function useNav() {
|
||||
emitter.emit("openPanel");
|
||||
}
|
||||
|
||||
function toAccountSettings() {
|
||||
router.push({ name: "AccountSettings" });
|
||||
}
|
||||
|
||||
function toggleSideBar() {
|
||||
pureApp.toggleSideBar();
|
||||
}
|
||||
@@ -169,6 +205,7 @@ export function useNav() {
|
||||
userAvatar,
|
||||
avatarsStyle,
|
||||
tooltipEffect,
|
||||
toAccountSettings,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass
|
||||
};
|
||||
|
||||
@@ -64,49 +64,49 @@ export function useTags() {
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: RefreshRight,
|
||||
text: $t("buttons.pureReload"),
|
||||
text: $t("buttons:Reload"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: Close,
|
||||
text: $t("buttons.pureCloseCurrentTab"),
|
||||
text: $t("buttons:CloseCurrentTab"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseLeftTags,
|
||||
text: $t("buttons.pureCloseLeftTabs"),
|
||||
text: $t("buttons:CloseLeftTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseRightTags,
|
||||
text: $t("buttons.pureCloseRightTabs"),
|
||||
text: $t("buttons:CloseRightTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseOtherTags,
|
||||
text: $t("buttons.pureCloseOtherTabs"),
|
||||
text: $t("buttons:CloseOtherTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 2 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseAllTags,
|
||||
text: $t("buttons.pureCloseAllTabs"),
|
||||
text: $t("buttons:CloseAllTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: Fullscreen,
|
||||
text: $t("buttons.pureContentFullScreen"),
|
||||
text: $t("buttons:ContentFullScreen"),
|
||||
divided: true,
|
||||
disabled: false,
|
||||
show: true
|
||||
|
||||
@@ -188,7 +188,7 @@ const LayHeader = defineComponent({
|
||||
</div>
|
||||
<el-scrollbar v-else>
|
||||
<el-backtop
|
||||
:title="t('buttons.pureBackTop')"
|
||||
:title="t('buttons:BackTop')"
|
||||
target=".main-container .el-scrollbar__wrap"
|
||||
>
|
||||
<BackTopIcon />
|
||||
|
||||
@@ -7,7 +7,7 @@ export const routerArrays: Array<RouteConfigs> =
|
||||
{
|
||||
path: "/welcome",
|
||||
meta: {
|
||||
title: "menus.pureHome",
|
||||
title: "menus:Home",
|
||||
icon: "ep:home-filled"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,9 +43,7 @@ app.component("FontIcon", FontIcon);
|
||||
|
||||
// 全局注册按钮级别权限组件
|
||||
import { Auth } from "@/components/ReAuth";
|
||||
import { Perms } from "@/components/RePerms";
|
||||
app.component("Auth", Auth);
|
||||
app.component("Perms", Perms);
|
||||
|
||||
// 全局注册vue-tippy
|
||||
import "tippy.js/dist/tippy.css";
|
||||
|
||||
@@ -6,16 +6,17 @@ import { buildHierarchyTree } from "@/utils/tree";
|
||||
import remainingRouter from "./modules/remaining";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { isUrl, openLink, storageLocal } from "@pureadmin/utils";
|
||||
import { isAllEmpty, isUrl, openLink, storageLocal } from "@pureadmin/utils";
|
||||
import {
|
||||
ascending,
|
||||
isOneOfArray,
|
||||
getHistoryMode,
|
||||
initRouter,
|
||||
findRouteByPath,
|
||||
handleAliveRoute,
|
||||
formatTwoStageRoutes,
|
||||
formatFlatteningRoutes,
|
||||
addPathMatch
|
||||
getTopMenu
|
||||
} from "./utils";
|
||||
import {
|
||||
type Router,
|
||||
@@ -24,8 +25,8 @@ import {
|
||||
type RouteComponent
|
||||
} from "vue-router";
|
||||
import {
|
||||
type DataInfo,
|
||||
userKey,
|
||||
type UserInfo,
|
||||
userInfoKey,
|
||||
removeToken,
|
||||
getTokenInfo
|
||||
} from "@/utils/auth";
|
||||
@@ -112,16 +113,16 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
||||
handleAliveRoute(to);
|
||||
}
|
||||
}
|
||||
const userInfo = storageLocal().getItem<DataInfo>(userKey);
|
||||
const userInfo = storageLocal().getItem<UserInfo>(userInfoKey);
|
||||
NProgress.start();
|
||||
const externalLink = isUrl(to?.name as string);
|
||||
if (!externalLink) {
|
||||
to.matched.some(item => {
|
||||
if (!item.meta.title) return "";
|
||||
const Title = getConfig().Title;
|
||||
if (Title)
|
||||
if (Title) {
|
||||
document.title = `${transformI18n(item.meta.title)} | ${Title}`;
|
||||
else document.title = transformI18n(item.meta.title);
|
||||
} else document.title = transformI18n(item.meta.title);
|
||||
});
|
||||
}
|
||||
/** 如果已经登录并存在登录信息后不能跳转到路由白名单，而是继续保持在当前页面 */
|
||||
@@ -129,11 +130,11 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
||||
whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
|
||||
}
|
||||
const data = getTokenInfo();
|
||||
if (!data.isExpire && userInfo) {
|
||||
if (!data.isExpire) {
|
||||
// 无权限跳转403页面
|
||||
if (
|
||||
to.meta?.auths &&
|
||||
!isOneOfArray(to.meta?.auths, userInfo?.permissions)
|
||||
to.meta?.permissions &&
|
||||
!isOneOfArray(to.meta?.permissions, userInfo?.permissions)
|
||||
) {
|
||||
next({ path: "/403" });
|
||||
}
|
||||
@@ -155,22 +156,37 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
||||
usePermissionStoreHook().wholeMenus.length === 0 &&
|
||||
to.path !== "/login"
|
||||
) {
|
||||
usePermissionStoreHook().handleWholeMenus([]);
|
||||
addPathMatch();
|
||||
if (!useMultiTagsStoreHook().getMultiTagsCache) {
|
||||
const { path } = to;
|
||||
const route = findRouteByPath(
|
||||
path,
|
||||
router.options.routes[0].children
|
||||
);
|
||||
if (route && route.meta?.title) {
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: route.path,
|
||||
name: route.name,
|
||||
meta: route.meta
|
||||
});
|
||||
initRouter().then((router: Router) => {
|
||||
if (!useMultiTagsStoreHook().getMultiTagsCache) {
|
||||
const { path } = to;
|
||||
const route = findRouteByPath(
|
||||
path,
|
||||
router.options.routes[0].children
|
||||
);
|
||||
getTopMenu(true);
|
||||
// query、params模式路由传参数的标签页不在此处处理
|
||||
if (route && route.meta?.title) {
|
||||
if (isAllEmpty(route.parentId) && route.meta?.backstage) {
|
||||
// 此处为动态顶级路由（目录）
|
||||
const { path, name, meta } = route.children[0];
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path,
|
||||
name,
|
||||
meta
|
||||
});
|
||||
} else {
|
||||
const { path, name, meta } = route;
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path,
|
||||
name,
|
||||
meta
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
|
||||
if (isAllEmpty(to.name)) router.push(to.fullPath);
|
||||
});
|
||||
}
|
||||
toCorrectRoute();
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ export default {
|
||||
redirect: "/welcome",
|
||||
meta: {
|
||||
icon: "ep:home-filled",
|
||||
title: $t("menus.pureHome"),
|
||||
title: $t("menus:Home"),
|
||||
rank: 0
|
||||
},
|
||||
children: [
|
||||
@@ -18,7 +18,7 @@ export default {
|
||||
name: "Welcome",
|
||||
component: () => import("@/views/welcome/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.pureHome"),
|
||||
title: $t("menus:Home"),
|
||||
showLink: VITE_HIDE_HOME === "true" ? false : true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,40 +7,16 @@ export default [
|
||||
name: "Login",
|
||||
component: () => import("@/views/login/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.pureLogin"),
|
||||
title: $t("menus:Login"),
|
||||
showLink: false,
|
||||
rank: 101
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/403",
|
||||
name: "403",
|
||||
component: () => import("@/views/error/403.vue"),
|
||||
meta: {
|
||||
title: $t("menus.pureFourZeroOne")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/404",
|
||||
name: "404",
|
||||
component: () => import("@/views/error/404.vue"),
|
||||
meta: {
|
||||
title: $t("menus.pureFourZeroFour")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/500",
|
||||
name: "500",
|
||||
component: () => import("@/views/error/500.vue"),
|
||||
meta: {
|
||||
title: $t("menus.pureFive")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/redirect",
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: $t("status.pureLoad"),
|
||||
title: $t("status:Load"),
|
||||
showLink: false,
|
||||
rank: 102
|
||||
},
|
||||
@@ -51,5 +27,46 @@ export default [
|
||||
component: () => import("@/layout/redirect.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: "/403",
|
||||
name: "403",
|
||||
component: () => import("@/views/error/403.vue"),
|
||||
meta: {
|
||||
title: $t("menus:FourZeroOne"),
|
||||
showLink: false,
|
||||
rank: 104
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/404",
|
||||
name: "404",
|
||||
component: () => import("@/views/error/404.vue"),
|
||||
meta: {
|
||||
title: $t("menus:FourZeroFour"),
|
||||
showLink: false,
|
||||
rank: 105
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/500",
|
||||
name: "500",
|
||||
component: () => import("@/views/error/500.vue"),
|
||||
meta: {
|
||||
title: $t("menus:Five"),
|
||||
showLink: false,
|
||||
rank: 106
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/account-settings",
|
||||
name: "AccountSettings",
|
||||
component: () => import("@/views/account-settings/index.vue"),
|
||||
meta: {
|
||||
title: $t("buttons:AccountSettings"),
|
||||
showLink: false,
|
||||
rank: 107
|
||||
}
|
||||
}
|
||||
] satisfies Array<RouteConfigsTable>;
|
||||
|
||||
@@ -17,12 +17,15 @@ import {
|
||||
isIncludeAllChildren
|
||||
} from "@pureadmin/utils";
|
||||
import { getConfig } from "@/config";
|
||||
import type { menuType } from "@/layout/types";
|
||||
import { type menuType, routerArrays } from "@/layout/types";
|
||||
import { buildHierarchyTree } from "@/utils/tree";
|
||||
import { userKey, type DataInfo } from "@/utils/auth";
|
||||
import { userInfoKey, type UserInfo } from "@/utils/auth";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
// 动态路由
|
||||
import { getUserRoutesAPI } from "@/api/login";
|
||||
const IFrame = () => import("@/layout/frame.vue");
|
||||
// https://cn.vitejs.dev/guide/features.html#glob-import
|
||||
const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
|
||||
@@ -82,7 +85,7 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
|
||||
/** 从localStorage里取出当前登陆用户的角色permissions，过滤无权限的菜单 */
|
||||
function filterNoPermissionTree(data: RouteComponent[]) {
|
||||
const currentRoles =
|
||||
storageLocal().getItem<DataInfo>(userKey)?.permissions ?? [];
|
||||
storageLocal().getItem<UserInfo>(userInfoKey)?.permissions ?? [];
|
||||
const newTree = cloneDeep(data).filter((v: any) =>
|
||||
isOneOfArray(v.meta?.permissions, currentRoles)
|
||||
);
|
||||
@@ -176,6 +179,14 @@ function handleAsyncRoutes(routeList) {
|
||||
);
|
||||
usePermissionStoreHook().handleWholeMenus(routeList);
|
||||
}
|
||||
if (!useMultiTagsStoreHook().getMultiTagsCache) {
|
||||
useMultiTagsStoreHook().handleTags("equal", [
|
||||
...routerArrays,
|
||||
...usePermissionStoreHook().flatteningRoutes.filter(
|
||||
v => v?.meta?.fixedTag
|
||||
)
|
||||
]);
|
||||
}
|
||||
addPathMatch();
|
||||
}
|
||||
|
||||
@@ -192,14 +203,19 @@ function initRouter() {
|
||||
});
|
||||
} else {
|
||||
return new Promise(resolve => {
|
||||
handleAsyncRoutes(cloneDeep([]));
|
||||
resolve(router);
|
||||
getUserRoutesAPI().then(({ data }) => {
|
||||
handleAsyncRoutes(cloneDeep(data));
|
||||
storageLocal().setItem(key, data);
|
||||
resolve(router);
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return new Promise(resolve => {
|
||||
handleAsyncRoutes(cloneDeep([]));
|
||||
resolve([]);
|
||||
getUserRoutesAPI().then(({ data }) => {
|
||||
handleAsyncRoutes(cloneDeep(data));
|
||||
resolve(router);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,74 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { store } from "@/store";
|
||||
import type { userType } from "../types";
|
||||
import { routerArrays } from "@/layout/types";
|
||||
import { router, resetRouter } from "@/router";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { getLogin, refreshTokenApi } from "@/api/login";
|
||||
import type { LoginResult } from "@/api/login";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import {
|
||||
type userType,
|
||||
store,
|
||||
router,
|
||||
resetRouter,
|
||||
routerArrays,
|
||||
storageLocal
|
||||
} from "../utils";
|
||||
import { type UserResult, getLogin } from "@/api/user";
|
||||
import { useMultiTagsStoreHook } from "./multiTags";
|
||||
import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
|
||||
type UserInfo,
|
||||
type UserToken,
|
||||
setToken,
|
||||
removeToken,
|
||||
userInfoKey,
|
||||
userTokenKey
|
||||
} from "@/utils/auth";
|
||||
|
||||
export const useUserStore = defineStore({
|
||||
id: "user",
|
||||
state: (): userType => ({
|
||||
// 用户名
|
||||
username: storageLocal().getItem<DataInfo>(userKey)?.username ?? "",
|
||||
username: storageLocal().getItem<UserInfo>(userInfoKey)?.username ?? "",
|
||||
// 页面级别权限
|
||||
permissions: storageLocal().getItem<DataInfo>(userKey)?.permissions ?? [],
|
||||
permissions:
|
||||
storageLocal().getItem<UserInfo>(userInfoKey)?.permissions ?? [],
|
||||
// 前端生成的验证码（按实际需求替换）
|
||||
verifyCode: "",
|
||||
// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码,1,2预留暂不开发）
|
||||
currentPage: 0,
|
||||
/**用户Id */
|
||||
userId: storageLocal().getItem<DataInfo>(userKey)?.userId ?? "",
|
||||
/**用户头像 */
|
||||
avatar: storageLocal().getItem<DataInfo>(userKey)?.avatar ?? "",
|
||||
avatar: storageLocal().getItem<UserInfo>(userInfoKey)?.avatar ?? "",
|
||||
/**用户数据库ID */
|
||||
roles: storageLocal().getItem<DataInfo>(userKey)?.roles ?? [],
|
||||
id: storageLocal().getItem<UserInfo>(userInfoKey)?.id ?? "",
|
||||
/**用户Token */
|
||||
accessToken: storageLocal().getItem<DataInfo>(userKey)?.accessToken ?? "",
|
||||
accessToken:
|
||||
storageLocal().getItem<UserToken>(userTokenKey)?.accessToken ?? "",
|
||||
/**用户刷新Token*/
|
||||
refreshToken:
|
||||
storageLocal().getItem<UserToken>(userTokenKey)?.refreshToken ?? "",
|
||||
/**过期时间 */
|
||||
expires: storageLocal().getItem<DataInfo>(userKey)?.expires ?? 0,
|
||||
expires: storageLocal().getItem<UserToken>(userTokenKey)?.expiresTime ?? 0,
|
||||
// 是否勾选了登录页的免登录
|
||||
isRemembered: false,
|
||||
// 登录页的免登录存储几天，默认2天
|
||||
loginDay: 2
|
||||
loginDay: 2,
|
||||
/***
|
||||
* 用户手机号
|
||||
*/
|
||||
phone: storageLocal().getItem<UserInfo>(userInfoKey)?.phone ?? "",
|
||||
/***
|
||||
* 用户邮箱
|
||||
*/
|
||||
email: storageLocal().getItem<UserInfo>(userInfoKey)?.email ?? "",
|
||||
/***
|
||||
* 用户昵称
|
||||
*/
|
||||
nickname: storageLocal().getItem<UserInfo>(userInfoKey)?.nickname ?? "",
|
||||
/***
|
||||
* 用户性别
|
||||
*/
|
||||
gender: storageLocal().getItem<UserInfo>(userInfoKey)?.gender ?? 0,
|
||||
/***
|
||||
* 用户角色
|
||||
*/
|
||||
roles: storageLocal().getItem<UserInfo>(userInfoKey)?.roles ?? [],
|
||||
/***
|
||||
* 部门ID
|
||||
*/
|
||||
department_id:
|
||||
storageLocal().getItem<UserInfo>(userInfoKey)?.department_id ?? ""
|
||||
}),
|
||||
actions: {
|
||||
/** 存储用户名 */
|
||||
@@ -54,22 +87,22 @@ export const useUserStore = defineStore({
|
||||
SET_CURRENTPAGE(value: number) {
|
||||
this.currentPage = value;
|
||||
},
|
||||
/**存储用户ID */
|
||||
SET_USETID(value: string) {
|
||||
this.userId = value;
|
||||
},
|
||||
/**存储用户头像 */
|
||||
SET_AVATAR(value: string) {
|
||||
this.avatar = value;
|
||||
},
|
||||
/**存储用户数据库ID */
|
||||
SET_ROLES(value: string[]) {
|
||||
this.roles = value;
|
||||
SET_ID(value: string) {
|
||||
this.id = value;
|
||||
},
|
||||
/**存储用户Token */
|
||||
SET_ACCESSTOKEN(value: string) {
|
||||
this.accessToken = value;
|
||||
},
|
||||
/**存储用户刷新Token */
|
||||
SET_REFRESHTOKEN(value: string) {
|
||||
this.refreshToken = value;
|
||||
},
|
||||
/**存储用户Token过期时间戳 */
|
||||
SET_EXPIRES(value: number) {
|
||||
this.expires = value;
|
||||
@@ -82,15 +115,37 @@ export const useUserStore = defineStore({
|
||||
SET_LOGINDAY(value: number) {
|
||||
this.loginDay = Number(value);
|
||||
},
|
||||
/** 存储用户手机号 */
|
||||
SET_PHONE(value: string) {
|
||||
this.phone = value;
|
||||
},
|
||||
/** 存储用户邮箱 */
|
||||
SET_EMAIL(value: string) {
|
||||
this.email = value;
|
||||
},
|
||||
/** 存储用户昵称 */
|
||||
SET_NICKNAME(value: string) {
|
||||
this.nickname = value;
|
||||
},
|
||||
/** 存储用户性别 */
|
||||
SET_GENDER(value: number) {
|
||||
this.gender = value;
|
||||
},
|
||||
/** 存储用户角色 */
|
||||
SET_ROLES(value: Array<string>) {
|
||||
this.roles = value;
|
||||
},
|
||||
/** 存储用户部门ID */
|
||||
SET_DEPARTMENT_ID(value: string) {
|
||||
this.department_id = value;
|
||||
},
|
||||
/** 登入 */
|
||||
async loginByUsername(data: {
|
||||
username: string;
|
||||
password: string;
|
||||
loginDay?: number;
|
||||
uuid: string;
|
||||
code: string;
|
||||
}) {
|
||||
return new Promise<ResponseResult<UserResult>>((resolve, reject) => {
|
||||
return new Promise<ResponseResult<LoginResult>>((resolve, reject) => {
|
||||
getLogin(data)
|
||||
.then(data => {
|
||||
if (data.code === 200) {
|
||||
@@ -107,10 +162,40 @@ export const useUserStore = defineStore({
|
||||
logOut() {
|
||||
this.username = "";
|
||||
this.permissions = [];
|
||||
this.verifyCode = "";
|
||||
this.currentPage = 0;
|
||||
this.avatar = "";
|
||||
this.id = "";
|
||||
this.accessToken = "";
|
||||
this.refreshToken = "";
|
||||
this.expires = 0;
|
||||
this.isRemembered = false;
|
||||
this.loginDay = 2;
|
||||
this.phone = "";
|
||||
this.email = "";
|
||||
this.nickname = "";
|
||||
this.gender = 0;
|
||||
this.roles = [];
|
||||
this.department_id = "";
|
||||
removeToken();
|
||||
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
|
||||
resetRouter();
|
||||
router.push("/login");
|
||||
},
|
||||
/** 刷新`token` */
|
||||
async handRefreshToken(data: { refreshToken: string }) {
|
||||
return new Promise<ResponseResult<LoginResult>>((resolve, reject) => {
|
||||
refreshTokenApi(data)
|
||||
.then(data => {
|
||||
if (data.code === 200) {
|
||||
setToken(data.data);
|
||||
}
|
||||
resolve(data);
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -37,15 +37,52 @@ export type setType = {
|
||||
};
|
||||
|
||||
export type userType = {
|
||||
username?: string;
|
||||
permissions?: Array<string>;
|
||||
/**
|
||||
* 验证码
|
||||
*/
|
||||
verifyCode?: string;
|
||||
/**
|
||||
* 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码,1,2预留暂不开发）
|
||||
*/
|
||||
currentPage?: number;
|
||||
userId?: string;
|
||||
avatar?: string;
|
||||
roles?: Array<string>;
|
||||
accessToken?: string;
|
||||
expires?: number;
|
||||
/**
|
||||
* 是否记住密码
|
||||
*/
|
||||
isRemembered?: boolean;
|
||||
/**
|
||||
* 登录天数
|
||||
*/
|
||||
loginDay?: number;
|
||||
/** 用户名 */
|
||||
username: string;
|
||||
/** 用户性别 */
|
||||
gender: number;
|
||||
/** 用户昵称 */
|
||||
nickname?: string;
|
||||
/**用户邮箱 */
|
||||
email?: string;
|
||||
/**用户手机号 */
|
||||
phone?: string;
|
||||
/**用户角色 */
|
||||
roles?: Array<string>;
|
||||
/**用户权限 */
|
||||
permissions?: Array<string>;
|
||||
/**用户部门ID */
|
||||
department_id?: string;
|
||||
/**用户头像 */
|
||||
avatar?: string;
|
||||
/**用户数据库ID */
|
||||
id?: string;
|
||||
/**
|
||||
* 用户Token
|
||||
*/
|
||||
accessToken: string;
|
||||
/**
|
||||
* 过期时间（时间戳）
|
||||
*/
|
||||
expires: number;
|
||||
/**
|
||||
* 用于调用刷新accessToken的接口时所需的token
|
||||
*/
|
||||
refreshToken: string;
|
||||
};
|
||||
|
||||
@@ -1,40 +1,74 @@
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";
|
||||
|
||||
export interface DataInfo {
|
||||
/** token */
|
||||
accessToken: string;
|
||||
/** `accessToken`的过期时间（时间戳） */
|
||||
expires: number;
|
||||
export interface UserInfo {
|
||||
/** 用户名 */
|
||||
username?: string;
|
||||
/** 当前登陆用户的角色 */
|
||||
username: string;
|
||||
/** 用户性别 */
|
||||
gender: number;
|
||||
/** 用户昵称 */
|
||||
nickname?: string;
|
||||
/**用户邮箱 */
|
||||
email?: string;
|
||||
/**用户手机号 */
|
||||
phone?: string;
|
||||
/**用户角色 */
|
||||
roles?: Array<string>;
|
||||
/**用户权限 */
|
||||
permissions?: Array<string>;
|
||||
/**用户ID */
|
||||
userId?: string;
|
||||
/**用户部门ID */
|
||||
department_id?: string;
|
||||
/**用户头像 */
|
||||
avatar?: string;
|
||||
/**用户权限列表 */
|
||||
roles?: Array<string>;
|
||||
/**用户数据库ID */
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const userKey = "user-info";
|
||||
export const userTokenKey = "user-token";
|
||||
|
||||
/**存储用户基础信息 */
|
||||
export function setToken(data: DataInfo) {
|
||||
useUserStoreHook().SET_USERNAME(data.username);
|
||||
useUserStoreHook().SET_PERMISSIONS(data.permissions);
|
||||
useUserStoreHook().SET_USETID(data.userId);
|
||||
useUserStoreHook().SET_ROLES(data.roles);
|
||||
useUserStoreHook().SET_AVATAR(data.avatar);
|
||||
export const userInfoKey = "user-info";
|
||||
|
||||
export interface UserToken {
|
||||
/**
|
||||
* 用户Token
|
||||
*/
|
||||
accessToken: string;
|
||||
/**
|
||||
* 过期时间（时间戳）
|
||||
*/
|
||||
expiresTime: number;
|
||||
/**
|
||||
* 用于调用刷新accessToken的接口时所需的token
|
||||
*/
|
||||
refreshToken: string;
|
||||
}
|
||||
|
||||
/**存储用户Token信息 */
|
||||
export function setToken(data: UserToken) {
|
||||
useUserStoreHook().SET_ACCESSTOKEN(data.accessToken);
|
||||
useUserStoreHook().SET_EXPIRES(data.expires);
|
||||
storageLocal().setItem(userKey, data);
|
||||
useUserStoreHook().SET_REFRESHTOKEN(data.refreshToken);
|
||||
useUserStoreHook().SET_EXPIRES(data.expiresTime);
|
||||
storageLocal().setItem(userTokenKey, data);
|
||||
}
|
||||
|
||||
/**存储用户信息 */
|
||||
export function setUserInfo(data: UserInfo) {
|
||||
useUserStoreHook().SET_AVATAR(data.avatar);
|
||||
useUserStoreHook().SET_USERNAME(data.username);
|
||||
useUserStoreHook().SET_NICKNAME(data.nickname);
|
||||
useUserStoreHook().SET_EMAIL(data.email);
|
||||
useUserStoreHook().SET_PHONE(data.phone);
|
||||
useUserStoreHook().SET_DEPARTMENT_ID(data.department_id);
|
||||
useUserStoreHook().SET_ROLES(data.roles);
|
||||
useUserStoreHook().SET_PERMISSIONS(data.permissions);
|
||||
useUserStoreHook().SET_ID(data.id);
|
||||
useUserStoreHook().SET_GENDER(data.gender);
|
||||
storageLocal().setItem(userInfoKey, data);
|
||||
}
|
||||
|
||||
/** 删除`token`以及key值为`user-info`的localStorage信息 */
|
||||
export function removeToken() {
|
||||
storageLocal().removeItem(userKey);
|
||||
storageLocal().removeItem(userTokenKey);
|
||||
}
|
||||
|
||||
/** 格式化token（jwt格式） */
|
||||
@@ -47,37 +81,31 @@ export const formatToken = (token: string): string => {
|
||||
* @returns
|
||||
*/
|
||||
export function getTokenInfo(): {
|
||||
isRefresh: boolean;
|
||||
isExpire: boolean;
|
||||
accesstoken: string;
|
||||
refreshToken: string;
|
||||
} {
|
||||
const userStore = useUserStoreHook();
|
||||
const expires = userStore?.expires ?? 0;
|
||||
const now = Date.now();
|
||||
const diff = expires - now;
|
||||
const diff = expires - now / 1000;
|
||||
const accessToken = userStore?.accessToken ?? "";
|
||||
const refreshToken = userStore?.refreshToken ?? "";
|
||||
|
||||
if (diff > 0) {
|
||||
return {
|
||||
isRefresh: diff <= 1800000,
|
||||
isExpire: false,
|
||||
accesstoken: accessToken
|
||||
accesstoken: accessToken,
|
||||
refreshToken: refreshToken
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
isRefresh: true,
|
||||
isExpire: true,
|
||||
accesstoken: accessToken
|
||||
accesstoken: accessToken,
|
||||
refreshToken: refreshToken
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/** 是否有按钮级别的权限（根据登录接口返回的`permissions`字段进行判断）*/
|
||||
export const hasPerms = (value: string | Array<string>): boolean => {
|
||||
if (!value) return false;
|
||||
const allPerms = "*:*:*";
|
||||
const { permissions } = useUserStoreHook();
|
||||
if (!permissions) return false;
|
||||
if (permissions.length === 1 && permissions[0] === allPerms) return true;
|
||||
const isAuths = isString(value)
|
||||
? permissions.includes(value)
|
||||
: isIncludeAllChildren(value, permissions);
|
||||
return isAuths ? true : false;
|
||||
};
|
||||
|
||||
67
src/views/account-settings/components/AccountSafe.vue
Normal file
67
src/views/account-settings/components/AccountSafe.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { deviceDetection, hideTextAtIndex } from "@pureadmin/utils";
|
||||
import { useUserInfo } from "../utils/hooks";
|
||||
defineOptions({
|
||||
name: "AccountSafe"
|
||||
});
|
||||
|
||||
const { handleReset, handlePhone, handleEmail, userInfo } = useUserInfo();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'min-w-[180px]',
|
||||
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
|
||||
]"
|
||||
>
|
||||
<h3 class="my-8">账户安全</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<p>账号密码</p>
|
||||
<el-text class="mx-1" type="info" />
|
||||
</div>
|
||||
<el-button type="primary" text @click="handleReset(userInfo)"
|
||||
>修改</el-button
|
||||
>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<p>绑定号码</p>
|
||||
<el-text class="mx-1" type="info">
|
||||
已经绑定手机：{{
|
||||
hideTextAtIndex(userInfo.phone, { start: 3, end: 6 })
|
||||
}}
|
||||
</el-text>
|
||||
</div>
|
||||
<el-button type="primary" text @click="handlePhone(userInfo)"
|
||||
>修改</el-button
|
||||
>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<p>绑定邮箱</p>
|
||||
<el-text class="mx-1" type="info"
|
||||
>已绑定邮箱：{{
|
||||
hideTextAtIndex(userInfo.email, {
|
||||
start: 3,
|
||||
end: userInfo.email.indexOf("@") - 1
|
||||
})
|
||||
}}
|
||||
</el-text>
|
||||
</div>
|
||||
<el-button type="primary" text @click="handleEmail(userInfo)"
|
||||
>修改</el-button
|
||||
>
|
||||
</div>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-divider--horizontal {
|
||||
border-top: 0.1px var(--el-border-color) var(--el-border-style);
|
||||
}
|
||||
</style>
|
||||
163
src/views/account-settings/components/Profile.vue
Normal file
163
src/views/account-settings/components/Profile.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import ReCropperPreview from "@/components/ReCropperPreview";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import uploadLine from "@iconify-icons/ri/upload-line";
|
||||
import { postUploadAvatarAPI, putUpdateBaseUserInfoAPI } from "@/api/user";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { userInfoKey } from "@/utils/auth";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { useUserInfo } from "../utils/hooks";
|
||||
defineOptions({
|
||||
name: "Profile"
|
||||
});
|
||||
|
||||
const { userInfo, getUserInfo } = useUserInfo();
|
||||
const imgSrc = ref("");
|
||||
const cropperBlob = ref();
|
||||
const cropRef = ref();
|
||||
const uploadRef = ref();
|
||||
const isShow = ref(false);
|
||||
const userInfoFormRef = ref<FormInstance>();
|
||||
|
||||
const disabledDate = (time: Date) => {
|
||||
return time.getTime() > Date.now();
|
||||
};
|
||||
|
||||
const onChange = uploadFile => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
imgSrc.value = e.target.result as string;
|
||||
isShow.value = true;
|
||||
};
|
||||
reader.readAsDataURL(uploadFile.raw);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
cropRef.value.hidePopover();
|
||||
uploadRef.value.clearFiles();
|
||||
isShow.value = false;
|
||||
};
|
||||
|
||||
const onCropper = ({ blob }) => (cropperBlob.value = blob);
|
||||
|
||||
const handleSubmitImage = async () => {
|
||||
const res = await postUploadAvatarAPI(userInfo.id, {
|
||||
file: cropperBlob.value
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message("更新头像成功", { type: "success" });
|
||||
userInfo.avatar = `/file/${res.data.id}`;
|
||||
const user = storageLocal().getItem<object>(userInfoKey);
|
||||
storageLocal().setItem(userInfoKey, {
|
||||
...user,
|
||||
avatar: `/file/${res.data.id}`
|
||||
});
|
||||
useUserStoreHook().SET_AVATAR(`/file/${res.data.id}`);
|
||||
handleClose();
|
||||
} else {
|
||||
message("更新头像失败", { type: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
// 更新信息
|
||||
const onSubmit = async (formEl: FormInstance) => {
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
let updateForm = {
|
||||
name: userInfo.nickname,
|
||||
gender: userInfo.gender
|
||||
};
|
||||
const res = await putUpdateBaseUserInfoAPI(updateForm);
|
||||
if (res.code === 200) {
|
||||
message(res.msg, { type: "success" });
|
||||
await getUserInfo();
|
||||
} else {
|
||||
message(res.msg, { type: "error" });
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'min-w-[180px]',
|
||||
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
|
||||
]"
|
||||
>
|
||||
<h3 class="my-8">个人信息</h3>
|
||||
<el-form ref="userInfoFormRef" label-position="top" :model="userInfo">
|
||||
<el-form-item label="头像">
|
||||
<el-avatar :size="80" :src="userInfo.avatar" />
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
accept="image/*"
|
||||
action="#"
|
||||
:limit="1"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="onChange"
|
||||
>
|
||||
<el-button plain class="ml-4">
|
||||
<IconifyIconOffline :icon="uploadLine" />
|
||||
<span class="ml-2">更新头像</span>
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="账号" prop="userId">
|
||||
<el-input
|
||||
v-model="userInfo.username"
|
||||
placeholder="请输入账号~"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="姓名"
|
||||
prop="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户姓名~',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<el-input v-model="userInfo.nickname" placeholder="请输入姓名~" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-radio-group v-model="userInfo.gender" class="ml-4">
|
||||
<el-radio :value="1" size="default">男</el-radio>
|
||||
<el-radio :value="0" size="default">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="onSubmit(userInfoFormRef)">
|
||||
更新信息
|
||||
</el-button>
|
||||
</el-form>
|
||||
<el-dialog
|
||||
v-model="isShow"
|
||||
width="40%"
|
||||
title="编辑头像"
|
||||
destroy-on-close
|
||||
:closeOnClickModal="false"
|
||||
:before-close="handleClose"
|
||||
:fullscreen="deviceDetection()"
|
||||
>
|
||||
<ReCropperPreview ref="cropRef" :imgSrc="imgSrc" @cropper="onCropper" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button bg text @click="handleClose">取消</el-button>
|
||||
<el-button bg text type="primary" @click="handleSubmitImage">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
176
src/views/account-settings/index.vue
Normal file
176
src/views/account-settings/index.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, onBeforeMount, computed } from "vue";
|
||||
import { ReText } from "@/components/ReText";
|
||||
import Avatar from "@/assets/user.png";
|
||||
import Profile from "./components/Profile.vue";
|
||||
import AccountSafe from "./components/AccountSafe.vue";
|
||||
import { useGlobal, deviceDetection } from "@pureadmin/utils";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
|
||||
|
||||
import leftLine from "@iconify-icons/ri/arrow-left-s-line";
|
||||
import ProfileIcon from "@iconify-icons/ri/user-3-line";
|
||||
import AccountSafeIcon from "@iconify-icons/ri/profile-line";
|
||||
|
||||
defineOptions({
|
||||
name: "AccountSettings"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const isOpen = ref(deviceDetection() ? false : true);
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
onBeforeMount(() => {
|
||||
useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
|
||||
});
|
||||
|
||||
/** 用户名 */
|
||||
const username = computed(() => {
|
||||
return useUserStoreHook()?.username;
|
||||
});
|
||||
/** 用户头像 */
|
||||
const userAvatar = computed(() => {
|
||||
console.log(useUserStoreHook()?.avatar);
|
||||
if (useUserStoreHook()?.avatar) {
|
||||
return useUserStoreHook()?.avatar;
|
||||
} else {
|
||||
}
|
||||
return Avatar;
|
||||
});
|
||||
/**用户账号 */
|
||||
const nickname = computed(() => {
|
||||
return useUserStoreHook()?.nickname;
|
||||
});
|
||||
const panes = [
|
||||
{
|
||||
key: "profile",
|
||||
label: "个人信息",
|
||||
icon: ProfileIcon,
|
||||
component: Profile
|
||||
},
|
||||
{
|
||||
key: "accountSafe",
|
||||
label: "账户安全",
|
||||
icon: AccountSafeIcon,
|
||||
component: AccountSafe
|
||||
}
|
||||
];
|
||||
const witchPane = ref("profile");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="h-full">
|
||||
<el-aside
|
||||
v-if="isOpen"
|
||||
class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
|
||||
:width="deviceDetection() ? '180px' : '240px'"
|
||||
>
|
||||
<el-menu :default-active="witchPane" class="pure-account-settings-menu">
|
||||
<el-menu-item
|
||||
class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]"
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<IconifyIconOffline :icon="leftLine" />
|
||||
<span class="ml-2">返回</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<div class="flex items-center ml-8 mt-4 mb-4">
|
||||
<el-avatar :size="48" :src="userAvatar" />
|
||||
<div class="ml-4 flex flex-col max-w-[130px]">
|
||||
<ReText class="font-bold !self-baseline">
|
||||
{{ username }}
|
||||
</ReText>
|
||||
<ReText class="!self-baseline" type="info">
|
||||
{{ nickname }}
|
||||
</ReText>
|
||||
</div>
|
||||
</div>
|
||||
<el-menu-item
|
||||
v-for="item in panes"
|
||||
:key="item.key"
|
||||
:index="item.key"
|
||||
@click="
|
||||
() => {
|
||||
witchPane = item.key;
|
||||
if (deviceDetection()) {
|
||||
isOpen = !isOpen;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="flex items-center z-10">
|
||||
<el-icon><IconifyIconOffline :icon="item.icon" /></el-icon>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<LaySidebarTopCollapse
|
||||
v-if="deviceDetection()"
|
||||
class="px-0"
|
||||
:is-active="isOpen"
|
||||
@toggleClick="isOpen = !isOpen"
|
||||
/>
|
||||
<component
|
||||
:is="panes.find(item => item.key === witchPane).component"
|
||||
:class="[!deviceDetection() && 'ml-[120px]']"
|
||||
/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.pure-account-settings {
|
||||
background: var(--pure-theme-menu-bg) !important;
|
||||
}
|
||||
|
||||
.pure-account-settings-menu {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
.el-menu-item {
|
||||
height: 48px !important;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: transparent !important;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
inset: 0 8px;
|
||||
margin: 4px 0;
|
||||
clear: both;
|
||||
content: "";
|
||||
background: var(--el-color-primary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
body[layout] {
|
||||
.el-menu--vertical .is-active {
|
||||
color: #fff !important;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
src/views/account-settings/utils/hooks.tsx
Normal file
349
src/views/account-settings/utils/hooks.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
import { message } from "@/utils/message";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, watch } from "vue";
|
||||
import { ElForm, ElFormItem, ElInput, ElProgress } from "element-plus";
|
||||
import type { UserInfo } from "types/user";
|
||||
import { getUserInfoAPI } from "@/api/login";
|
||||
import {
|
||||
putUpdateEmailAPI,
|
||||
putUpdatePasswordAPI,
|
||||
putUpdatePhoneAPI
|
||||
} from "@/api/user";
|
||||
import { isAllEmpty, isEmail, isPhone, storageLocal } from "@pureadmin/utils";
|
||||
import { zxcvbn } from "@zxcvbn-ts/core";
|
||||
import { setUserInfo, userInfoKey } from "@/utils/auth";
|
||||
|
||||
export const useUserInfo = () => {
|
||||
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
|
||||
const REGEXP_PWD =
|
||||
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
|
||||
|
||||
const pwdProgress = [
|
||||
{ color: "#e74242", text: "非常弱" },
|
||||
{ color: "#EFBD47", text: "弱" },
|
||||
{ color: "#ffa500", text: "一般" },
|
||||
{ color: "#1bbf1b", text: "强" },
|
||||
{ color: "#008000", text: "非常强" }
|
||||
];
|
||||
// 当前密码强度（0-4）
|
||||
const curScore = ref();
|
||||
const ruleFormRef = ref();
|
||||
/**密码表单 */
|
||||
const passwordForm = reactive({
|
||||
oldPassword: "",
|
||||
newPassword: ""
|
||||
});
|
||||
/**联系方式表单 */
|
||||
const phoneForm = reactive({
|
||||
password: "",
|
||||
phone: ""
|
||||
});
|
||||
/**邮箱*/
|
||||
const emailForm = reactive({
|
||||
password: "",
|
||||
email: ""
|
||||
});
|
||||
const userInfo = reactive<UserInfo>({
|
||||
id: "",
|
||||
username: "",
|
||||
gender: 1,
|
||||
avatar: "",
|
||||
email: "",
|
||||
nickname: "",
|
||||
phone: "",
|
||||
status: 0,
|
||||
create_time: "",
|
||||
update_time: "",
|
||||
roles: [],
|
||||
permissions: []
|
||||
});
|
||||
/**获取个人信息 */
|
||||
const getUserInfo = async () => {
|
||||
const res = await getUserInfoAPI();
|
||||
if (res.success) {
|
||||
Object.assign(userInfo, res.data);
|
||||
const user = storageLocal().getItem<object>(userInfoKey);
|
||||
storageLocal().setItem(userInfoKey, {
|
||||
...user,
|
||||
avatar: res.data.avatar,
|
||||
nickname: res.data.nickname
|
||||
});
|
||||
setUserInfo(res.data);
|
||||
}
|
||||
};
|
||||
|
||||
/**组件挂载执行 */
|
||||
onMounted(async () => {
|
||||
await getUserInfo();
|
||||
});
|
||||
watch(
|
||||
passwordForm,
|
||||
({ newPassword }) =>
|
||||
(curScore.value = isAllEmpty(newPassword)
|
||||
? -1
|
||||
: zxcvbn(newPassword).score)
|
||||
);
|
||||
/**密码校验规则 */
|
||||
const passwordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入新密码~"));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(
|
||||
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合~")
|
||||
);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
/**手机好校验规则 */
|
||||
const phoneRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入手机号码~"));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式~"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
/**邮箱校验规则 */
|
||||
const emailRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入邮箱~"));
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式~"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
/** 重置密码 */
|
||||
const handleReset = (row: UserInfo) => {
|
||||
addDialog({
|
||||
title: `重置 ${row.username}--${row.nickname} 的密码`,
|
||||
width: "30%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => (
|
||||
<div>
|
||||
<ElForm ref={ruleFormRef} model={passwordForm}>
|
||||
<ElFormItem
|
||||
prop="oldPassword"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入旧密码~",
|
||||
trigger: "blur"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ElInput
|
||||
clearable
|
||||
show-password
|
||||
type="password"
|
||||
v-model={passwordForm.oldPassword}
|
||||
placeholder="请输入旧密码~"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="newPassword" rules={passwordRule}>
|
||||
<ElInput
|
||||
clearable
|
||||
show-password
|
||||
type="password"
|
||||
v-model={passwordForm.newPassword}
|
||||
placeholder="请输入新密码~"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="mt-4 flex">
|
||||
{pwdProgress.map(({ color, text }, idx) => (
|
||||
<div
|
||||
class="w-[19vw]"
|
||||
style={{ marginLeft: idx !== 0 ? "4px" : 0 }}
|
||||
>
|
||||
<ElProgress
|
||||
striped
|
||||
striped-flow
|
||||
duration={curScore.value === idx ? 6 : 0}
|
||||
percentage={curScore.value >= idx ? 100 : 0}
|
||||
color={color}
|
||||
stroke-width={10}
|
||||
show-text={false}
|
||||
/>
|
||||
<p
|
||||
class="text-center"
|
||||
style={{ color: curScore.value === idx ? color : "" }}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
closeCallBack: () => passwordForm,
|
||||
beforeSure: done => {
|
||||
ruleFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
const res = await putUpdatePasswordAPI(passwordForm);
|
||||
if (res.code === 200) {
|
||||
done();
|
||||
message(res.msg, {
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
message(res.msg, {
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**更新手机号 */
|
||||
const handlePhone = (row: UserInfo) => {
|
||||
phoneForm.phone = row.phone;
|
||||
addDialog({
|
||||
title: `更新 ${row.username}--${row.nickname} 的联系号码`,
|
||||
width: "30%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => (
|
||||
<div>
|
||||
<ElForm ref={ruleFormRef} model={phoneForm}>
|
||||
<ElFormItem
|
||||
prop="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入密码~",
|
||||
trigger: "blur"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ElInput
|
||||
clearable
|
||||
show-password
|
||||
type="password"
|
||||
v-model={phoneForm.password}
|
||||
placeholder="请输入密码~"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="phone" rules={phoneRule}>
|
||||
<ElInput
|
||||
clearable
|
||||
type="text"
|
||||
v-model={phoneForm.phone}
|
||||
placeholder="请输入手机号~"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
),
|
||||
closeCallBack: () => phoneForm,
|
||||
beforeSure: done => {
|
||||
ruleFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
const res = await putUpdatePhoneAPI(phoneForm);
|
||||
if (res.code === 200) {
|
||||
done();
|
||||
message(res.msg, {
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
message(res.msg, {
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
/**更新邮箱 */
|
||||
const handleEmail = (row: UserInfo) => {
|
||||
emailForm.email = row.email;
|
||||
addDialog({
|
||||
title: `更新 ${row.username}--${row.nickname} 的联系邮箱`,
|
||||
width: "30%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => (
|
||||
<div>
|
||||
<ElForm ref={ruleFormRef} model={emailForm}>
|
||||
<ElFormItem
|
||||
prop="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入密码~",
|
||||
trigger: "blur"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ElInput
|
||||
clearable
|
||||
show-password
|
||||
type="password"
|
||||
v-model={emailForm.password}
|
||||
placeholder="请输入密码~"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="email" rules={emailRule}>
|
||||
<ElInput
|
||||
clearable
|
||||
type="text"
|
||||
v-model={emailForm.email}
|
||||
placeholder="请输入联系邮箱~"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
),
|
||||
closeCallBack: () => emailForm,
|
||||
beforeSure: done => {
|
||||
ruleFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
const res = await putUpdateEmailAPI(emailForm);
|
||||
if (res.code === 200) {
|
||||
done();
|
||||
message(res.msg, {
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
message(res.msg, {
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
userInfo,
|
||||
getUserInfo,
|
||||
handleReset,
|
||||
handlePhone,
|
||||
handleEmail
|
||||
};
|
||||
};
|
||||
@@ -27,7 +27,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
if (valid) {
|
||||
// 模拟登录请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.pureLoginSuccess")), {
|
||||
message(transformI18n($t("login:LoginSuccess")), {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
@@ -51,7 +51,7 @@ function onBack() {
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
clearable
|
||||
:placeholder="t('login.purePhone')"
|
||||
:placeholder="t('login:Phone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -63,7 +63,7 @@ function onBack() {
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
:placeholder="t('login.pureSmsVerifyCode')"
|
||||
:placeholder="t('login:SmsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
@@ -73,8 +73,8 @@ function onBack() {
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.pureInfo")
|
||||
: t("login.pureGetVerifyCode")
|
||||
? text + t("login:Info")
|
||||
: t("login:GetVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@ function onBack() {
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.pureLogin") }}
|
||||
{{ t("login:Login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -98,7 +98,7 @@ function onBack() {
|
||||
<Motion :delay="200">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.pureBack") }}
|
||||
{{ t("login:Back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -9,11 +9,11 @@ const { t } = useI18n();
|
||||
|
||||
<template>
|
||||
<Motion class="-mt-2 -mb-2">
|
||||
<ReQrcode :text="t('login.pureTest')" />
|
||||
<ReQrcode :text="t('login:Test')" />
|
||||
</Motion>
|
||||
<Motion :delay="100">
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.pureTip") }}</p>
|
||||
<p class="text-gray-500 text-xs">{{ t("login:Tip") }}</p>
|
||||
</el-divider>
|
||||
</Motion>
|
||||
<Motion :delay="150">
|
||||
@@ -21,7 +21,7 @@ const { t } = useI18n();
|
||||
class="w-full mt-4"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
|
||||
>
|
||||
{{ t("login.pureBack") }}
|
||||
{{ t("login:Back") }}
|
||||
</el-button>
|
||||
</Motion>
|
||||
</template>
|
||||
|
||||
@@ -3,37 +3,70 @@ import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { registerRules } from "../utils/rule";
|
||||
import type { FormInstance, FormItemProp } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
import UserName from "@iconify-icons/ri/user-4-line";
|
||||
import Mail from "@iconify-icons/ri/mail-open-line";
|
||||
import { postGetCodeAPI, postRegisterAPI } from "@/api/login";
|
||||
|
||||
const { t } = useI18n();
|
||||
const checked = ref(false);
|
||||
const loading = ref(false);
|
||||
const timer = ref(null);
|
||||
const ruleForm = reactive({
|
||||
username: "",
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
gender: 1,
|
||||
email: "",
|
||||
nickname: "",
|
||||
department_id: "",
|
||||
code: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
/**当前选项 */
|
||||
const currentOption = ref<number>(1);
|
||||
/**
|
||||
* 点击返回
|
||||
*/
|
||||
const clickBack = () => {
|
||||
if (currentOption.value >= 1) {
|
||||
currentOption.value--;
|
||||
} else {
|
||||
currentOption.value = 1;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 点击下一步
|
||||
*/
|
||||
const clickNext = async () => {
|
||||
await ruleFormRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
if (currentOption.value <= 2) {
|
||||
currentOption.value++;
|
||||
} else {
|
||||
currentOption.value = 2;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(
|
||||
new Error(transformI18n($t("login.purePassWordDifferentReg")))
|
||||
);
|
||||
callback(new Error(transformI18n($t("login:PassWordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -45,19 +78,33 @@ const repeatPasswordRule = [
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate(valid => {
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
if (checked.value) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.pureRegisterSuccess")), {
|
||||
const res = await postRegisterAPI({
|
||||
username: ruleForm.username,
|
||||
password: ruleForm.password,
|
||||
gender: ruleForm.gender,
|
||||
email: ruleForm.email,
|
||||
nickname: ruleForm.nickname,
|
||||
phone: ruleForm.phone,
|
||||
code: ruleForm.code,
|
||||
department_id: ruleForm.department_id
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message(transformI18n($t("login:RegisterSuccess")), {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
} else {
|
||||
message(res.msg, {
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
message(transformI18n($t("login.pureTickPrivacy")), {
|
||||
message(transformI18n($t("login:TickPrivacy")), {
|
||||
type: "warning"
|
||||
});
|
||||
}
|
||||
@@ -66,9 +113,42 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const start = async (
|
||||
formEl: FormInstance | undefined,
|
||||
props: FormItemProp,
|
||||
time = 120
|
||||
) => {
|
||||
if (!formEl) return;
|
||||
const initTime = clone(time, true);
|
||||
await formEl.validateField(props, async isValid => {
|
||||
if (isValid) {
|
||||
const res = await postGetCodeAPI({
|
||||
username: ruleForm.username,
|
||||
title: "注册",
|
||||
mail: ruleForm.email
|
||||
});
|
||||
if (res.code === 200) {
|
||||
clearInterval(timer.value);
|
||||
isDisabled.value = true;
|
||||
text.value = `${time}`;
|
||||
timer.value = setInterval(() => {
|
||||
if (time > 0) {
|
||||
time -= 1;
|
||||
text.value = `${time}`;
|
||||
} else {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
time = initTime;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
message(res.msg, { type: "error" });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
@@ -77,15 +157,15 @@ function onBack() {
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
:rules="registerRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<Motion v-if="currentOption === 1">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.pureUsernameReg')),
|
||||
message: transformI18n($t('login:UsernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
@@ -94,101 +174,215 @@ function onBack() {
|
||||
<el-input
|
||||
v-model="ruleForm.username"
|
||||
clearable
|
||||
:placeholder="t('login.pureUsername')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
:placeholder="t('login:Username')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(UserName, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion v-if="currentOption === 1">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login:NicknameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="nickname"
|
||||
>
|
||||
<el-input
|
||||
v-model="ruleForm.nickname"
|
||||
clearable
|
||||
:placeholder="t('login:Nickname')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(User, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<Motion v-if="currentOption === 1" :delay="100">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
clearable
|
||||
:placeholder="t('login.purePhone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
:placeholder="t('login:Phone')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Iphone, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion v-if="currentOption === 2" :delay="100">
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="ruleForm.email"
|
||||
clearable
|
||||
:placeholder="t('login:Email')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Mail, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="verifyCode">
|
||||
<Motion v-if="currentOption === 2" :delay="150">
|
||||
<el-form-item prop="code">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
v-model="ruleForm.code"
|
||||
clearable
|
||||
:placeholder="t('login.pureSmsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
:placeholder="t('login:EmailVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
@click="start(ruleFormRef, 'email')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.pureInfo")
|
||||
: t("login.pureGetVerifyCode")
|
||||
? text + t("login:Info")
|
||||
: t("login:GetVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<Motion v-if="currentOption === 2" :delay="200">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="ruleForm.password"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.purePassword')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
:placeholder="t('login:Password')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Lock, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<Motion v-if="currentOption === 2" :delay="250">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
v-model="ruleForm.repeatPassword"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.pureSure')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
:placeholder="t('login:Sure')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Lock, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion v-if="currentOption === 1" :delay="100">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-radio-group v-model="ruleForm.gender" class="ml-4">
|
||||
<el-radio :value="1" size="default">男</el-radio>
|
||||
<el-radio :value="0" size="default">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.pureReadAccept") }}
|
||||
{{ t("login:ReadAccept") }}
|
||||
</el-checkbox>
|
||||
<el-button link type="primary">
|
||||
{{ t("login.purePrivacyPolicy") }}
|
||||
{{ t("login:PrivacyPolicy") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="350">
|
||||
<Motion v-if="currentOption !== 1" :delay="350">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.pureDefinite") }}
|
||||
</el-button>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button
|
||||
class="w-[75%]"
|
||||
size="default"
|
||||
round
|
||||
:loading="loading"
|
||||
@click="clickBack"
|
||||
>
|
||||
{{ t("login:Laststep") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion v-if="currentOption !== 2" :delay="350">
|
||||
<el-form-item>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button
|
||||
class="w-[75%]"
|
||||
size="default"
|
||||
type="primary"
|
||||
round
|
||||
:loading="loading"
|
||||
@click="clickNext"
|
||||
>
|
||||
{{ t("login:Nextstep") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion v-if="currentOption === 2" :delay="350">
|
||||
<el-form-item>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button
|
||||
class="w-[75%]"
|
||||
size="default"
|
||||
type="primary"
|
||||
round
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login:Register") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="400">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.pureBack") }}
|
||||
</el-button>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button class="w-[75%]" round size="default" @click="onBack">
|
||||
{{ t("login:Back") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
@@ -4,19 +4,24 @@ import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import type { FormInstance, FormItemProp } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { postGetCodeAPI, postResetPasswordAPI } from "@/api/login";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import UserName from "@iconify-icons/ri/user-4-line";
|
||||
import Mail from "@iconify-icons/ri/mail-open-line";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const timer = ref(null);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
username: "",
|
||||
email: "",
|
||||
code: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
@@ -26,11 +31,9 @@ const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(
|
||||
new Error(transformI18n($t("login.purePassWordDifferentReg")))
|
||||
);
|
||||
callback(new Error(transformI18n($t("login:PassWordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -42,23 +45,67 @@ const repeatPasswordRule = [
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate(valid => {
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.purePassWordUpdateReg")), {
|
||||
const res = await postResetPasswordAPI({
|
||||
username: ruleForm.username,
|
||||
password: ruleForm.password,
|
||||
code: ruleForm.code,
|
||||
mail: ruleForm.email
|
||||
});
|
||||
if (res.success) {
|
||||
message(res.msg, {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
} else {
|
||||
message(res.msg, {
|
||||
type: "error"
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const start = async (
|
||||
formEl: FormInstance | undefined,
|
||||
props: FormItemProp,
|
||||
time = 120
|
||||
) => {
|
||||
if (!formEl) return;
|
||||
const initTime = clone(time, true);
|
||||
await formEl.validateField(props, async isValid => {
|
||||
if (isValid) {
|
||||
const res = await postGetCodeAPI({
|
||||
username: ruleForm.username,
|
||||
title: "重置",
|
||||
mail: ruleForm.email
|
||||
});
|
||||
if (res.code === 200) {
|
||||
clearInterval(timer.value);
|
||||
isDisabled.value = true;
|
||||
text.value = `${time}`;
|
||||
timer.value = setInterval(() => {
|
||||
if (time > 0) {
|
||||
time -= 1;
|
||||
text.value = `${time}`;
|
||||
} else {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
time = initTime;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
message(res.msg, { type: "error" });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
@@ -71,34 +118,70 @@ function onBack() {
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login:UsernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
v-model="ruleForm.username"
|
||||
clearable
|
||||
:placeholder="t('login.purePhone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
:placeholder="t('login:Username')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(UserName, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="ruleForm.email"
|
||||
clearable
|
||||
:placeholder="t('login:Email')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Mail, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="code">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
v-model="ruleForm.code"
|
||||
clearable
|
||||
:placeholder="t('login.pureSmsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
:placeholder="t('login:EmailVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
@click="start(ruleFormRef, 'email')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.pureInfo")
|
||||
: t("login.pureGetVerifyCode")
|
||||
? text + t("login:Info")
|
||||
: t("login:GetVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -111,8 +194,14 @@ function onBack() {
|
||||
v-model="ruleForm.password"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.purePassword')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
:placeholder="t('login:Password')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Lock, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -123,31 +212,42 @@ function onBack() {
|
||||
v-model="ruleForm.repeatPassword"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.pureSure')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
:placeholder="t('login:Sure')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Lock, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.pureDefinite") }}
|
||||
</el-button>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button
|
||||
class="w-[75%]"
|
||||
size="default"
|
||||
type="primary"
|
||||
round
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login:Definite") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.pureBack") }}
|
||||
</el-button>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button class="w-[75%]" size="default" round @click="onBack">
|
||||
{{ t("login:Back") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
@@ -31,7 +31,9 @@ import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
import Info from "@iconify-icons/ri/information-line";
|
||||
import { GetCaptchaAPI } from "@/api/user";
|
||||
import { GetCaptchaAPI } from "@/api/login";
|
||||
import { getUserInfoAPI } from "@/api/login";
|
||||
import { setUserInfo } from "@/utils/auth";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
@@ -79,17 +81,21 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
if (res.code === 200) {
|
||||
useUserStoreHook().SET_ACCESSTOKEN(res.data.accessToken);
|
||||
// 获取后端路由
|
||||
return initRouter().then(() => {
|
||||
return initRouter().then(async () => {
|
||||
disabled.value = true;
|
||||
const res = await getUserInfoAPI();
|
||||
if (res.success) {
|
||||
setUserInfo(res.data);
|
||||
}
|
||||
router
|
||||
.push(getTopMenu(true).path)
|
||||
.then(() => {
|
||||
message(t("login.pureLoginSuccess"), { type: "success" });
|
||||
message(t("login:LoginSuccess"), { type: "success" });
|
||||
})
|
||||
.finally(() => (disabled.value = false));
|
||||
});
|
||||
} else {
|
||||
message(t("login.pureLoginFail"), { type: "error" });
|
||||
message(t("login:LoginFail"), { type: "error" });
|
||||
await getImgCode();
|
||||
}
|
||||
})
|
||||
@@ -107,9 +113,9 @@ const immediateDebounce: any = debounce(
|
||||
/**获取验证码 */
|
||||
const getImgCode = async () => {
|
||||
const res = await GetCaptchaAPI();
|
||||
if (res.code === 200) {
|
||||
imgCode.value = res.data.image;
|
||||
imgId.value = res.data.captchaId;
|
||||
if (res.success) {
|
||||
imgCode.value = res.data.captcha;
|
||||
imgId.value = res.data.uuid;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -122,9 +128,6 @@ useEventListener(document, "keydown", ({ code }) => {
|
||||
immediateDebounce(ruleFormRef.value);
|
||||
});
|
||||
|
||||
// watch(imgCode, value => {
|
||||
// useUserStoreHook().SET_VERIFYCODE(value);
|
||||
// });
|
||||
watch(checked, bool => {
|
||||
useUserStoreHook().SET_ISREMEMBERED(bool);
|
||||
});
|
||||
@@ -208,7 +211,7 @@ onMounted(async () => {
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.pureUsernameReg')),
|
||||
message: transformI18n($t('login:UsernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
@@ -217,7 +220,7 @@ onMounted(async () => {
|
||||
<el-input
|
||||
v-model="ruleForm.username"
|
||||
clearable
|
||||
:placeholder="t('login.pureUsername')"
|
||||
:placeholder="t('login:Username')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -229,7 +232,7 @@ onMounted(async () => {
|
||||
v-model="ruleForm.password"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.purePassword')"
|
||||
:placeholder="t('login:Password')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -240,7 +243,7 @@ onMounted(async () => {
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
:placeholder="t('login.pureVerifyCode')"
|
||||
:placeholder="t('login:VerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
>
|
||||
<template v-slot:append>
|
||||
@@ -273,10 +276,10 @@ onMounted(async () => {
|
||||
<option value="7">7</option>
|
||||
<option value="30">30</option>
|
||||
</select>
|
||||
{{ t("login.pureRemember") }}
|
||||
{{ t("login:Remember") }}
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: t('login.pureRememberInfo'),
|
||||
content: t('login:RememberInfo'),
|
||||
placement: 'top'
|
||||
}"
|
||||
:icon="Info"
|
||||
@@ -289,7 +292,7 @@ onMounted(async () => {
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
>
|
||||
{{ t("login.pureForget") }}
|
||||
{{ t("login:Forget") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
@@ -300,7 +303,7 @@ onMounted(async () => {
|
||||
:disabled="disabled"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.pureLogin") }}
|
||||
{{ t("login:Login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -2,31 +2,31 @@ import { $t } from "@/plugins/i18n";
|
||||
|
||||
const operates = [
|
||||
{
|
||||
title: $t("login.purePhoneLogin")
|
||||
title: $t("login:PhoneLogin")
|
||||
},
|
||||
{
|
||||
title: $t("login.pureQRCodeLogin")
|
||||
title: $t("login:QRCodeLogin")
|
||||
},
|
||||
{
|
||||
title: $t("login.pureRegister")
|
||||
title: $t("login:Register")
|
||||
}
|
||||
];
|
||||
|
||||
const thirdParty = [
|
||||
{
|
||||
title: $t("login.pureWeChatLogin"),
|
||||
title: $t("login:WeChatLogin"),
|
||||
icon: "wechat"
|
||||
},
|
||||
{
|
||||
title: $t("login.pureAlipayLogin"),
|
||||
title: $t("login:AlipayLogin"),
|
||||
icon: "alipay"
|
||||
},
|
||||
{
|
||||
title: $t("login.pureQQLogin"),
|
||||
title: $t("login:QQLogin"),
|
||||
icon: "qq"
|
||||
},
|
||||
{
|
||||
title: $t("login.pureWeiBoLogin"),
|
||||
title: $t("login:WeiBoLogin"),
|
||||
icon: "weibo"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -16,9 +16,9 @@ const loginRules = reactive<FormRules>({
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePassWordReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -30,7 +30,7 @@ const loginRules = reactive<FormRules>({
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
|
||||
callback(new Error(transformI18n($t("login:VerifyCodeReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -46,9 +46,9 @@ const phoneRules = reactive<FormRules>({
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePhoneReg"))));
|
||||
callback(new Error(transformI18n($t("login:PhoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login.purePhoneCorrectReg"))));
|
||||
callback(new Error(transformI18n($t("login:PhoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -60,9 +60,9 @@ const phoneRules = reactive<FormRules>({
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
|
||||
callback(new Error(transformI18n($t("login:VerifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.pureVerifyCodeSixReg"))));
|
||||
callback(new Error(transformI18n($t("login:VerifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -74,27 +74,22 @@ const phoneRules = reactive<FormRules>({
|
||||
|
||||
/** 忘记密码校验 */
|
||||
const updateRules = reactive<FormRules>({
|
||||
phone: [
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePhoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login.purePhoneCorrectReg"))));
|
||||
callback(new Error(transformI18n($t("login:EmailReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
code: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.pureVerifyCodeSixReg"))));
|
||||
callback(new Error(transformI18n($t("login:VerifyCodeReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -106,9 +101,9 @@ const updateRules = reactive<FormRules>({
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePassWordReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -118,4 +113,81 @@ const updateRules = reactive<FormRules>({
|
||||
]
|
||||
});
|
||||
|
||||
export { loginRules, phoneRules, updateRules };
|
||||
/** 注册账号校验 */
|
||||
const registerRules = reactive<FormRules>({
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login:PhoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login:PhoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login:VerifyCodeReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login:PassWordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(new Error(transformI18n($t("login:PassWordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
username: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login:UsernameReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login:NicknameReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login:EmailReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export { loginRules, phoneRules, updateRules, registerRules };
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { hasAuth, getAuths } from "@/router/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButtonRouter"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">当前拥有的code列表：{{ getAuths() }}</p>
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<Auth value="permission:btn:add">
|
||||
<el-button plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
<Auth :value="['permission:btn:edit']">
|
||||
<el-button plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
<Auth
|
||||
:value="[
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
]"
|
||||
>
|
||||
<el-button plain type="danger">
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">函数方式判断权限</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button v-if="hasAuth('permission:btn:add')" plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-if="hasAuth(['permission:btn:edit'])" plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="
|
||||
hasAuth([
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
])
|
||||
"
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
指令方式判断权限（该方式不能动态修改权限）
|
||||
</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button v-auth="'permission:btn:add'" plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-auth="['permission:btn:edit']" plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth="[
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
]"
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,109 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { hasPerms } from "@/utils/auth";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
const { permissions } = useUserStoreHook();
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButtonLogin"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
|
||||
<p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
|
||||
*:*:* 代表拥有全部按钮级别权限
|
||||
</p>
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<Perms value="permission:btn:add">
|
||||
<el-button plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
</Perms>
|
||||
<Perms :value="['permission:btn:edit']">
|
||||
<el-button plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
</Perms>
|
||||
<Perms
|
||||
:value="[
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
]"
|
||||
>
|
||||
<el-button plain type="danger">
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</Perms>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">函数方式判断权限</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="hasPerms(['permission:btn:edit'])"
|
||||
plain
|
||||
type="primary"
|
||||
>
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="
|
||||
hasPerms([
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
])
|
||||
"
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
指令方式判断权限（该方式不能动态修改权限）
|
||||
</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button v-perms="'permission:btn:add'" plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-perms="['permission:btn:edit']" plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="[
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
]"
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,66 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { initRouter } from "@/router/utils";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { type CSSProperties, ref, computed } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionPage"
|
||||
});
|
||||
|
||||
const elStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "85vw",
|
||||
justifyContent: "start"
|
||||
};
|
||||
});
|
||||
|
||||
const username = ref(useUserStoreHook()?.username);
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: "admin",
|
||||
label: "管理员角色"
|
||||
},
|
||||
{
|
||||
value: "common",
|
||||
label: "普通角色"
|
||||
}
|
||||
];
|
||||
|
||||
function onChange() {
|
||||
useUserStoreHook()
|
||||
.loginByUsername({ username: username.value, password: "admin123" })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
storageLocal().removeItem("async-routes");
|
||||
usePermissionStoreHook().clearAllCachePage();
|
||||
initRouter();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">
|
||||
模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
|
||||
</p>
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>当前角色：{{ username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-select v-model="username" class="!w-[160px]" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -5,5 +5,5 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Pure-Admin-Thin（国际化版本）</h1>
|
||||
<h1>首页</h1>
|
||||
</template>
|
||||
|
||||
29
types/file.d.ts
vendored
Normal file
29
types/file.d.ts
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
/** 文件信息类型 */
|
||||
export type FileInfo = {
|
||||
/** 文件ID */
|
||||
id: string;
|
||||
/** 文件名称 */
|
||||
name: string;
|
||||
/** 文件大小（单位：字节） */
|
||||
size: number;
|
||||
/** 文件类型（MIME 类型） */
|
||||
file_type: string;
|
||||
/** 文件绝对路径 */
|
||||
absolute_path: string;
|
||||
/** 文件相对路径 */
|
||||
relative_path: string;
|
||||
/** 上传者ID */
|
||||
uploader_id: string;
|
||||
/** 上传者用户名 */
|
||||
uploader_username: string;
|
||||
/** 上传者昵称 */
|
||||
uploader_nickname: string;
|
||||
/** 上传者部门ID */
|
||||
uploader_department_id: string;
|
||||
/** 上传者部门名称 */
|
||||
uploader_department_name: string;
|
||||
/** 更新时间 */
|
||||
update_time: string;
|
||||
/** 创建时间 */
|
||||
create_time: string;
|
||||
};
|
||||
4
types/global.d.ts
vendored
4
types/global.d.ts
vendored
@@ -197,6 +197,10 @@ declare global {
|
||||
code: number;
|
||||
/**操作信息 */
|
||||
msg: string;
|
||||
/**执行时间 */
|
||||
time: string;
|
||||
/**执行状态 */
|
||||
success: boolean;
|
||||
/**响应结果 */
|
||||
data: T;
|
||||
}
|
||||
|
||||
4
types/router.d.ts
vendored
4
types/router.d.ts
vendored
@@ -22,10 +22,8 @@ declare global {
|
||||
showLink?: boolean;
|
||||
/** 是否显示父级菜单 `可选` */
|
||||
showParent?: boolean;
|
||||
/** 页面级别权限设置 `可选` */
|
||||
roles?: Array<string>;
|
||||
/** 按钮级别权限设置 `可选` */
|
||||
auths?: Array<string>;
|
||||
permissions?: Array<string>;
|
||||
/** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
|
||||
keepAlive?: boolean;
|
||||
/** 内嵌的`iframe`链接 `可选` */
|
||||
|
||||
27
types/user.d.ts
vendored
Normal file
27
types/user.d.ts
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
/**用户信息类型 */
|
||||
export type UserInfo = {
|
||||
/**用户名 */
|
||||
username: string;
|
||||
/**用户昵称 */
|
||||
nickname: string;
|
||||
/**用户状态 */
|
||||
status: number;
|
||||
/**用户性别 */
|
||||
gender: number;
|
||||
/**用户头像 */
|
||||
avatar: string;
|
||||
/**用户数据库ID */
|
||||
id: string;
|
||||
/**用户邮箱 */
|
||||
email: string;
|
||||
/**用户手机号 */
|
||||
phone: string;
|
||||
/**创建时间 */
|
||||
create_time: string;
|
||||
/**修改时间 */
|
||||
update_time: string;
|
||||
/** 角色列表 */
|
||||
roles: string[];
|
||||
/** 权限列表 */
|
||||
permissions: string[];
|
||||
};
|
||||
@@ -27,7 +27,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
|
||||
proxy: {
|
||||
"/api": {
|
||||
// 这里填写后端地址
|
||||
target: "http://localhost:8080",
|
||||
target: "http://localhost:9090",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, "")
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user