GoCo/OL-LearnPlatform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 教师端个人中心页面修改重构

Browse Source
This commit is contained in:
yuk255 2025-09-26 18:15:45 +08:00
parent d5346675ae
commit a5bb4de1fe
1 changed files with 341 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

567
src/components/admin/PersonalCenter.vue
View File

@ -1,263 +1,378 @@
<template>
<div class="personal-center">
<!-- Tabs -->
<div class="tabs">
<div class="tab" :class="{ active: activeTab === 'base' }" @click="activeTab = 'base'">基础信息</div>
<div class="tab" :class="{ active: activeTab === 'password' }" @click="activeTab = 'password'">密码修改</div>
</div>
<div class="personal-center">
<!-- Tabs -->
<n-tabs v-model:value="activeTab" type="line">
<n-tab-pane name="base" tab="基础信息">
<!-- 基础信息内容 -->
<n-card title="基础信息" :bordered="false">
<n-form
:model="formData"
label-placement="left"
label-width="80px"
:disabled="!isEditing"
>
<n-form-item label="头像">
<div class="avatar-container">
<div class="avatar-wrapper">
<n-avatar
round
:size="80"
:src="avatar"
@click.stop="previewAvatar"
>
<template #fallback>
<div class="avatar-fallback">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
>
<circle
cx="12"
cy="8"
r="3"
stroke="#999"
stroke-width="1.5"
fill="none"
/>
<path
d="M6 20c0-4 3-6 6-6s6 2 6 6"
stroke="#999"
stroke-width="1.5"
fill="none"
/>
</svg>
</div>
</template>
</n-avatar>
<div v-if="avatar" class="avatar-preview-hint">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="white"
>
<circle
cx="12"
cy="12"
r="3"
stroke="white"
stroke-width="2"
fill="none"
/>
<path
d="M12 1v6m0 10v6m11-7h-6m-10 0H1"
stroke="white"
stroke-width="2"
/>
</svg>
</div>
<n-button
v-if="isEditing"
circle
size="small"
class="avatar-edit-btn"
@click.stop="triggerUpload"
title="更换头像"
>
<template #icon>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</template>
</n-button>
</div>
</div>
<input
ref="fileInput"
type="file"
accept="image/*"
@change="handleFileChange"
style="display: none"
/>
</n-form-item>
<n-form-item label="姓名">
<n-input v-model:value="formData.name" placeholder="请输入姓名" />
</n-form-item>
<n-form-item label="自我介绍">
<n-input
v-model:value="formData.intro"
type="textarea"
:rows="4"
placeholder="请输入自我介绍"
/>
</n-form-item>
<n-form-item>
<n-space>
<n-button type="primary" @click="startEdit" v-if="!isEditing">
编辑资料
</n-button>
<n-button type="primary" @click="save" v-if="isEditing">
保存
</n-button>
<n-button @click="cancelEdit" v-if="isEditing"> 取消 </n-button>
</n-space>
</n-form-item>
</n-form>
</n-card>
</n-tab-pane>
<!-- Card: 基础信息 -->
<div v-if="activeTab === 'base'" class="card">
<div class="card-title">基础信息</div>
<div class="form">
<div class="form-row stack">
<label class="label">姓名：</label>
<input class="input" type="text" v-model="name" :disabled="!isEditing" />
</div>
<div class="form-row align-start stack">
<label class="label">自我介绍：</label>
<textarea class="textarea" v-model="intro" :disabled="!isEditing" rows="4"></textarea>
</div>
<div class="actions">
<button class="btn primary" @click="startEdit">编辑资料</button>
<button class="btn primary" @click="save">保存</button>
</div>
</div>
</div>
<n-tab-pane name="password" tab="密码修改">
<!-- 密码修改内容 -->
<n-card title="密码修改" :bordered="false">
<n-form
:model="passwordForm"
label-placement="left"
label-width="80px"
>
<n-form-item label="帐号">
<n-input v-model:value="passwordForm.account" disabled />
</n-form-item>
<n-form-item label="原密码">
<n-input
v-model:value="passwordForm.oldPassword"
type="password"
placeholder="请输入原密码"
show-password-on="click"
/>
</n-form-item>
<n-form-item label="新密码">
<n-input
v-model:value="passwordForm.newPassword"
type="password"
placeholder="请输入新密码"
show-password-on="click"
/>
</n-form-item>
<n-form-item label="确认密码">
<n-input
v-model:value="passwordForm.confirmPassword"
type="password"
placeholder="请确认密码"
show-password-on="click"
/>
</n-form-item>
<n-form-item>
<n-button type="primary" @click="savePassword"> 保存 </n-button>
</n-form-item>
</n-form>
</n-card>
</n-tab-pane>
</n-tabs>
<!-- Card: 密码修改 -->
<div v-else class="card">
<div class="card-title">密码修改</div>
<div class="p-form">
<div class="p-row stack">
<label class="p-label">帐号：</label>
<input class="p-input p-input-wide" type="text" v-model="account" disabled />
</div>
<div class="p-row stack">
<label class="p-label">原密码：</label>
<input class="p-input p-input-wide" type="password" v-model="oldPassword" placeholder="请输入原密码" />
</div>
<div class="p-row stack">
<label class="p-label">新密码：</label>
<input class="p-input p-input-wide" type="password" v-model="newPassword" placeholder="请输入新密码" />
</div>
<div class="p-row stack">
<label class="p-label">确认密码：</label>
<input class="p-input p-input-wide" type="password" v-model="confirmPassword" placeholder="请确认密码" />
</div>
<div class="p-actions">
<button class="btn primary" @click="savePassword">保存</button>
</div>
</div>
<!-- 头像预览弹窗 -->
<n-modal v-model:show="showPreview" @mask-click="closePreview">
<n-card
style="width: 600px"
title="头像预览"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<template #header-extra>
<n-button quaternary circle @click="closePreview">
<template #icon>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</template>
</n-button>
</template>
<div style="text-align: center">
<img
:src="avatar"
alt="头像预览"
style="max-width: 100%; max-height: 400px; border-radius: 8px"
/>
</div>
</div>
</n-card>
</n-modal>
</div>
</template>
<script setup lang="ts">
// @ts-nocheck
import { ref } from 'vue'
import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/user";
const isEditing = ref(false)
const activeTab = ref<'base' | 'password'>('base')
const name = ref('张成学')
const intro = ref(
'复旦大学经济学院教师，长期从事西方经济学的教学，主要讲授经济学原理、微观经济学、宏观经济学、管理经济学等基础课程，参与的“宏观经济学课程”被评为上海市精品课程与国家级精品课程'
)
interface FormData {
name: string;
intro: string;
}
interface PasswordForm {
account: string;
oldPassword: string;
newPassword: string;
confirmPassword: string;
}
const userStore = useUserStore();
const isEditing = ref(false);
const activeTab = ref<"base" | "password">("base");
// 基础信息表单
const formData = reactive<FormData>({
name: userStore.user?.profile?.realName || "",
intro: userStore.user?.profile?.bio || "",
});
// 头像相关
const avatar = ref<string>(userStore.user?.avatar || "");
const fileInput = ref<HTMLInputElement | null>(null);
const showPreview = ref(false);
// 密码修改表单
const account = ref('16568855622')
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const passwordForm = reactive<PasswordForm>({
account: userStore.user?.username || "",
oldPassword: "",
newPassword: "",
confirmPassword: "",
});
function startEdit() {
isEditing.value = true
isEditing.value = true;
}
function save() {
// 可在此接入后端提交逻辑
isEditing.value = false
// 可在此接入后端提交逻辑
isEditing.value = false;
}
function cancelEdit() {
// 恢复原始数据
formData.name = userStore.user?.profile?.realName || "";
formData.intro = userStore.user?.profile?.bio || "";
isEditing.value = false;
}
function savePassword() {
if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
return
}
if (newPassword.value !== confirmPassword.value) {
return
}
// 对接后端修改密码接口
if (
!passwordForm.oldPassword ||
!passwordForm.newPassword ||
!passwordForm.confirmPassword
) {
return;
}
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
return;
}
// 对接后端修改密码接口
}
// 头像相关方法
function previewAvatar() {
if (avatar.value) {
showPreview.value = true;
}
}
function closePreview() {
showPreview.value = false;
}
function triggerUpload() {
if (!isEditing.value) return;
fileInput.value?.click();
}
function handleFileChange(event: Event) {
const target = event.target as HTMLInputElement;
const file = target.files?.[0];
if (!file) return;
// 验证文件类型
if (!file.type.startsWith("image/")) {
alert("请选择图片文件");
return;
}
// 验证文件大小 (5MB)
if (file.size > 5 * 1024 * 1024) {
alert("图片大小不能超过5MB");
return;
}
// 创建预览
const reader = new FileReader();
reader.onload = (e) => {
avatar.value = e.target?.result as string;
};
reader.readAsDataURL(file);
// 清空input值，避免选择同一文件时不触发change
target.value = "";
}
</script>
<style scoped>
.personal-center {
background: #fff;
min-height: 100%;
padding: 20px 30px;
height: 100%;
padding: 20px;
background: #fff;
}
.tabs {
display: flex;
gap: 24px;
border-bottom: 1.5px solid #F1F3F4;
padding: 0 0 12px 0;
margin-bottom: 30px;
/* 头像相关样式 */
.avatar-container {
display: flex;
align-items: center;
}
.tab {
font-size: 16px;
color: #666666;
padding-bottom: 8px;
position: relative;
cursor: default;
.avatar-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.tab.active {
color: #0288D1;
font-weight: 500;
.avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f8f9fa;
}
.tab.active::after {
content: '';
position: absolute;
left: 0;
bottom: -13px;
height: 4px;
width: 100%;
background: #0288D1;
.avatar-preview-hint {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.card {
background: #ffffff;
padding: 16px 16px 20px;
border: 1.5px solid #D8D8D8;
.avatar-wrapper:hover .avatar-preview-hint {
opacity: 1;
}
.card-title {
font-size: 14px;
color: #333333;
margin-bottom: 12px;
padding-bottom: 14px;
border-bottom: 1.5px solid #E6E6E6;
}
.form {
margin-top: 130px;
background: #ffffff;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.form-row.stack {
flex-direction: column;
align-items: flex-start;
padding: 0 90px;
}
.form-row.align-start {
align-items: flex-start;
}
.label {
width: 72px;
font-size: 14px;
color: #999999;
line-height: 32px;
}
.input {
width: 340px;
height: 41px;
border: 1.5px solid #D8D8D8;
padding: 0 10px;
font-size: 14px;
color: #333333;
background: #F5F8FB;
}
.input-wide {
width: 100%;
}
.textarea {
flex: 1;
width: 100%;
min-height: 120px;
border: 1.5px solid #D8D8D8;
padding: 8px 10px;
font-size: 14px;
color: #333333;
background: #F5F8FB;
resize: none;
}
.actions {
margin-top: 30px;
display: flex;
gap: 12px;
padding: 0 90px;
}
.p-form {
padding: 0 10px;
margin-top: 10px;
}
.p-row {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.p-row.stack {
flex-direction: column;
align-items: flex-start;
}
.p-label {
width: 72px;
font-size: 14px;
color: #999999;
line-height: 32px;
}
.p-input {
width: 320px;
height: 41px;
border: 1.5px solid #D8D8D8;
padding: 0 10px;
font-size: 14px;
color: #333333;
background: #F5F8FB;
}
.p-input-wide {
width: 100%;
}
.p-actions {
margin-top: 30px;
}
.btn {
min-width: 92px;
height: 32px;
border-radius: 1px;
font-size: 14px;
cursor: pointer;
border: none;
}
.btn.primary {
background: #0288D1;
color: #ffffff;
.avatar-edit-btn {
position: absolute !important;
bottom: -4px !important;
right: -4px !important;
}
</style>