593 lines
13 KiB
Vue
593 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="parent-dashboard">
|
|||
|
|
<!-- 欢迎横幅 -->
|
|||
|
|
<div class="welcome-banner">
|
|||
|
|
<div class="banner-content">
|
|||
|
|
<div class="banner-text">
|
|||
|
|
<h1>
|
|||
|
|
<HomeOutlined class="banner-icon" />
|
|||
|
|
<span class="banner-title-text">家长中心</span>
|
|||
|
|
</h1>
|
|||
|
|
<p>关注孩子的阅读成长，陪伴每一步进步！</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="banner-decorations">
|
|||
|
|
<span class="decoration"><BookOutlined /></span>
|
|||
|
|
<span class="decoration"><StarOutlined /></span>
|
|||
|
|
<span class="decoration"><HeartOutlined /></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a-spin :spinning="loading">
|
|||
|
|
<!-- 我的孩子 -->
|
|||
|
|
<div class="section-card">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h3><TeamOutlined /> 我的孩子</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="children-grid" v-if="children.length > 0">
|
|||
|
|
<div
|
|||
|
|
v-for="child in children"
|
|||
|
|
:key="child.id"
|
|||
|
|
class="child-card"
|
|||
|
|
@click="goToChildDetail(child.id)"
|
|||
|
|
>
|
|||
|
|
<div class="child-avatar">
|
|||
|
|
<a-avatar :size="isMobile ? 56 : 64" :style="{ backgroundColor: getAvatarColor(child.id) }">
|
|||
|
|
{{ child.name.charAt(0) }}
|
|||
|
|
</a-avatar>
|
|||
|
|
</div>
|
|||
|
|
<div class="child-info">
|
|||
|
|
<div class="child-name">
|
|||
|
|
{{ child.name }}
|
|||
|
|
<span class="relationship">{{ getRelationshipText(child.relationship) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="child-class">{{ child.class?.name || '未分班' }}</div>
|
|||
|
|
<div class="child-stats">
|
|||
|
|
<span><BookOutlined /> {{ child.readingCount }} 次阅读</span>
|
|||
|
|
<span><ReadOutlined /> {{ child.lessonCount }} 节课</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-arrow">
|
|||
|
|
<RightOutlined />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="empty-state" v-else>
|
|||
|
|
<InboxOutlined class="empty-icon" />
|
|||
|
|
<p>暂无孩子信息</p>
|
|||
|
|
<p class="empty-hint">请联系学校添加孩子信息</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 最近任务 -->
|
|||
|
|
<div class="section-card">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h3><CheckSquareOutlined /> 最近任务</h3>
|
|||
|
|
<a-button type="link" @click="goToTasks" class="view-all-btn">查看全部</a-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-list" v-if="recentTasks.length > 0">
|
|||
|
|
<div v-for="task in recentTasks" :key="task.id" class="task-item">
|
|||
|
|
<div class="task-status" :class="getStatusClass(task.status)">
|
|||
|
|
{{ getStatusText(task.status) }}
|
|||
|
|
</div>
|
|||
|
|
<div class="task-content">
|
|||
|
|
<div class="task-title">{{ task.task.title }}</div>
|
|||
|
|
<div class="task-deadline">
|
|||
|
|
<ClockCircleOutlined />
|
|||
|
|
<span>截止：{{ formatDate(task.task.endDate) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="empty-state compact" v-else>
|
|||
|
|
<p>暂无任务</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 成长档案 -->
|
|||
|
|
<div class="section-card">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h3><FileImageOutlined /> 成长档案</h3>
|
|||
|
|
<a-button type="link" @click="goToGrowth" class="view-all-btn">查看全部</a-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="growth-list" v-if="recentGrowth.length > 0">
|
|||
|
|
<div v-for="record in recentGrowth" :key="record.id" class="growth-item">
|
|||
|
|
<div class="growth-images" v-if="record.images && record.images.length > 0">
|
|||
|
|
<img :src="record.images[0]" alt="成长照片" />
|
|||
|
|
</div>
|
|||
|
|
<div class="growth-content">
|
|||
|
|
<div class="growth-title">{{ record.title }}</div>
|
|||
|
|
<div class="growth-date">{{ formatDate(record.recordDate) }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="empty-state compact" v-else>
|
|||
|
|
<p>暂无成长记录</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a-spin>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
import { message } from 'ant-design-vue';
|
|||
|
|
import {
|
|||
|
|
HomeOutlined,
|
|||
|
|
BookOutlined,
|
|||
|
|
StarOutlined,
|
|||
|
|
HeartOutlined,
|
|||
|
|
TeamOutlined,
|
|||
|
|
ReadOutlined,
|
|||
|
|
CheckSquareOutlined,
|
|||
|
|
FileImageOutlined,
|
|||
|
|
ClockCircleOutlined,
|
|||
|
|
RightOutlined,
|
|||
|
|
InboxOutlined,
|
|||
|
|
} from '@ant-design/icons-vue';
|
|||
|
|
import { getChildren, type ChildInfo } from '@/api/parent';
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
|
|||
|
|
const router = useRouter();
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const children = ref<ChildInfo[]>([]);
|
|||
|
|
const recentTasks = ref<any[]>([]);
|
|||
|
|
const recentGrowth = ref<any[]>([]);
|
|||
|
|
const isMobile = ref(false);
|
|||
|
|
|
|||
|
|
const avatarColors = ['#52c41a', '#1890ff', '#fa8c16', '#eb2f96', '#722ed1'];
|
|||
|
|
|
|||
|
|
const getAvatarColor = (id: number) => avatarColors[id % avatarColors.length];
|
|||
|
|
|
|||
|
|
const getRelationshipText = (relationship: string) => {
|
|||
|
|
const map: Record<string, string> = {
|
|||
|
|
FATHER: '爸爸',
|
|||
|
|
MOTHER: '妈妈',
|
|||
|
|
GRANDFATHER: '爷爷',
|
|||
|
|
GRANDMOTHER: '奶奶',
|
|||
|
|
OTHER: '监护人',
|
|||
|
|
};
|
|||
|
|
return map[relationship] || relationship;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const statusMap: Record<string, { text: string; class: string }> = {
|
|||
|
|
PENDING: { text: '待完成', class: 'status-pending' },
|
|||
|
|
IN_PROGRESS: { text: '进行中', class: 'status-progress' },
|
|||
|
|
COMPLETED: { text: '已完成', class: 'status-completed' },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusText = (status: string) => statusMap[status]?.text || status;
|
|||
|
|
const getStatusClass = (status: string) => statusMap[status]?.class || '';
|
|||
|
|
|
|||
|
|
const formatDate = (date: string) => dayjs(date).format('YYYY-MM-DD');
|
|||
|
|
|
|||
|
|
const checkMobile = () => {
|
|||
|
|
isMobile.value = window.innerWidth < 768;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goToChildDetail = (childId: number) => {
|
|||
|
|
router.push(`/parent/children/${childId}`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goToTasks = () => {
|
|||
|
|
router.push('/parent/tasks');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goToGrowth = () => {
|
|||
|
|
router.push('/parent/growth');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadData = async () => {
|
|||
|
|
loading.value = true;
|
|||
|
|
try {
|
|||
|
|
const data = await getChildren();
|
|||
|
|
children.value = data;
|
|||
|
|
|
|||
|
|
// 如果有孩子，加载第一个孩子的任务和成长记录
|
|||
|
|
if (data.length > 0) {
|
|||
|
|
// 这里可以加载任务和成长记录
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
message.error(error.response?.data?.message || '加载数据失败');
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
checkMobile();
|
|||
|
|
window.addEventListener('resize', checkMobile);
|
|||
|
|
loadData();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
window.removeEventListener('resize', checkMobile);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
$primary-color: #52c41a;
|
|||
|
|
$primary-light: #f6ffed;
|
|||
|
|
$primary-dark: #389e0d;
|
|||
|
|
|
|||
|
|
.parent-dashboard {
|
|||
|
|
// 欢迎横幅
|
|||
|
|
.welcome-banner {
|
|||
|
|
background: linear-gradient(135deg, $primary-color 0%, #73d13d 100%);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 24px 32px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
color: white;
|
|||
|
|
|
|||
|
|
.banner-content {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 24px;
|
|||
|
|
margin: 0 0 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.banner-icon {
|
|||
|
|
font-size: 28px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin: 0;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-decorations {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
font-size: 32px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 区块卡片
|
|||
|
|
.section-card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view-all-btn {
|
|||
|
|
padding: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 孩子卡片
|
|||
|
|
.children-grid {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-card {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
background: #fafafa;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: $primary-light;
|
|||
|
|
|
|||
|
|
.card-arrow {
|
|||
|
|
color: $primary-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-info {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 16px;
|
|||
|
|
min-width: 0;
|
|||
|
|
|
|||
|
|
.child-name {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
.relationship {
|
|||
|
|
margin-left: 8px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-class {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #666;
|
|||
|
|
margin: 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-stats {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-arrow {
|
|||
|
|
color: #d9d9d9;
|
|||
|
|
font-size: 16px;
|
|||
|
|
transition: color 0.3s;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 任务和成长列表
|
|||
|
|
.task-list,
|
|||
|
|
.growth-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-item,
|
|||
|
|
.growth-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12px;
|
|||
|
|
background: #fafafa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
gap: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: $primary-light;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-status {
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
|
|||
|
|
&.status-pending {
|
|||
|
|
background: #fff7e6;
|
|||
|
|
color: #fa8c16;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-progress {
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-completed {
|
|||
|
|
background: $primary-light;
|
|||
|
|
color: $primary-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-content,
|
|||
|
|
.growth-content {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
|
|||
|
|
.task-title,
|
|||
|
|
.growth-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-deadline,
|
|||
|
|
.growth-date {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.growth-images {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 空状态
|
|||
|
|
.empty-state {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 32px;
|
|||
|
|
color: #999;
|
|||
|
|
|
|||
|
|
&.compact {
|
|||
|
|
padding: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 48px;
|
|||
|
|
color: #d9d9d9;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin: 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-hint {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #bfbfbf;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// =============== 移动端响应式 ===============
|
|||
|
|
@media screen and (max-width: 768px) {
|
|||
|
|
.parent-dashboard {
|
|||
|
|
.welcome-banner {
|
|||
|
|
padding: 20px 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
|
|||
|
|
.banner-icon {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-decorations {
|
|||
|
|
gap: 12px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-card {
|
|||
|
|
padding: 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view-all-btn {
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-card {
|
|||
|
|
padding: 14px;
|
|||
|
|
|
|||
|
|
.child-info {
|
|||
|
|
margin-left: 14px;
|
|||
|
|
|
|||
|
|
.child-name {
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-class {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.child-stats {
|
|||
|
|
font-size: 11px;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-item,
|
|||
|
|
.growth-item {
|
|||
|
|
padding: 12px;
|
|||
|
|
|
|||
|
|
.task-status {
|
|||
|
|
padding: 3px 6px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-content,
|
|||
|
|
.growth-content {
|
|||
|
|
.task-title,
|
|||
|
|
.growth-title {
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-deadline,
|
|||
|
|
.growth-date {
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.growth-images {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
padding: 24px;
|
|||
|
|
|
|||
|
|
&.compact {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 平板适配
|
|||
|
|
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
|||
|
|
.parent-dashboard {
|
|||
|
|
.welcome-banner {
|
|||
|
|
padding: 22px 28px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|