mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-06 09:16:39 +08:00
feat: 增加扫码登录功能
This commit is contained in:
Gsh
@@ -1,24 +1,338 @@
|
||||
<script lang="ts" setup>
|
||||
interface User {
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
import { Camera, Edit, SuccessFilled } from '@element-plus/icons-vue';
|
||||
import { format } from 'date-fns';
|
||||
import { computed, ref } from 'vue';
|
||||
import QrCodeLogin from '@/components/LoginDialog/components/QrCodeLogin/index.vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { getUserProfilePicture, WECHAT_QRCODE_TYPE } from '@/utils/user.ts';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const user = computed(() => userStore.userInfo.user || {});
|
||||
const wechatDialogVisible = ref(false);
|
||||
|
||||
// 计算属性
|
||||
const userIcon = computed(() => {
|
||||
return getUserProfilePicture() || `https://your-cdn.com/${user.value.icon}`;
|
||||
});
|
||||
|
||||
const userNick = computed(() => {
|
||||
return user.value.nick || user.value.userName || '未知用户';
|
||||
});
|
||||
// 是否绑定了微信
|
||||
const isWechatBound = computed(() => {
|
||||
return userStore.userInfo.isBindFuwuhao || false;
|
||||
});
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateString: string | null) {
|
||||
if (!dateString)
|
||||
return '-';
|
||||
try {
|
||||
return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
|
||||
}
|
||||
catch {
|
||||
return dateString;
|
||||
}
|
||||
}
|
||||
|
||||
const users: User[] = [
|
||||
{ name: '张三', email: 'zhangsan@example.com', role: '管理员' },
|
||||
{ name: '李四', email: 'lisi@example.com', role: '编辑' },
|
||||
{ name: '王五', email: 'wangwu@example.com', role: '查看者' },
|
||||
];
|
||||
// 性别显示
|
||||
function getSexText(sex: string | null) {
|
||||
const sexMap: Record<string, string> = {
|
||||
Male: '男',
|
||||
Female: '女',
|
||||
Unknown: '未知',
|
||||
};
|
||||
return sexMap[sex || 'Unknown'] || '未知';
|
||||
}
|
||||
|
||||
function getSexTagType(sex: string | null) {
|
||||
const typeMap: Record<string, string> = {
|
||||
Male: 'primary',
|
||||
Female: 'danger',
|
||||
Unknown: 'info',
|
||||
};
|
||||
return typeMap[sex || 'Unknown'] || 'info';
|
||||
}
|
||||
|
||||
// 敏感信息脱敏
|
||||
function maskEmail(email: string) {
|
||||
if (!email)
|
||||
return '';
|
||||
const [name, domain] = email.split('@');
|
||||
if (name.length <= 2)
|
||||
return email;
|
||||
return `${name.substring(0, 2)}****@${domain}`;
|
||||
}
|
||||
|
||||
function maskPhone(phone: string) {
|
||||
if (!phone)
|
||||
return '';
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
||||
}
|
||||
|
||||
// 操作处理
|
||||
function handleEdit() {
|
||||
ElMessage.info('编辑功能开发中');
|
||||
}
|
||||
|
||||
function changeAvatar() {
|
||||
ElMessage.info('更换头像功能开发中');
|
||||
}
|
||||
|
||||
function handleWechatBind() {
|
||||
wechatDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 微信绑定成功
|
||||
function bindWechat() {
|
||||
wechatDialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-management">
|
||||
<h3>用户管理</h3>
|
||||
<el-table :data="users" style="width: 100%">
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="email" label="邮箱" />
|
||||
<el-table-column prop="role" label="角色" />
|
||||
</el-table>
|
||||
<div class="user-profile">
|
||||
<el-card class="profile-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>个人信息</h3>
|
||||
<el-button v-if="false" type="primary" size="small" @click="handleEdit">
|
||||
<el-icon><Edit /></el-icon>
|
||||
编辑信息
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="profile-content">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar-section">
|
||||
<el-avatar :size="100" :src="userIcon" class="user-avatar">
|
||||
{{ userNick.charAt(0) }}
|
||||
</el-avatar>
|
||||
<div v-if="false" class="avatar-actions">
|
||||
<el-button size="small" @click="changeAvatar">
|
||||
<el-icon><Camera /></el-icon>
|
||||
更换头像
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="info-section">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="用户名">
|
||||
{{ user.userName || '-' }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="昵称">
|
||||
{{ userNick }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="性别">
|
||||
<el-tag :type="getSexTagType(user.sex)">
|
||||
{{ getSexText(user.sex) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="注册时间">
|
||||
{{ formatDate(user.creationTime) }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="邮箱">
|
||||
<span v-if="user.email">
|
||||
{{ maskEmail(user.email) }}
|
||||
<el-tooltip content="已验证" placement="top">
|
||||
<el-icon color="#67C23A"><SuccessFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-else class="unset-text">未设置</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="手机号">
|
||||
<span v-if="user.phone">
|
||||
{{ maskPhone(user.phone) }}
|
||||
</span>
|
||||
<span v-else class="unset-text">未设置</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="微信绑定">
|
||||
<div class="wechat-binding">
|
||||
<span v-if="isWechatBound">
|
||||
<el-icon color="#07C160"><SuccessFilled /></el-icon>
|
||||
已绑定
|
||||
<!-- <span class="wechat-id">({{ maskWechat(wechatInfo) }})</span> -->
|
||||
</span>
|
||||
<span v-else class="unset-text">
|
||||
未绑定
|
||||
</span>
|
||||
<el-button
|
||||
v-if="!isWechatBound"
|
||||
type="text"
|
||||
size="small"
|
||||
class="bind-btn"
|
||||
@click="handleWechatBind"
|
||||
>
|
||||
绑定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="个人简介">
|
||||
<span v-if="user.introduction">
|
||||
{{ user.introduction }}
|
||||
</span>
|
||||
<span v-else class="unset-text">暂无简介</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 微信绑定对话框 -->
|
||||
<el-dialog
|
||||
v-model="wechatDialogVisible"
|
||||
title="微信绑定"
|
||||
width="400px"
|
||||
>
|
||||
<div class="wechat-dialog">
|
||||
<QrCodeLogin :type="WECHAT_QRCODE_TYPE.Bind" @bind-wechat="bindWechat()" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="wechatDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="wechatDialogVisible = false"
|
||||
>
|
||||
关闭
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-profile {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
margin-bottom: 15px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.avatar-actions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__body) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__label) {
|
||||
font-weight: 600;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.unset-text {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wechat-binding {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wechat-id {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.bind-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.wechat-dialog {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qrcode-section {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.qrcode-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.qrcode-placeholder .el-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wechat-tip {
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.wechat-info {
|
||||
color: #07C160;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-content {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user
