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> <template>
<div class="personal-center"> <div class="personal-center">
<!-- Tabs --> <!-- Tabs -->
<div class="tabs"> <n-tabs v-model:value="activeTab" type="line">
<div class="tab" :class="{ active: activeTab === 'base' }" @click="activeTab = 'base'">基础信息</div> <n-tab-pane name="base" tab="基础信息">
<div class="tab" :class="{ active: activeTab === 'password' }" @click="activeTab = 'password'">密码修改</div> <!-- 基础信息内容 -->
</div> <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: 基础信息 --> <n-tab-pane name="password" tab="密码修改">
<div v-if="activeTab === 'base'" class="card"> <!-- 密码修改内容 -->
<div class="card-title">基础信息</div> <n-card title="密码修改" :bordered="false">
<div class="form"> <n-form
<div class="form-row stack"> :model="passwordForm"
<label class="label">姓名：</label> label-placement="left"
<input class="input" type="text" v-model="name" :disabled="!isEditing" /> label-width="80px"
</div> >
<div class="form-row align-start stack"> <n-form-item label="帐号">
<label class="label">自我介绍：</label> <n-input v-model:value="passwordForm.account" disabled />
<textarea class="textarea" v-model="intro" :disabled="!isEditing" rows="4"></textarea> </n-form-item>
</div> <n-form-item label="原密码">
<div class="actions"> <n-input
<button class="btn primary" @click="startEdit">编辑资料</button> v-model:value="passwordForm.oldPassword"
<button class="btn primary" @click="save">保存</button> type="password"
</div> placeholder="请输入原密码"
</div> show-password-on="click"
</div> />
</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"> <n-modal v-model:show="showPreview" @mask-click="closePreview">
<div class="card-title">密码修改</div> <n-card
<div class="p-form"> style="width: 600px"
<div class="p-row stack"> title="头像预览"
<label class="p-label">帐号：</label> :bordered="false"
<input class="p-input p-input-wide" type="text" v-model="account" disabled /> size="huge"
</div> role="dialog"
<div class="p-row stack"> aria-modal="true"
<label class="p-label">原密码：</label> >
<input class="p-input p-input-wide" type="password" v-model="oldPassword" placeholder="请输入原密码" /> <template #header-extra>
</div> <n-button quaternary circle @click="closePreview">
<div class="p-row stack"> <template #icon>
<label class="p-label">新密码：</label> <svg
<input class="p-input p-input-wide" type="password" v-model="newPassword" placeholder="请输入新密码" /> width="20"
</div> height="20"
<div class="p-row stack"> viewBox="0 0 24 24"
<label class="p-label">确认密码：</label> fill="currentColor"
<input class="p-input p-input-wide" type="password" v-model="confirmPassword" placeholder="请确认密码" /> >
</div> <path
<div class="p-actions"> 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"
<button class="btn primary" @click="savePassword">保存</button> />
</div> </svg>
</div> </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>
</div> </n-card>
</n-modal>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// @ts-nocheck import { ref, reactive } from "vue";
import { ref } from 'vue' import { useUserStore } from "@/stores/user";
const isEditing = ref(false) interface FormData {
const activeTab = ref<'base' | 'password'>('base') name: string;
const name = ref('张成学') intro: string;
const intro = ref( }
'复旦大学经济学院教师，长期从事西方经济学的教学，主要讲授经济学原理、微观经济学、宏观经济学、管理经济学等基础课程，参与的“宏观经济学课程”被评为上海市精品课程与国家级精品课程'
) 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 passwordForm = reactive<PasswordForm>({
const oldPassword = ref('') account: userStore.user?.username || "",
const newPassword = ref('') oldPassword: "",
const confirmPassword = ref('') newPassword: "",
confirmPassword: "",
});
function startEdit() { function startEdit() {
isEditing.value = true isEditing.value = true;
} }
function save() { 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() { function savePassword() {
if (!oldPassword.value || !newPassword.value || !confirmPassword.value) { if (
return !passwordForm.oldPassword ||
} !passwordForm.newPassword ||
if (newPassword.value !== confirmPassword.value) { !passwordForm.confirmPassword
return ) {
} 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> </script>
<style scoped> <style scoped>
.personal-center { .personal-center {
background: #fff; height: 100%;
min-height: 100%; padding: 20px;
padding: 20px 30px; background: #fff;
} }
.tabs { /* 头像相关样式 */
display: flex; .avatar-container {
gap: 24px; display: flex;
border-bottom: 1.5px solid #F1F3F4; align-items: center;
padding: 0 0 12px 0;
margin-bottom: 30px;
} }
.tab { .avatar-wrapper {
font-size: 16px; position: relative;
color: #666666; display: flex;
padding-bottom: 8px; align-items: center;
position: relative; justify-content: center;
cursor: default;
} }
.tab.active { .avatar-fallback {
color: #0288D1; display: flex;
font-weight: 500; align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f8f9fa;
} }
.tab.active::after { .avatar-preview-hint {
content: ''; position: absolute;
position: absolute; top: 0;
left: 0; left: 0;
bottom: -13px; right: 0;
height: 4px; bottom: 0;
width: 100%; background: rgba(0, 0, 0, 0.3);
background: #0288D1; border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
} }
.card { .avatar-wrapper:hover .avatar-preview-hint {
background: #ffffff; opacity: 1;
padding: 16px 16px 20px;
border: 1.5px solid #D8D8D8;
} }
.card-title { .avatar-edit-btn {
font-size: 14px; position: absolute !important;
color: #333333; bottom: -4px !important;
margin-bottom: 12px; right: -4px !important;
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;
} }
</style> </style>